Webpack 中利用 Tree Shaking 移除无用代码的完整配置指南

正文

Tree Shaking 技术基于 ES Module 的静态语法分析，旨在项目编译阶段自动剔除未被引用的代码，从而有效减小最终打包文件的体积。

usedExports

在实际开发中，我们常会定义一些变量但暂时未使用，这会导致存储空间浪费。当 mode 设置为 production 时，Webpack 默认会启用相关配置以删除无用代码。为了直观对比处理前后的编译效果，我们需要在 Webpack 中进行如下基础配置。

module.exports = {
  // 其他配置省略
  mode: 'development',
  optimization: {
    minimize: false,
    usedExports: false,
  },
};

在上述配置下，即使存在未使用的变量，它们仍会被原样编译进最终的 JS 文件中，导致代码冗余。

useExports为false

若要移除 JS 文件中的无用代码，需开启 minimize 并通过 usedExports 进行具体配置。

module.exports = {
  // 其他配置省略
  mode: 'development',
  optimization: {
    minimize: true,
    usedExports: true,
  },
};

完成该配置后，编译结果中未使用的变量 username 和 foo 函数均会被成功移除。

useExports为true

sideEffects

此时仍面临一个问题：如果通过模块化方式引入其他 JS 文件，即使这些文件中的代码未被使用，useExports 机制也不会执行 tree shaking 操作。

// index.js
import './format.js';
// format.js
export function timeFormat() {
  return '2022-01-01';
}

例如上述代码中，通过 import 语句引入了 format.js，但 format.js 中导出的函数并未被实际调用。

import导入文件没有treeShaking

此时，import 语句对应的代码仍会被编译。为了在引入的文件中也执行 tree shaking 并删除无用代码，需要在 package.json 中配置 sideEffects 属性来解决。

// package.json 其他配置省略
{
    "sideEffects": false
}

sideEffects 用于告知 Webpack 编译器哪些模块包含副作用。

• 将其定义为 false，表示所有模块均无副作用，未被引用的模块可直接删除。
• 将其定义为数组，则明确指定包含副作用的模块。这些模块中的副作用代码会被保留，而无副作用且未使用的代码仍会被删除。

sideEffect为false

在此配置下，虽然未使用的 JS 文件进行了 tree shaking，但通过 import 引入的 CSS 资源也被一并删除，导致对应的 CSS 文件未生成。解决方法是在 sideEffects 属性中定义数组，或在处理 CSS 文件的 loader 中进行配置（推荐后者）。

// package.json
{
    "sideEffects": [
        "**.css"
    ],
}
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        // 其它配置省略
        sideEffects: true,
      },
    ],
  },
};

经过上述调整，JS 文件中引入的 CSS 文件将不再被直接移除。

sideEffect保留css

PurgeCss

然而，sideEffects 属性无法帮助 CSS 文件内部执行 tree shaking 操作。例如，若代码中未创建 div 和 h1 标签，相关的 CSS 规则也不会被移除。

若要在 CSS 代码中实现 tree shaking，可借助 purgecss-webpack-plugin。通过 npm install purgecss-webpack-plugin -D 安装后，在 package.json 中进行相应配置。

• paths：指定需要分析内容的目录。
• glob：通过正则表达式匹配特定文件或文件夹，需确保 Webpack 或其他插件已安装。
• noddir：表示仅匹配文件，不匹配文件夹。
• safelist：默认情况下，PurgeCss 会移除 html 和 body 标签的样式。若需保留，需在 safelist 中添加相应规则。

配置完成后，CSS 文件内部的无用代码也将被移除。

PurgeCss

总结

在项目性能优化中，可通过 Tree Shaking 执行以下操作：

• 在 optimization 中将 usedExports 设置为 true，以移除 JS 中的无用代码。
• ( 这也是 mode 为 production 时的默认配置 )
• 在 package.json 中将 sideEffects 设置为 false，并在 CSS 的 loader 中设置 sideEffects 为 true，从而对模块进行优化。
• 使用 PurgeCss 对 CSS 文件内部的代码执行 Tree Shaking。

以上就是使用 Tree Shaking 移除无用代码的详细内容，更多关于 Tree Shaking 移除无用代码的资料请关注本站其它相关文章！