探讨 JavaScript 中 Tree Shaking (摇树优化) 的原理，以及 package.json 中的 sideEffects 字段如何影响打包结果。

各位前端的英雄们，早上/下午/晚上好！欢迎来到今天的“砍树大会”！

今天咱们要聊聊 JavaScript 里一个非常重要的优化手段——Tree Shaking，中文名叫“摇树优化”，听起来是不是很暴力？其实就是把没用的代码像秋风扫落叶一样砍掉，让咱们的打包体积瘦身成功。

咱们先从一个故事开始，然后逐步深入Tree Shaking的原理，以及 package.json 中的 sideEffects 字段如何控制哪些树枝可以被砍掉，哪些必须保留。

故事：小明的“超重”网站

话说小明同学接了个项目，用了一个很火的 UI 库，功能强大是真强大，但引入之后发现，打包出来的文件巨大无比，加载速度慢到让用户想砸电脑。

小明挠头，心想：“我明明只用了这个库里的三个组件啊，怎么把整个森林都搬过来了？”

这就是典型的“过度引用”问题，也是 Tree Shaking 要解决的问题。

Tree Shaking 的本质：死亡代码消除 (Dead Code Elimination)

Tree Shaking 的本质就是“死亡代码消除”，也就是把永远不会被执行的代码清理掉。它依赖于 ES Module 的静态分析特性。

• 静态分析： 静态分析是指在不运行代码的情况下，通过分析代码的结构来确定代码的依赖关系和行为。
• ES Module 的特性： ES Module 使用 import 和 export 语句来明确地声明模块之间的依赖关系。这使得构建工具（如 Webpack、Rollup、Parcel）可以静态地分析代码的依赖关系，从而确定哪些代码是未被使用的。

Tree Shaking 的工作流程

1. 标记 (Mark): 构建工具从入口文件开始，递归地分析代码的依赖关系，标记所有被使用的模块和变量。这个过程就像沿着树的主干和枝干走，标记所有有用的部分。
2. 摇晃 (Shake): 构建工具遍历所有模块，找出那些没有被标记的模块和变量，并将它们从最终的打包文件中移除。这个过程就像摇晃树，让枯枝败叶掉落。

代码示例：Tree Shaking 的威力

假设我们有以下几个文件：

math.js:

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

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

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

// 这个函数永远不会被用到
export function divide(a, b) {
  return a / b;
}

app.js:

import { add, subtract } from './math.js';

console.log('加法结果:', add(5, 3));
console.log('减法结果:', subtract(5, 3));

webpack.config.js:

const path = require('path');

module.exports = {
  mode: 'production', // 必须是 production 模式，Tree Shaking 才会生效
  entry: './app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

在这个例子中，multiply 和 divide 函数虽然在 math.js 中被定义了，但是在 app.js 中并没有被使用。通过 Tree Shaking，构建工具会将这两个函数从最终的 bundle.js 文件中移除，从而减小文件体积。

注意事项：ES Module 是前提

Tree Shaking 依赖于 ES Module 的静态分析特性。所以，如果你的代码中使用的是 CommonJS 规范（require 和 module.exports），Tree Shaking 就无法生效。

package.json 中的 sideEffects 字段：控制哪些树枝不能砍

sideEffects 字段是 package.json 中的一个属性，它用来告诉构建工具，哪些文件包含副作用 (side effects)。

• 什么是副作用？ 副作用是指，一个函数或模块在执行过程中，除了返回值之外，还会对外部环境产生影响。例如，修改全局变量、修改 DOM 元素、发送网络请求等等。

• sideEffects 的作用： sideEffects 字段告诉构建工具，哪些文件是有副作用的，这些文件即使没有被直接引用，也不能被 Tree Shaking 移除。

sideEffects 的取值

sideEffects 字段可以取以下几种值：

• false：表示项目中的所有文件都没有副作用。这意味着构建工具可以放心地对所有文件进行 Tree Shaking。这是一个非常激进的声明，必须确保你的代码真的没有任何副作用。
• []：与false含义相同。
• 一个数组：表示数组中的文件（或匹配的模式）包含副作用。构建工具不会对这些文件进行 Tree Shaking。数组可以包含具体的 JavaScript 文件路径、CSS 文件路径，或者使用通配符 * 来匹配多个文件。

sideEffects 的使用场景

1. CSS 文件: CSS 文件通常包含副作用，因为它们会修改页面的样式。所以，如果你使用 CSS Modules 或其他方式引入 CSS 文件，你应该将 CSS 文件添加到 sideEffects 数组中。例如：

   {
     "name": "my-library",
     "version": "1.0.0",
     "sideEffects": [
       "*.css"
     ]
   }

2. polyfill 或初始化代码: 有些库会包含 polyfill 或初始化代码，这些代码需要在项目启动时执行，即使没有被直接引用。例如：

   {
     "name": "my-library",
     "version": "1.0.0",
     "sideEffects": [
       "src/polyfill.js",
       "src/init.js"
     ]
   }

3. 包含副作用的 JavaScript 模块: 有些 JavaScript 模块虽然没有被直接引用，但是它们会修改全局变量或者执行其他副作用操作。例如：

   // src/analytics.js
   window.analytics = {
     track: function(event) {
       console.log('Tracking event:', event);
       // 发送分析数据到服务器
     }
   };

   即使你没有在代码中直接 import 这个模块，它也会在全局作用域中创建一个 window.analytics 对象。在这种情况下，你需要在 package.json 中将 src/analytics.js 添加到 sideEffects 数组中。

   {
     "name": "my-library",
     "version": "1.0.0",
     "sideEffects": [
       "src/analytics.js"
     ]
   }

代码示例：sideEffects 的影响

假设我们有以下几个文件：

src/utils.js:

export function utilityFunction() {
  console.log('This is a utility function.');
  return 42;
}

src/analytics.js:

// 这个模块有副作用，它会修改全局对象
window.analytics = {
  track: function(event) {
    console.log('Tracking event:', event);
  }
};

src/index.js:

import { utilityFunction } from './utils.js';

console.log('The answer is:', utilityFunction());

package.json (没有 sideEffects 字段):

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "src/index.js",
  "license": "MIT"
}

在这种情况下，由于 package.json 中没有 sideEffects 字段，构建工具会认为所有文件都没有副作用，因此可能会将 src/analytics.js 文件移除，导致 window.analytics 对象没有被创建。

为了解决这个问题，我们需要在 package.json 中添加 sideEffects 字段，将 src/analytics.js 添加到数组中：

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "src/index.js",
  "license": "MIT",
  "sideEffects": [
    "src/analytics.js"
  ]
}

这样，构建工具就不会对 src/analytics.js 文件进行 Tree Shaking，确保 window.analytics 对象被正确创建。

sideEffects: false 的风险与收益

将 sideEffects 设置为 false，意味着告诉构建工具整个项目都没有副作用，可以尽情地进行 Tree Shaking。这可以显著减小打包体积，提升加载速度。

但风险在于，如果你错误地声明了 sideEffects: false，而你的代码实际上包含副作用，那么构建工具可能会将包含副作用的代码移除，导致程序出错。

所以，在设置 sideEffects: false 之前，务必仔细检查你的代码，确保真的没有任何副作用。

Tree Shaking 的局限性

Tree Shaking 并不是万能的。它只能消除那些静态地、明显未被使用的代码。对于一些动态的、复杂的代码，Tree Shaking 可能无法有效工作。

例如，如果你的代码中使用 eval 函数或者动态 require 语句，Tree Shaking 就很难确定代码的依赖关系，从而无法进行优化。

一些建议和最佳实践

1. 使用 ES Module: 尽可能使用 ES Module 规范编写代码，以便构建工具能够进行静态分析和 Tree Shaking。
2. 避免副作用: 尽量编写纯函数，减少副作用的使用。
3. 谨慎使用 sideEffects: false: 在设置 sideEffects: false 之前，务必仔细检查你的代码，确保真的没有任何副作用。
4. 使用构建工具的分析工具: Webpack 等构建工具提供了分析工具，可以帮助你了解代码的依赖关系和 Tree Shaking 的效果。例如，Webpack 的 webpack-bundle-analyzer 插件可以可视化你的打包文件，让你更容易发现未被使用的代码。
5. 定期检查打包体积: 定期检查你的打包体积，确保 Tree Shaking 仍然有效。

总结

Tree Shaking 是一项非常重要的优化技术，可以显著减小 JavaScript 打包体积，提升加载速度。它依赖于 ES Module 的静态分析特性，并通过 package.json 中的 sideEffects 字段来控制哪些文件可以被 Tree Shaking 移除。

• Tree Shaking 的本质： 死亡代码消除 (Dead Code Elimination)
• Tree Shaking 的前提： 使用 ES Module 规范
• sideEffects 的作用： 告诉构建工具哪些文件包含副作用，不能被 Tree Shaking 移除。
• sideEffects: false 的风险： 错误声明可能导致包含副作用的代码被移除，导致程序出错。

希望今天的“砍树大会”能帮助大家更好地理解 Tree Shaking 的原理和使用方法。记住，砍树是为了让森林更健康，而不是把整个森林都砍光！

最后，给大家留个小作业：

1. 在一个简单的项目中，尝试使用 Tree Shaking，并观察打包体积的变化。
2. 阅读你常用的 UI 库的文档，了解它们是如何支持 Tree Shaking 的。
3. 思考一下，在你的项目中，哪些文件可能包含副作用，需要添加到 sideEffects 数组中。

感谢大家的参与！祝大家砍树愉快！