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 文件中，你可以定义一些函数：
-- -------------------- ---- ------- -- ------------- ------ -------- ------- - --------------------- ---- - -------- ------- - --------------------- ---- - ------ ------- ------
在 main.js 文件中，你可以选择性地导入这些函数：
// src/main.js
import { funcA } from './module.js';
funcA();接下来，配置 rollup.config.js 文件：
-- -------------------- ---- -------
-- ----------------
------ - ------ - ---- -----------------------
------ ------- -
------ --------------
------- -
----- -----------------
------- ------
--
-------- -
--------
-
--当你运行 Rollup 构建命令时，funcB 将不会出现在最终的打包文件中，因为它是未被使用的默认导出。
Tree Shaking 的局限性
尽管 tree shaking 非常强大，但它也有一些局限性：
CommonJS 模块：如果你在项目中使用 CommonJS 模块（
require和module.exports），Rollup 将无法有效执行 tree shaking。为了获得最佳效果，应尽可能使用 ES6 模块。动态导入：当使用动态导入（如
import()函数）时，Rollup 可能无法完全移除未使用的代码，因为它需要在构建时确定哪些代码是必需的。副作用：如果模块有副作用（例如，全局变量、DOM 操作等），Rollup 可能会保留这些代码以确保功能正确。你可以通过在
package.json文件中声明"sideEffects": false来标记无副作用的模块。
使用 sideEffects 属性
如果你有一个没有副作用的纯函数库，可以将 sideEffects 设置为 false，这样 Rollup 在 tree shaking 时可以更激进地移除未使用的代码：
// package.json
{
"name": "your-package",
"sideEffects": false
}结论
通过合理使用 ES6 模块和适当的配置，Rollup 的 tree shaking 功能可以帮助你显著减小最终输出文件的大小，并提高应用程序的加载速度。理解和充分利用这些优化手段，可以使你的前端项目更加高效和健壮。