package.json 里面 sideEffects 属性的作用

合集 - 前端小知识点(36)

1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用01-01 2.如何保证用户的使用体验01-01 3.如何解决页面请求接口大规模并发问题01-01 4.设计一套全站请求耗时统计工具01-01 5.大文件上传01-01 6.h5如何解决移动端适配问题01-01 7.实现站点一键换肤功能实现方式有哪些01-01 8.如何实现网页加载进度条01-01 9.常见图片懒加载方式有哪些01-01 10.cookie构成部分有哪些01-01 11.DNS协议了解多少01-01 12.函数式编程了解多少01-01 13.一直在window上面挂东西是否有什么风险01-01 14.小程序为什么会有两个线程01-01 15.如何通过设置失效时间清除本地存储的数据?01-01 16.如果不使用脚手架，如果用webpack构建一个自己的react应用01-01 17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数01-01

18.package.json 里面 sideEffects 属性的作用01-01

19.script 标签上有那些属性01-01 20.SPA 中使用 hash 路由时作用和意义01-01 21.用户访问页面白屏了，原因是啥如何排查?01-01 22.[代码实现]S 中如何实现大对象深度对比01-01 23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法01-01 24.<script> 标签放在 HTML 文档的 <body> 内底部01-01 25.虚拟滚动加加载的原理和实现思路01-01 26.ts二刷01-11 27.promise面试题01-11 28.命令行创建 uni-app 项目01-12 29.uniapp+v3的小知识点01-26 30.ts文件忽略校验01-27 31.['',''].join(" ").trim()01-28 32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)01-28 33.可视化点击x轴标签实现标签文字切换02-09 34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本02-12 35.uniapp+vue2实现下载相关02-26 36.深度响应式劫持vue303-07

一、sideEffects 的定义和目的

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

二、设置 sideEffects 的作用

优化 Tree Shaking 过程：
- Tree Shaking 是一种优化技术，旨在消除未使用的代码，以减小打包文件的大小。
- 当设置 sideEffects: false 时，构建工具会认为该包中的所有文件都没有副作用。这意味着，如果在代码中没有使用某个模块的导出，那么在打包时，该模块将被视为“死代码”，会被安全地从最终的构建产物中移除，从而优化代码体积。
- 例如，如果一个包是一个纯函数库，所有函数都是纯函数，没有任何副作用，那么在 package.json 中设置 sideEffects: false 可以让构建工具放心地移除未使用的代码，提高打包性能和效率。
精确标记有副作用的文件：
- 当 sideEffects 是一个数组时，其中的元素是具有副作用的文件的相对路径。
- 这允许你明确指定哪些文件在导入时会产生副作用，即使这些文件可能没有被代码直接使用，构建工具也不会将其移除。
- 例如，假设你有一个 CSS 文件在导入时会对全局样式产生影响，即使你没有在代码中显式使用该文件中的导出，你可以将其添加到 sideEffects 数组中，确保在打包时不会因为 Tree Shaking 而丢失该文件。

三、使用示例

设置为 false：

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

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

设置为数组：

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

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

四、注意事项

使用场景：

对于 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 移除。

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

五、总结

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

posted @ 2025-01-01 18:41 jialiangzai 阅读(140) 评论(0) 编辑收藏举报

JIA

光明神已陨落，现在由光明引领我

package.json 里面 sideEffects 属性的作用

公告

最新随笔

我的标签

合集

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

喜欢请打赏