什么是 Tree shaking

Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，它依赖于 ES Module 特性中的静态结构特性，例如 import 和 export。通过这个特性，Tree shaking 能够在编译时确定模块间的依赖关系，然后仅打包被引用的模块。

Tree shaking 的原理

Tree shaking 的原理是通过分析模块之间的依赖关系，然后删除未被引用的代码。具体实现方式是使用静态分析工具，例如 Rollup 和 Webpack，在编译时扫描代码，识别出未被引用的代码，并进行删除操作。

Tree shaking 的优势在于它可以减少打包体积，提高应用程序的性能。这是因为未被引用的代码在打包过程中会被自动删除，从而减少最终生成的文件大小。

sideEffects 是一个标记属性，用于指示哪些模块没有副作用，可以被安全地删除。通过设置 sideEffects 为 false，可以告诉 Webpack 所有模块都没有副作用，可以安全地删除未引用的模块。

通过 package.json 的 "sideEffects" 属性即可实现此目的。

shell

{
  "name": "your-project",
  "sideEffects": false
}

如果某些代码确实存在一些副作用，可以将 sideEffects 指定为一个数组：

shell

{
  "name": "your-project",
  "sideEffects": ["./src/some-side-effectful-file.js"]
}

usedExports 依赖于 terser 检测语句中的副作用。它是一个 JavaScript 任务而且不像 sideEffects 一样简单直接。并且由于规范认为副作用需要被评估，因此它不能跳过子树/依赖项。尽管导出函数能正常运行，但 React 的高阶组件在这种情况下会出问题。

使用 /*#__PURE__*/ 注释来帮助 terser。这个注释的作用是标记此语句没有副作用。这样一个简单的改变就能够 tree-shake 下面的代码了.

var Button$1 = /*#__PURE__*/ withAppProvider()(Button);

这将允许删除这段代码。但是除此之外，引入的内容可能仍然存在副作用的问题，因此需要对其进入评估。