Ru果你曾为 JavaScript 包体积膨胀而抓狂，或在上线后因为加载慢而被用户投诉，那么你一定对“摇树”这件事充满好奇。Rollup 作为首批把摇树写进核心的打包工具，它的实现方式既简洁又让人惊叹。本文将从底层原理出发，配合真实案例，手把手教你玩转 Rollup 的摇树功Neng，让你的产物像经过精雕细琢的艺术品一样轻盈。

在现代前端生态里ES Module Yi经成为主流。它天生具备静态结构，编译时就Neng明确每个导入导出的关系。借助这种特性，构建工具Ke以在打包阶段“kan见”哪些代码真的会被执行，从而把那些永远不会跑到浏览器里的死代码直接剔除。

相比传统的require / module.exports 写法，摇树Ke以帮助我们：

显著降低首屏加载时间；

减少带宽消耗和用户流量费用；

提升缓存命中率。

Rollup 在读取每个入口文件后会使用把源码解析成 AST。这棵抽象语法树记录了所有变量声明、函数定义以及import / export语句的位置。

// 简化示例：src/util.js
export function foo {}
export const bar = 42;
export default class MyClass {}
// Rollup 将其转换为类似：
{
  type: 'Program',
  body: , declaration:{...}},
    { type:'ExportDefaultDeclaration', declaration:{...}}
  ]
}

有了 AST，Rollup Neng在不运行代码的情况下追踪每个标识符到底是从哪儿来、去向何处。

从src/main.js出发，Rollum 会递归读取每条import … from …语句，把对应文件加入依赖图。当所有节点dou被收集完毕后我们得到一张完整的模块网络。

关键点：

Esm 的静态导入只Neng写字面量字符串。这保证了依赖图在编译期就Neng确定；

If a module contains top‑level side effects , Rollup will conservatively keep it.

有了依赖图后Rollup 从入口开始向回走——只要某个导出被其他模块引用，就给它贴上“活”的标签。未被标记的导出会被视作死代码。

举例：

// src/a.js
export const used =  => console.log;
export const unused =  => console.log;
// src/main.js
import { used } from './a.js';
used;

在上面的场景里unused 没有任何引用路径指向它，所以在生成阶段会被彻底抹掉。

The final bundle is produced by concatenating all modules that contain at least one “alive” export. 此时Ru果你再加上@rollup/plugin-terser，Zui终产物往往比手写的 ES5 代码还要紧凑。

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'esm',               // ESM 输出便于二次摇树
    sourcemap: true
  },
  plugins: ,
  treeshake: {
    moduleSideEffects: false   // 告诉 Rollup 默认所有模块无副作用
                                 // 若有副作用文件，可用数组指定排除项
  }
};

Treeshake 参数说明：

true/false: 是否整体开启/关闭摇树；

{ moduleSideEffects }: 对单个文件进行细粒度控制；

{ propertyReadSideEffects }: 当读取对象属性时是否保留副作用。

# 动态导入导致失效： 像{ ...utils }这种写法，在编译阶段无法确定实际使用了哪些成员，请改用具名导入或显式列举需要的成员。

# CommonJS 模块： Ru果直接引入一个仅提供CJS 导出 = require` 的库，即使使用了插件转化，也可Neng留下大量未清理的代码。推荐使用对应的 ESM 包，例如Lodash-es 替代 lodash .

# 副作用文件： CSS、全局 polyfill 等文件往往会在顶部执行副作用。可在项目根目录下的package.json{ "sideEffects": } 或者直接设为false并自行管理这些副作用。