Webpack tree shaking

Question

移除 JavaScript 上下文中的未引用代码（dead-code）。

# webpack.config.js
module.exports = {
     mode: 'development', // 要删除无用的代码需要设置为"production"，并删除 optimization 属性
    optimization: { // 找出需要删除的“未引用代码(dead code)”
        usedExports: true
    }
}

将文件标记为 side-effect-free 无副作用

可以在 module.rules 配置选项 中设置 sideEffects 。

也可通过 package.json 的 sideEffects 属性，来实现这种方式。

如果所有代码都不包含 side effect，就可以简单地将该属性标记为 false ，来告知 webpack，它可以安全地删除未用到的 export。

{
  "name": "your-project",
  "sideEffects": false
}

如果代码确实有一些副作用，可以改为提供一个数组，数组方式支持相对路径、绝对路径和 glob 模式匹配相关文件。这些文件将不会进行 tree shaking。

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js"
  ]
}

所有导入文件都会受到 tree shaking 的影响。这意味着，如果在项目中使用类似 css-loader 并 import 一个 CSS 文件，则需要将其添加到 side effect 列表中，以免在生产模式中无意中将它删除：

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js",
    "*.css"
  ]
}

通过 import 和 export 语法，上面的操作已经找出需要删除的 未引用代码（dead code），然而，不仅仅是要找出，还要在 bundle 中删除它们。为此，我们需要将 mode 配置选项设置为 production 。运行 tree shaking 需要 ModuleConcatenationPlugin 。通过 mode: "production" 可以添加此插件。如果没有使用 mode 设置，记得手动添加 ModuleConcatenationPlugin 。

结论

使用 tree shaking 必须注意以下：

• 使用 ES2015 模块语法（即 import 和 export ）
• 确保没有 compiler 将 ES2015 模块语法转换为 CommonJS 模块（这也是流行的 Babel preset 中 @babel/preset-env ​ 的默认行为 - 更多详细信息请查看 文档 ）。
• 在项目 package.json 文件中，添加一个 sideEffects 属性。
• 通过将 mode 选项设置为 production ，启用 minification（代码压缩）和 tree shaking。