Tree Shaking 是一种通过去除未使用的代码来优化项目打包体积的技术，在现代前端开发中被广泛应用
1. 确保项目支持 ES6 模块语法
- Tree Shaking 依赖于 ES6 模块的静态结构分析，因此项目中的代码需要使用 ES6 模块语法来导入和导出模块。如果项目中还存在 CommonJS 等其他模块系统的语法，需要先将其转换为 ES6 模块语法。
- 例如，将
const moduleA = require('./moduleA');转换为import moduleA from './moduleA';
2. 配置构建工具
不同的构建工具对 Tree Shaking 的支持和配置方式略有不同：
Webpack
- 在 Webpack 4 及以上版本中，Tree Shaking 是默认开启的，但需要确保
mode设置为production。 - 同时，需要注意对一些特殊情况的处理，如对于一些副作用（Side Effects）的模块，可能需要在
package.json中设置sideEffects属性来告知 Webpack 哪些文件有副作用，避免被错误地删除。 - 例如，如果项目中使用了一些 CSS 文件或其他具有副作用的文件，可以在
package.json中设置"sideEffects": ["*.css"]，表示所有的 CSS 文件都有副作用，不应被 Tree Shaking 移除。
Rollup
- Rollup 本身对 Tree Shaking 的支持非常好，在配置文件中，只需确保没有禁用相关的优化选项即可。
- 通常情况下，使用默认配置就能很好地进行 Tree Shaking。但如果项目中有一些特殊的模块需要处理，可以通过
external选项来排除一些不需要被打包进最终文件的模块，或者通过plugins来添加一些自定义的处理逻辑。
3. 标记纯函数和无副作用的模块
为了让 Tree Shaking 更有效地工作，需要正确标记纯函数和无副作用的模块。
- 纯函数是指对于相同的输入，总是返回相同的输出，并且没有任何可观察的副作用，如修改全局变量、发起网络请求等。
- 在编写代码时，可以通过一些方式来表明函数是纯函数，例如使用函数式编程的风格，避免在函数内部修改外部状态。
- 对于无副作用的模块，即模块内部的代码执行不会对外部环境产生任何影响，除了返回值之外没有其他任何操作。这样的模块可以被 Tree Shaking 安全地移除，如果不使用的话。
4. 检查和验证 Tree Shaking 效果
在完成配置和代码调整后，可以通过以下方式来检查 Tree Shaking 的效果：
- 查看打包后的文件大小和内容，对比优化前后的差异。可以使用一些工具来分析打包后的代码，如
source-map-explorer，它可以帮助直观地查看每个模块在最终打包文件中的占比，以及是否有未使用的代码被正确移除。 - 进行单元测试和功能测试，确保在去除未使用代码后，项目的功能仍然正常。因为有时候 Tree Shaking 可能会误删一些看似未使用但实际上在某些特定场景下会被调用的代码，通过测试可以及时发现并修复这些问题。
5. 持续优化和监控
Tree Shaking 并不是一次性的工作，随着项目的不断发展和代码的更新，需要持续关注和优化。
- 定期检查项目中是否有新引入的模块或代码可以进行 Tree Shaking 优化。
- 关注构建工具和相关库的更新，它们可能会提供更好的 Tree Shaking 支持或优化策略，及时更新以获得更好的优化效果。
通过以上步骤，可以有效地使用 Tree Shaking 技术对项目进行代码优化，减少打包体积，提高项目的性能和加载速度。在实际应用中，需要根据项目的具体情况和构建工具的特点，灵活调整和配置，以达到最佳的优化效果。
