简介
Webpack 是前端工程化中最常用的打包工具之一，它可以将多个 JavaScript 模块打包成一个文件，这能够提高页面响应速度，减少了HTTP请求的响应时间。然而，当包含不必要的模块或代码时，打包体积就会变大，这对于网站或应用的性能是有害的。因此，为了优化打包后的文件大小，可以使用 Tree Shaking 技术。
Tree Shaking 又称为 Dead Code Elimination，即死代码消除。该技术会在打包时分析代码，识别和删除没有被使用的代码，从而减少打包体积。
如何使用 Tree Shaking
配置 Webpack
在 webpack.config.js 配置文件中，需要启用 UglifyJSPlugin 插件，该插件可以压缩代码并删除无用代码。然后，添加 mode 属性为 production，该属性指定打包环境为生产环境。最后，设置 optimization.minimize 为 true，该选项会把未使用的代码从打包文件中删除。
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -------------- - ----------------------------------- -------------- - - ------ --------------- ------- - --------- ------------ ----- ----------------------- ------- -- ----- ------------- ------------- - --------- ---- -- -------- - --- ---------------- - --展开代码
ES6 模块
在 ES6 中，可以使用 import 和 export 语句进行模块化。Tree Shaking 技术可以很好地与 ES6 模块一起使用，因为在 ES6 的模块引用方式中，Webpack 可以很容易地识别不需要的模块并将其从打包文件中删除。
-- -------------------- ---- ------- -- ------ ------ -------- ----- - ----------------- -- --- ----------- - -- ------ ------ - --- - ---- -------- ------ -------- ----- - ----------------- -- --- ----------- ------ -展开代码
如果只使用了 foo 函数，Webpack 会将 bar 函数删除，最终打包生成的代码只包含 foo 函数。
CommonJS 模块
在 CommonJS 模块引用中，可以使用 require 和 module.exports 语句。然而，CommonJS 模块却不支持静态引用，这意味着无法确定哪些模块是使用的并可以将其删除。
例如，以下代码中的条件语句会使得 Tree Shaking 失效。
if (process.env.NODE_ENV === 'development') { require('./logger'); } const sum = (a, b) => a + b; module.exports = { sum };
在这个例子中，logger 模块只在开发环境下被引用，但是无法在编译期间确定具体的环境变量。因此，Webpack 无法删除需要在开发环境引用的 logger 模块。
总结
使用 Tree Shaking 技术可以帮助我们优化打包体积，但是它只能识别和删除未使用的 ES6 模块。注意在使用 CommonJS 模块时，需注意避免使用动态导入的方式，不然 Tree Shaking 的效果不理想。建议在开发期间启用 sourcemap 来排查问题。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6460953e968c7c53b023fd98
