Webpack 中的 sideEffects 用法解析

Webpack 中的 sideEffects 是一个特性，可以帮助您优化构建包的大小。通过给 package.json 加入 sideEffects: false 声明该包模块是否包含 sideEffects（副作用），从而可以为 tree-shaking 提供更大的优化空间。

在了解 sideEffects 之前，我们先来了解一下 tree-shaking。tree-shaking 是一种代码优化技术，它可以移除未被使用的代码。Webpack 使用 tree-shaking 来优化构建包的大小。sideEffects 可以帮助 tree-shaking 更有效地工作。

如果一个模块包含 sideEffects，则该模块及其依赖项都将被包括在构建包中，即使这些依赖项从未被使用。这会导致构建包的大小变大。如果一个模块不包含 sideEffects，则该模块的依赖项只有在被使用时才会被包括在构建包中。这可以帮助减小构建包的大小。

要使用 sideEffects，您需要在 package.json 中添加一个 sideEffects 字段。sideEffects 字段可以是一个布尔值或一个对象。如果 sideEffects 字段是一个布尔值，则它表示该包模块是否包含 sideEffects。如果 sideEffects 字段是一个对象，则它可以指定哪些文件包含 sideEffects。

例如，以下 package.json 声明了一个名为 "my-package" 的包，该包不包含 sideEffects：

{
  "name": "my-package",
  "version": "1.0.0",
  "sideEffects": false
}

以下 package.json 声明了一个名为 "my-package" 的包，该包包含 sideEffects：

{
  "name": "my-package",
  "version": "1.0.0",
  "sideEffects": [
    "*.css",
    "*.less"
  ]
}

在上面的示例中，只有 CSS 和 LESS 文件被声明为包含 sideEffects。这意味着这些文件及其依赖项将始终被包括在构建包中，即使它们从未被使用。

您还可以使用 sideEffects 来指定哪些文件不包含 sideEffects。例如，以下 package.json 声明了一个名为 "my-package" 的包，该包包含 sideEffects，但 main.js 文件不包含 sideEffects：

{
  "name": "my-package",
  "version": "1.0.0",
  "sideEffects": [
    "*.css",
    "*.less",
    "!main.js"
  ]
}

如果您不确定某个模块是否包含 sideEffects，您可以查看该模块的源代码。如果该模块包含任何可以修改全局状态的代码，则该模块很可能包含 sideEffects。

sideEffects 是一个非常有用的特性，可以帮助您优化构建包的大小。如果您正在使用 Webpack，则强烈建议您使用 sideEffects。