你以为的 tree shaking，其实根本没生效,tree shrew
本文指出，许多人误以为的“tree shaking”技术（即摇树优化）在JavaScript项目中已经生效，但实际上可能并未达到预期效果，作者通过具体案例说明，如果项目中存在未使用或未正确配置的模块，tree shaking将无法有效移除这些无用代码，开发者需要确保项目配置正确，并遵循最佳实践，如使用ES6模块语法、避免全局变量等，以确保tree shaking能够真正生效，提高项目性能。
你以为的 Tree Shaking，其实根本没生效
在现代前端开发中，Tree Shaking 是一种非常流行的优化技术，旨在通过移除 JavaScript 代码中未使用的代码（死代码）来减少最终打包文件的大小，这一技术主要依赖于 ES6 模块（即 import/export 语法）的静态结构，使得工具能够分析出哪些代码是多余的，并在打包过程中将其剔除，尽管 Tree Shaking 听起来简单且有效，但在实际项目中，许多开发者发现它并没有如预期那样工作，本文将深入探讨 Tree Shaking 的工作原理、常见误区以及确保它生效的关键步骤。
Tree Shaking 是什么？
Tree Shaking 是一种通过静态分析来移除未使用代码的技术，它依赖于 ES6 模块系统，因为 import/export 语法允许工具在编译时分析模块依赖关系，当使用 Webpack、Rollup 或其他构建工具时，这些工具可以识别出哪些代码没有被使用,并在打包过程中将其删除。
Tree Shaking 的工作原理
Tree Shaking 的核心思想是通过静态分析找到并移除未使用的代码,以下是其大致的工作流程：
- 静态分析：构建工具（如 Webpack）会分析源代码中的 import/export 语句,确定哪些模块和导出被使用。
- 标记未使用代码：根据分析结果,工具会标记出未使用的代码。
- 摇树：在打包过程中，工具会“摇”这棵由代码组成的树,移除未使用的部分。
- 生成优化后的包：最终生成一个只包含必要代码的优化后的包。
为什么 Tree Shaking 可能没生效？
尽管 Tree Shaking 听起来很完美，但在实际项目中，你可能会发现它并没有如预期那样工作,以下是一些常见原因：
使用 CommonJS 模块
Tree Shaking 主要依赖于 ES6 模块系统，如果你的项目中使用的是 CommonJS 模块（即 require/module.exports），那么构建工具将无法进行静态分析，因为 require 是运行时调用的，这意味着即使某些代码没有被使用,它们也不会被移除。
错误的构建配置
构建工具的配置错误也可能导致 Tree Shaking 失效，在 Webpack 中，你需要确保启用了 optimization.usedExports 选项（在 Webpack 5 中默认启用），还需要确保你的项目使用了支持 Tree Shaking 的插件和加载器。
第三方库不支持 Tree Shaking
并非所有第三方库都支持 Tree Shaking，一些库可能使用 CommonJS 模块或封装了他们的导出，使得构建工具无法正确识别哪些部分是未使用的，一些库可能根本没有提供 ES6 模块版本。
错误的导入方式
即使你使用了 ES6 模块，错误的导入方式也可能导致 Tree Shaking 失效，使用默认导入（import something from 'module'）而不是命名导入（import { something } from 'module'）时,构建工具可能无法正确识别哪些部分被使用。
运行时决定的依赖
如果代码的依赖关系是在运行时决定的（通过 eval、new Function 或反射 API），那么构建工具无法在静态分析中识别这些依赖，从而导致 Tree Shaking 失效。
确保 Tree Shaking 生效的关键步骤
为了确保 Tree Shaking 在你的项目中生效,你可以按照以下步骤进行配置和优化：
- 使用 ES6 模块：确保你的项目主要使用 ES6 模块系统（即 import/export），避免使用 CommonJS 模块（即 require/module.exports）,除非绝对必要。
- 正确配置构建工具：根据你的构建工具（如 Webpack、Rollup），确保启用了 Tree Shaking 相关的配置选项，在 Webpack 中，你可以设置
optimization.usedExports为true（在 Webpack 5 中默认启用），确保你的插件和加载器支持 Tree Shaking。 - 检查第三方库：确保你使用的第三方库支持 ES6 模块和 Tree Shaking，你可以查看库的文档或源代码来确定这一点，如果库不支持 ES6 模块,考虑寻找替代库或自己实现所需功能。
- 使用命名导入：尽量使用命名导入而不是默认导入，命名导入使构建工具能够更准确地识别哪些部分被使用，使用
import { something } from 'module'而不是import something from 'module'。 - 避免运行时决定的依赖：尽可能避免在代码中引入运行时决定的依赖，如果必须使用这些特性,请确保它们不会引入大量未使用的代码。
- 测试和优化：在开发过程中不断测试和优化你的代码和构建配置，使用工具（如 SourceMapExplorer）来检查打包文件的大小和组成，确保 Tree Shaking 已正确移除未使用的代码。
Tree Shaking 是一种强大的优化技术，可以显著减少最终打包文件的大小，在实际项目中，由于各种原因（如使用 CommonJS 模块、错误的构建配置、第三方库不支持等），它可能并未如预期那样工作，为了确保 Tree Shaking 生效，你需要遵循上述关键步骤并不断优化你的代码和构建配置，通过这样做，你将能够充分利用 Tree Shaking 的优势,提高你的应用程序的性能和可维护性。