Tree Shaking

Tree Shaking 是一种优化技术，用于去除 JavaScript 中未使用的代码，从而减小最终打包文件的体积。它的核心思想是“摇树”，通过分析代码的引用关系，将没有被使用到的代码（即死代码）从最终的输出中移除。这个术语来源于“摇晃树木”的比喻：把树上的不必要的枝叶（即未使用的代码）摇掉，只留下需要的部分。

Tree Shaking 工作原理：

1. 静态分析： Tree Shaking 依赖于 JavaScript 的 ES6 模块化机制（import 和 export）。与 CommonJS 的动态 require 和 module.exports 不同，ES6 模块的静态结构使得工具（如 Webpack、Rollup）可以在编译时分析出哪些代码是导入和导出的，哪些是未使用的。

2. 标记未使用的代码： 通过静态分析，打包工具能够确定哪些导出的函数、变量或者类是没有被其他地方引用的。没有被使用到的代码就会被标记为“死代码”。

3. 删除死代码： 在最终的打包过程中，Tree Shaking 会将这些“死代码”从输出文件中删除，确保最终的代码中只包含必要的部分。

为什么 Tree Shaking 只适用于 ES6 模块？

Tree Shaking 之所以依赖 ES6 模块化语法，主要是因为 ES6 的 import 和 export 是静态的，它们在编译时就能确定代码的依赖关系。而 CommonJS 的 require 和 module.exports 是动态的，打包工具很难在编译阶段完全分析出哪些模块是被使用的，哪些不是。因此，Tree Shaking 对于 CommonJS 模块的支持有限。

Tree Shaking 需要满足的条件：

1. ES6 模块语法：
   • 必须使用 ES6 的模块系统（import / export），而非 CommonJS 的 require / module.exports。
2. 支持 Tree Shaking 的打包工具：
   • 需要使用支持 Tree Shaking 的打包工具，如 Webpack（从 v2 版本开始支持）、Rollup 或 Parcel。这些工具能分析代码，并能去除未使用的代码。
3. 代码必须可识别：
   • 为了进行有效的 Tree Shaking，代码中的模块导入和导出需要是明确的、静态的。如果代码中有动态的导入（比如通过字符串拼接来动态导入模块），那么 Tree Shaking 将无法准确分析。

Tree Shaking 的实践：

1. 模块化开发： 使用 ES6 的 import 和 export 语法，这样才能确保 Tree Shaking 可以识别和删除未使用的模块。

   示例：

   // utils.js
   export function add(a, b) {
     return a + b;
   }
   
   export function multiply(a, b) {
     return a * b;
   }
   
   // main.js
   import { add } from './utils';
   console.log(add(1, 2));
   

   在这个例子中，如果我们只使用了 add 函数，打包工具会通过 Tree Shaking 去除 multiply 函数，最终只打包 add 相关的代码。

2. 确保代码中没有副作用： Tree Shaking 会尽量去掉不必要的代码，但如果代码中存在副作用（比如模块加载时执行某些操作），打包工具会认为该模块可能对整个应用有影响，从而不能删除。为了解决这个问题，可以在 package.json 中声明 sideEffects 属性来告诉工具哪些文件是有副作用的。

   示例：

   {
     "sideEffects": [
       "./src/styles.css",
       "./src/some-module-with-side-effects.js"
     ]
   }
   

   通过这种方式，打包工具可以更智能地识别哪些代码是可以安全删除的，哪些不可以。

3. 使用现代 JavaScript 框架/库： 很多现代 JavaScript 框架和库（如 Lodash、React、Vue）都已经支持 ES6 模块化，且为 Tree Shaking 优化过，因此在使用这些库时能自动受益于 Tree Shaking。

Tree Shaking 的局限性：

1. 动态导入： 如果使用了动态导入（import()），Tree Shaking 就无法分析其依赖关系，因为它是在运行时才决定是否加载的。

2. 副作用： 如果某个模块包含副作用（如全局变量修改、DOM 操作等），那么即使它没有被显式使用，打包工具也不会删除它。

3. 静态分析的限制： Tree Shaking 仅能处理静态分析出的依赖，对于像 eval()、动态代码生成或依赖于外部条件的动态模块引用，Tree Shaking 就无能为力。

总结：

Tree Shaking 是通过静态分析 JavaScript 的模块化代码来去除未使用的部分，从而减小代码体积。它依赖于 ES6 模块化语法，使用合适的打包工具和配置，能够显著优化项目的性能，减少无用代码的冗余。要确保 Tree Shaking 的最大效果，代码应避免副作用并遵循 ES6 模块化规范。