React项目source-map-explorer分析构建包体积结果异常咨询

这个统计结果不是工具出错，是**objectWithoutPropertiesLoose这个Babel辅助函数被重复内联到了上千个模块中**。
这个函数本身确实只有1KB，是Babel转译对象解构、对象剩余属性语法时生成的工具函数。正常构建流程会把这类通用辅助函数抽成公共依赖，全bundle只存一份。但当构建配置有问题时，Babel会在每个用到这个函数的文件顶部直接注入一份完整的函数代码，依赖越多、用到对应语法的文件越多，重复的代码量就越大。
source-map-explorer的统计逻辑是按照source map的映射关系，把所有来自同一个源文件的代码段体积累加，所以当这个1KB的函数被复制了上千次散落在bundle各个位置时，统计结果就会显示它占了总产物体积的86%。

结合你的package.json配置，问题基本来自下面几个点：

• 你额外安装了source-map-loader且没有配置排除规则。react-scripts 5.x已经内置了完整的source map处理逻辑，额外加的全量source-map-loader会处理node_modules下所有包的source map，干扰webpack和Babel的辅助函数去重逻辑，把本来已经被抽离的公共代码重新拆回各个模块
• 没有配置@babel/plugin-transform-runtime。Babel默认的辅助函数注入逻辑就是文件级内联，不会跨文件抽离，项目依赖多了之后重复的辅助函数总大小很容易达到几M甚至十几M
• 测试依赖被错误打包进生产环境。你把@testing-library/jest-dom、@testing-library/react、@testing-library/react-hooks、@testing-library/user-event、jest-each这类仅测试环境用的包全部放在了dependencies下，这些包本身会引入大量Babel转译代码，进一步放大辅助函数重复的问题
• 存在多版本重复依赖。如果node_modules里存在多份不同版本的Babel转译产物，webpack无法做去重，会把不同版本里的同一份辅助函数全部打包进去

按优先级操作即可：

1. 移除多余的source-map-loader
   直接执行命令卸载：

   npm uninstall source-map-loader
   

   如果后续确实需要用这个loader处理特定第三方依赖的source map，必须配置exclude: /node_modules/规则，不要全量处理所有依赖的source map。
2. 把测试依赖移到devDependencies
   把所有@testing-library/*开头的包、jest-each从dependencies节点移到devDependencies节点，这些包永远不应该出现在生产构建产物里，这一步通常就能直接砍掉3-5M的产物体积。
3. 开启Babel辅助函数抽离
   安装Babel运行时插件，把所有辅助函数抽成公共依赖：

   npm install -D @babel/plugin-transform-runtime @babel/runtime
   

   因为你用的是未eject的react-scripts，可以通过craco或者react-app-rewired修改Babel配置，在插件列表里加入@babel/plugin-transform-runtime即可。配置完成后所有Babel辅助函数只会在bundle里存在一份。
4. 依赖去重
   执行下面的命令合并node_modules里的重复依赖：

   npm dedupe
   

   执行完可以跑npm ls @babel/runtime检查，确保整个依赖树里只存在一个版本的@babel/runtime。
5. 清缓存重新构建
   删掉项目下的build文件夹和node_modules/.cache缓存文件夹，重新执行生产构建，再跑source-map-explorer分析，就不会再出现单文件占80%以上体积的异常结果了，这时候的体积统计才是真实的模块占比。

• 大依赖做路由懒加载：你依赖里的react-pdf、video.js、country-state-city单包体积都超过1M，不要直接在首屏引入，用React.lazy+Suspense做按需加载，拆到非首屏的chunk里
• 精简PWA依赖：你安装了全套12个workbox插件，如果没有做复杂的离线缓存逻辑，只保留你实际用到的2-3个即可，能省掉1M左右的体积
• 替换重型依赖：如果用到日期处理，不要用moment，换成体积只有2KB的dayjs即可

内容的提问来源于stack exchange，提问作者YoungDON