什么是 Tree Shaking？

工作原理

Tree Shaking 的核心是基于 ES Module (ESM) 的静态特性：

1. 静态结构：ESM 是静态导入导出，可以在编译时确定哪些模块被使用。
2. 导入导出标记：export 和 import 声明使打包工具能够精确识别依赖关系。

   // utils.js
   export function usedFunction() {
     console.log("I am used!");
   }
   
   export function unusedFunction() {
     console.log("I am unused!");
   }
   
   // main.js
   import { usedFunction } from './utils.js';
   
   usedFunction();
   

---

Tree Shaking 的实现工具

1. Webpack
   Webpack 在生产模式下会启用 Tree Shaking，通过 optimization.usedExports 和 optimization.minimize 完成未使用代码的移除。

2. Rollup
   Rollup 是一个以 Tree Shaking 为核心设计的打包工具，天然支持移除未使用的代码。

3. Vite
   Vite 使用 Rollup 作为构建工具&#