探讨 JavaScript Rollup 的 Tree Shaking 原理，以及它在构建 Library 和 Framework 时的优势与 Webpack 的区别。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Rollup 的 Tree Shaking：摇掉无效代码，轻装上阵！

大家好，我是你们的老朋友，今天咱们来聊聊一个前端构建工具里非常酷炫，但又容易被忽略的概念——Tree Shaking。这可不是让你去摇树摘果子，而是指在打包过程中，自动移除那些永远不会被执行到的代码，让你的打包结果更加精简，就像给代码做了个深度清洁。

我们主要聚焦在 Rollup 这个构建工具上，说说它的 Tree Shaking 原理，以及它在构建 Library 和 Framework 时的优势，最后还会对比一下它和 Webpack 在这方面的异同。

什么是 Tree Shaking？为什么要用它？

想象一下，你写了一个工具库，里面有 100 个函数，但你的项目只用到了其中的 5 个。如果没有 Tree Shaking，那打包出来的结果会包含这 100 个函数，即使有 95 个函数永远不会被调用。这就造成了浪费，增加了文件体积，影响了加载速度。

Tree Shaking 的目标就是解决这个问题。它通过静态分析你的代码，找出那些没有被引用或者使用的代码，然后把它们从最终的打包结果中移除。简单来说，就是“按需打包”，你需要什么，就打包什么。

为什么要用 Tree Shaking？

减少文件体积： 这是最直接的好处。更小的文件体积意味着更快的加载速度，更好的用户体验。
提升性能： 浏览器需要解析和执行的代码更少，性能自然会提升。
减少带宽消耗： 对于用户来说，更小的文件意味着更少的流量消耗。

Rollup 的 Tree Shaking 原理：静态分析的艺术

Rollup 之所以能实现高效的 Tree Shaking，关键在于它采用了静态分析的方法。

什么是静态分析？

静态分析就是在不运行代码的情况下，通过分析代码的结构、语法和依赖关系，来推断代码的行为。简单来说，就是“看代码猜结果”。

Rollup 是怎么做到的？

ES Module 的功劳： Rollup 依赖于 ES Module 的 import 和 export 语法来分析模块之间的依赖关系。ES Module 的静态特性，使得 Rollup 可以在编译时确定模块的依赖关系，而不需要等到运行时。
构建依赖图： Rollup 会根据 import 和 export 语句，构建出一个模块依赖图。这个图清晰地展示了各个模块之间的引用关系。
标记未使用代码： Rollup 会从入口模块开始，递归地遍历依赖图。对于每个模块，它会标记出哪些变量、函数、类被使用到了。
移除未使用代码： 最后，Rollup 会把那些没有被标记为使用的代码，从最终的打包结果中移除。

举个例子：

假设我们有三个模块：

moduleA.js:

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

moduleB.js:

import { add } from './moduleA.js';

export function multiply(a, b) {
  return a * b;
}

export function calculateSum(a, b, c) {
  return add(a, b) + c;
}

main.js:

import { multiply } from './moduleB.js';

console.log(multiply(2, 3));

在这个例子中，main.js 只用到了 moduleB.js 中的 multiply 函数。而 moduleB.js 用到了 moduleA.js 中的 add 函数。moduleA.js 中的 subtract 函数，以及 moduleB.js 中的 calculateSum 函数都没有被用到。

Rollup 会通过静态分析，识别出这些未使用的代码，并将它们从最终的打包结果中移除。最终打包的结果只会包含 add、multiply 函数以及相关的依赖关系。

代码示例：Rollup 配置

// rollup.config.js
import { terser } from 'rollup-plugin-terser'; // 压缩代码，进一步优化Tree Shaking

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es' //  ES Module 格式，方便Tree Shaking
  },
  plugins: [
    terser() //  使用 terser 插件压缩代码
  ]
};

这个简单的 Rollup 配置文件指定了入口文件为 src/main.js，输出文件为 dist/bundle.js，并指定输出格式为 ES Module。terser 插件用于压缩代码，进一步优化 Tree Shaking 的效果。

Rollup 在构建 Library 和 Framework 时的优势

Rollup 在构建 Library 和 Framework 时，相比于其他构建工具（比如 Webpack），具有一些独特的优势：

更小的体积： Rollup 的 Tree Shaking 更加 aggressive，它能够更彻底地移除未使用的代码。这对于 Library 和 Framework 来说至关重要，因为它们会被许多项目引用，文件体积越小，对用户的影响就越小。
更好的性能： 更小的体积意味着更快的加载速度和更好的性能。这对于 Library 和 Framework 来说同样重要，因为它们会被频繁地使用，性能的提升会带来显著的改善。
专注于 ES Module： Rollup 最初就是为了 ES Module 而设计的，它对 ES Module 的支持非常完善。这使得 Rollup 在处理 ES Module 格式的代码时，更加高效和可靠。
配置简单： 相比于 Webpack，Rollup 的配置更加简单和直观。这使得开发者可以更快地上手 Rollup，并专注于代码的编写。

表格对比：Rollup vs Webpack (Tree Shaking 方面)

特性	Rollup	Webpack
Tree Shaking	更 aggressive，更彻底	需要配置，依赖于 ES Module 和 Side Effects
适用场景	Library、Framework，追求极致体积优化	应用，复杂项目，需要更多功能
配置	相对简单	相对复杂
默认格式	ES Module	CommonJS, AMD, ES Module 等

案例分析：使用 Rollup 构建 React 组件库

假设我们要构建一个 React 组件库，包含一些常用的 UI 组件，比如 Button、Input、Select 等。我们可以使用 Rollup 来打包这些组件，以获得最小的文件体积。

编写组件代码：

// src/components/Button.js
import React from 'react';

export default function Button(props) {
  return <button {...props}>{props.children}</button>;
}

// src/components/Input.js
import React from 'react';

export default function Input(props) {
  return <input {...props} />;
}

// src/index.js
export { default as Button } from './components/Button';
export { default as Input } from './components/Input';

配置 Rollup：

// rollup.config.js
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/index.js',
      format: 'cjs',
      sourcemap: true
    },
    {
      file: 'dist/index.es.js',
      format: 'es',
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(), //  排除 peerDependencies
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled' //  将 Babel 辅助函数打包到一起
    }),
    terser() //  压缩代码
  ]
};

这个 Rollup 配置文件使用了以下插件：

@rollup/plugin-babel: 用于转换 ES6+ 代码。
rollup-plugin-terser: 用于压缩代码。
rollup-plugin-peer-deps-external: 用于排除 peerDependencies，避免将 React 等依赖打包到组件库中。

运行 Rollup：
```
rollup -c
```
运行 Rollup 后，会在 dist 目录下生成 index.js 和 index.es.js 两个文件，分别对应 CommonJS 和 ES Module 格式的组件库。

通过使用 Rollup，我们可以确保组件库的文件体积尽可能小，从而提升应用的性能。

Rollup vs Webpack：Tree Shaking 的异同

虽然 Rollup 和 Webpack 都支持 Tree Shaking，但它们在实现方式和效果上存在一些差异。

Rollup：

更加 aggressive： Rollup 的 Tree Shaking 更加 aggressive，它会尝试移除一切未使用的代码，即使这些代码可能存在一些副作用。
依赖于 ES Module： Rollup 依赖于 ES Module 的 import 和 export 语法来实现 Tree Shaking。
配置相对简单： Rollup 的配置相对简单，易于上手。

Webpack：

需要配置： Webpack 的 Tree Shaking 需要进行配置，需要设置 optimization.usedExports 和 sideEffects 选项。
依赖于 ES Module 和 Side Effects： Webpack 的 Tree Shaking 依赖于 ES Module 的 import 和 export 语法，以及 sideEffects 选项的配置。sideEffects 选项用于告诉 Webpack 哪些模块具有副作用，不能被安全地移除。
配置相对复杂： Webpack 的配置相对复杂，需要了解更多的概念和选项。

Side Effects 是什么？为什么重要？

Side Effects 指的是模块执行后，会对外部环境产生影响的行为。比如修改全局变量、修改 DOM 结构、发送 HTTP 请求等。

如果一个模块具有 Side Effects，那么即使它没有被直接引用，也可能需要被保留在最终的打包结果中。因为它的执行可能会对应用的运行产生影响。

Webpack 的 sideEffects 选项：

sideEffects 选项用于告诉 Webpack 哪些模块具有副作用。它可以是一个布尔值，表示整个模块是否具有副作用；也可以是一个数组，表示哪些文件具有副作用。

例如，如果你的 CSS 文件具有副作用，你可以在 package.json 中设置 sideEffects: ["./src/style.css"]。

总结：

如果你的项目是一个 Library 或 Framework，追求极致的文件体积优化，那么 Rollup 是一个不错的选择。
如果你的项目是一个复杂的应用，需要更多的功能和灵活性，那么 Webpack 可能更适合你。

Tree Shaking 的注意事项

使用 ES Module： 确保你的代码使用 ES Module 的 import 和 export 语法。
避免 Side Effects： 尽量避免在模块中产生 Side Effects。如果必须产生 Side Effects，需要正确配置 Webpack 的 sideEffects 选项。
使用 Pure Functions： 尽量使用 Pure Functions（纯函数），即没有 Side Effects 的函数。
代码压缩： 使用代码压缩工具（比如 Terser）可以进一步优化 Tree Shaking 的效果。

总结

Tree Shaking 是一项非常重要的优化技术，可以显著减少文件体积，提升应用性能。Rollup 通过静态分析，实现了高效的 Tree Shaking，特别适合用于构建 Library 和 Framework。当然，Webpack 也在 Tree Shaking 方面做了很多努力，通过配置 sideEffects 选项，可以实现更加精确的 Tree Shaking。

希望今天的分享能帮助你更好地理解 Tree Shaking 的原理和应用，并在实际项目中运用它来优化你的代码。

这次的讲座就到这里，感谢大家的收听！咱们下次再见！