Webpack 如何实现 Tree Shaking 技术？-JavaScript中文网-JavaScript教程资源分享门户

什么是 Tree Shaking

Tree Shaking 是一种用于优化代码的技术，它可以剔除代码中没有使用的部分，减少代码体积，提高代码的加载速度和执行效率。Tree Shaking 技术通常用于处理 JavaScript 模块化代码，可以识别模块中未被使用的部分，并将其从最终的打包文件中移除。

Webpack 如何实现 Tree Shaking

Webpack 是一款现代化的前端打包工具，它可以通过一系列的插件和配置来实现 Tree Shaking 技术。

配置 mode

Webpack 4.x 版本及以上的版本，已经默认开启了 Tree Shaking 技术。只需要在 Webpack 配置文件中设置 mode 为 production，即可开启 Tree Shaking 技术。

// webpack.config.js

module.exports = {
  mode: 'production',
  // other config ...
}

使用 ES6 模块化

ES6 模块化语法可以让 Webpack 更准确地识别模块中未被使用的部分。在使用 ES6 模块化的情况下，Webpack 可以通过静态分析的方式，确定哪些代码被使用，哪些代码没有被使用。

// a.js
export const a = 1;
export const b = 2;

// b.js
import { a } from './a';

console.log(a); // 1

在上面的例子中，b.js 中只使用了 a.js 中导出的 a 变量，所以在打包的时候，Webpack 可以将 b.js 中未使用的 b 变量从最终的打包文件中移除。

配置 optimization.minimize

optimization.minimize 是 Webpack 中用于配置代码压缩的选项，它默认为 true，可以通过设置为 false 来关闭代码压缩，从而禁用 Tree Shaking 技术。

// webpack.config.js

module.exports = {
  optimization: {
    minimize: false,
  },
  // other config ...
}

配置 optimization.usedExports

optimization.usedExports 可以在 Tree Shaking 技术中进一步提高代码的剔除效率。它可以在代码打包过程中，通过标记哪些导出被使用来识别未使用的部分。

// webpack.config.js

module.exports = {
  optimization: {
    usedExports: true,
  },
  // other config ...
}

使用 @babel/preset-env

@babel/preset-env 是一个 Babel 插件，它可以将 ES6+ 的代码转换为 ES5 兼容的代码，并支持 Tree Shaking 技术。通过配置 @babel/preset-env 中的 modules 选项为 false，可以让 Babel 不将 ES6 模块化语法转换为 CommonJS 或者 AMD 规范，从而让 Webpack 可以更好地进行 Tree Shaking。

-- -------------------- ---- -------
-- --------

-
  ---------- -
    -
      --------------------
      -
        ---------- -----
      -
    -
  -
-展开代码

总结

通过上述配置，我们可以在 Webpack 中实现 Tree Shaking 技术，从而优化代码，提高代码的加载速度和执行效率。在实际的开发过程中，我们应该尽量遵循 ES6 模块化语法，使用 @babel/preset-env 等工具来优化代码，从而让 Tree Shaking 技术发挥更大的作用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65fbe1dbd10417a22276faf9

Webpack 如何实现 Tree Shaking 技术？

什么是 Tree Shaking