package.json 里面 sideEffects 属性的作用

一、sideEffects 的定义和目的

在 package.json 中的 sideEffects 属性用于告诉构建工具（如 Webpack 4+），在打包过程中哪些文件具有副作用（side effects），哪些文件没有副作用。副作用是指当导入一个模块时，除了导出模块外，该模块是否会对其他模块或全局环境产生额外的影响，例如修改全局变量、修改其他模块的状态、发起网络请求等。

二、设置 sideEffects 的作用

1. 优化 Tree Shaking 过程：

   • Tree Shaking 是一种优化技术，旨在消除未使用的代码，以减小打包文件的大小。
   • 当设置 sideEffects: false 时，构建工具会认为该包中的所有文件都没有副作用。这意味着，如果在代码中没有使用某个模块的导出，那么在打包时，该模块将被视为“死代码”，会被安全地从最终的构建产物中移除，从而优化代码体积。
   • 例如，如果一个包是一个纯函数库，所有函数都是纯函数，没有任何副作用，那么在 package.json 中设置 sideEffects: false 可以让构建工具放心地移除未使用的代码，提高打包性能和效率。

2. 精确标记有副作用的文件：

   • 当 sideEffects 是一个数组时，其中的元素是具有副作用的文件的相对路径。
   • 这允许你明确指定哪些文件在导入时会产生副作用，即使这些文件可能没有被代码直接使用，构建工具也不会将其移除。
   • 例如，假设你有一个 CSS 文件在导入时会对全局样式产生影响，即使你没有在代码中显式使用该文件中的导出，你可以将其添加到 sideEffects 数组中，确保在打包时不会因为 Tree Shaking 而丢失该文件。

三、使用示例

1. 设置为 false：

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

在这种情况下，该包内的所有文件都被认为是无副作用的。这通常适用于纯函数库或只导出纯函数的包。

2. 设置为数组：

{
  "name": "my-package",
  "sideEffects": [
    "./src/globalStyles.css",
    "./src/init.js"
  ]
}

这里，./src/globalStyles.css 可能是一个全局样式文件，导入时会修改全局样式，而 ./src/init.js 可能会在导入时执行一些初始化操作，如注册全局变量或监听全局事件，因此需要明确标记为有副作用的文件。

四、注意事项

1. 使用场景：

   • 对于 React 应用程序，使用 sideEffects: false 时要谨慎，因为 React 的一些模块可能会有副作用，例如 ReactDOM.render 会操作 DOM。通常，会将 React 库排除在外，例如：

   {
     "name": "my-react-app",
     "sideEffects": [
       "*.css",
       "*.scss",
       "*.sass",
       "*.less",
       "*.html",
       "*.ejs",
       "*.json",
       "*.png",
       "*.jpg",
       "*.jpeg",
       "*.gif",
       "*.svg",
       "*.webp",
       "*.ico",
       "*.woff",
       "*.woff2",
       "*.ttf",
       "*.eot",
       "*.otf",
       "*.jsx",
       "*.ts",
       "*.tsx",
       "*.js",
       "*.mjs",
       "react",
       "react-dom"
     ]
   }
   

   这个配置将常见的资源文件和 React 相关文件标记为有副作用，其他未使用的代码可以被 Tree Shaking 移除。

2. 对构建工具的影响：

   • 主要影响使用了 Tree Shaking 技术的构建工具，如 Webpack 4+。如果使用其他构建工具，可能不会有相应的效果或需要额外的配置。
   • 确保构建工具的版本支持 sideEffects 属性，因为旧版本的构建工具可能不支持该特性。

五、总结

sideEffects 属性在 package.json 中是一个非常有用的属性，它帮助开发人员和构建工具在打包过程中更好地优化代码，通过明确指出哪些文件有副作用，哪些文件可以被视为无副作用，实现更精确的 Tree Shaking，减少最终打包文件的大小，提高应用程序的性能和加载速度，同时确保必要的文件不会因为优化而被误删。但在使用时需要根据具体的项目和代码结构仔细考虑如何设置，避免出现意外的结果。 对于不同的项目类型和依赖包，可能需要不同的 sideEffects 配置，以达到最佳的打包优化效果。