JS 加载性能Tree Shaking优化详解

什么是Tree Shaking

Tree shaking是一个术语，用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于ES2015模块系统中的静态结构特性，例如import和export。这个术语和概念实际上是由 ES2015 模块打包工具rollup启发而来，它是一个目前广泛使用的项 目构建工具。

Tree Shaking优化方法

方法一: Webpack 配置方式

• 安装 webpack 和相关 loader

npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env --save-dev

• 在webpack配置文件中增加如下内容

module.exports = {
  mode: "production", //在mode中加入这个字段
  entry: "./entry.js",
  output: {
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            plugins: [],
          },
        },
      },
    ],
  },
};

• 配置Babel

安装@babel/plugin-transform-runtime，这是一个高级的Babel插件，它会自动添加所需的 polyfill，并且不会向全局引入任何内容。

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

方法二: Rollup 配置方式

• 安装相关依赖

npm install -D rollup rollup-plugin-babel

• 在 .babelrc 配置文件中写入如下内容

{
  "presets": [
    ["@babel/preset-env"]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime"]
  ]
}

• 在执行命令

npx rollup -c rollup.config.js 

• 在rollup.config.js文件中写入如下内容

import babel from '@rollup/plugin-babel'; //rollup的babel插件
export default {
    input: ['index.js', 'utility.js'],//把需要打包的文件的相对路径或绝对路径填写在这个数组中
    output: { //输出目录
        dir: 'dist',
        format: 'umd', //输出的文件格式，支持amd, cjs, esm, iife, umd五种格式 
        sourcemap: true,
    },
    plugins: [
        babel({
          babelHelpers: 'runtime',
          exclude: 'node_modules/**',
          plugins: [["@babel/plugin-transform-runtime"]],
        }),
        //其他插件
    ]
};

示例

• 示例一

一个原始的JavaScript模块，会导入几个其他模块并抛出一个默认函数：

import a from 'module-a';
import b from 'module-b';

export default function() {
    console.log( a(), b() );
}

可以使用 Tree Shaking 移除所有未使用变量，将转化为如下形式：

import a from 'module-a';

export default function() {
    console.log( a() );
}

• 示例二

一个样例, 过滤出现次数大于1的列表项，这里使用的ES6语法。

const nums = [1, 2, 3, 2, 4, 4, 5, 3];
const uniqueNums = [...new Set(nums)];
console.log(uniqueNums); //[1, 2, 3, 4, 5]

我们使用Tree Shaking来优化上面的代码：

const nums = [1, 2, 3, 2, 4, 4, 5, 3];
const uniqueNums = Array.from(new Set(nums));
console.log(uniqueNums); //[1, 2, 3, 4, 5]

结论

通过使用Tree Shaking优化代码，我们可以极大地减小代码体积和加速页面加载速度，提高用户体验。无论是Webpack还是Rollup都能实现这种优化方式。