Rollup Tree Shaking

Tree shaking 是一种用于删除未使用的代码的技术。这项技术有助于减少最终生成的文件大小，提高应用性能。在 Rollup 中，tree shaking 是一个核心特性，它利用了 ES6 模块的静态结构来移除死代码。

如何启用 Tree Shaking

Rollup 默认启用了 tree shaking。为了确保 tree shaking 的最佳效果，建议使用 ES6 模块格式进行编码。ES6 模块允许 Rollup 精确地追踪和移除未使用的代码。

例如，在你的 main.js 文件中，你可以这样导入模块：

import { funcA, funcB } from './module.js';

在这个例子中，只有 funcA 和 funcB 会被包含在最终的打包文件中，即使 module.js 文件中有其他函数或变量。

示例：启用 Tree Shaking

假设你有一个简单的项目结构如下：

/project
  /src
    main.js
    module.js
  rollup.config.js

在 module.js 文件中，你可以定义一些函数：

// www.javascriptcn.com code example
// src/module.js
export function funcA() {
  console.log('Function A');
}

function funcB() {
  console.log('Function B');
}

export default funcB;

在 main.js 文件中，你可以选择性地导入这些函数：

// src/main.js
import { funcA } from './module.js';

funcA();

接下来，配置 rollup.config.js 文件：

// www.javascriptcn.com code example
// rollup.config.js
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    terser()
  ]
};

当你运行 Rollup 构建命令时，funcB 将不会出现在最终的打包文件中，因为它是未被使用的默认导出。

Tree Shaking 的局限性

尽管 tree shaking 非常强大，但它也有一些局限性：

1. CommonJS 模块：如果你在项目中使用 CommonJS 模块（require 和 module.exports），Rollup 将无法有效执行 tree shaking。为了获得最佳效果，应尽可能使用 ES6 模块。

2. 动态导入：当使用动态导入（如 import() 函数）时，Rollup 可能无法完全移除未使用的代码，因为它需要在构建时确定哪些代码是必需的。

3. 副作用：如果模块有副作用（例如，全局变量、DOM 操作等），Rollup 可能会保留这些代码以确保功能正确。你可以通过在 package.json 文件中声明 "sideEffects": false 来标记无副作用的模块。

使用 sideEffects 属性

如果你有一个没有副作用的纯函数库，可以将 sideEffects 设置为 false，这样 Rollup 在 tree shaking 时可以更激进地移除未使用的代码：

// package.json
{
  "name": "your-package",
  "sideEffects": false
}

结论

通过合理使用 ES6 模块和适当的配置，Rollup 的 tree shaking 功能可以帮助你显著减小最终输出文件的大小，并提高应用程序的加载速度。理解和充分利用这些优化手段，可以使你的前端项目更加高效和健壮。