一：是什么

Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，

它会在运行过程中静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未曾其它模块使用，并将其删除，以此实现打包产物的优化。

二：实现原理

是先标记出模块导出值中哪些没有被用过，然后使用 Terser 删掉这些没被用到的导出语句,主要是利用AST抽象语法树做dead code(死码)分析

1：Make 阶段，收集模块导出变量并记录到模块依赖关系图 ModuleGraph 变量中

1：Seal 阶段，遍历 ModuleGraph 标记模块导出变量有没有被使用

3：生成产物时，若变量没有被其它模块使用则删除对应的导出语句

特征:

1：代码不会被执行，不可到达

2：代码执行的结果不会被用到

3：代码只会影响死变量（只写不读）

三：webpack中

先收集模块间的导入导出关系保存到 ModuleGraph 中，遍历 ModuleGraph 标记模块中哪些导出值没有被使用，打包前将没有使用的导出值的导出语句删除，从而减小打包体积

1：从ES6顶层模块开始分析，可以清除未使用的模块，

2：会对多层调用的模块进行重构，提取其中的代码，简化函数的调用结构

3：不会清除IIFE(立即调用函数表达式)

4：对于IIFE的返回函数，如果未使用会被清除

配置条件：

1：使用 ESM 规范编写模块代码

2：配置 optimization.usedExports 为 true，启动标记功能

3：启动代码优化功能

配置 mode = production
配置 optimization.minimize = true
提供 optimization.minimizer 数组

// webpack.config.js
module.exports = {
  entry: "./src/index",
  mode: "production",
  devtool: false,
  optimization: {
    usedExports: true,
  },
};