为何tiny-invariant.js在React应用打包后占用774KB？

你遇到的tiny-invariant体积统计异常，不一定是source-map-explorer的bug，先排查以下几个常见原因：

可能的原因及解决步骤 #

• 依赖重复打包：项目依赖树中可能存在多个版本的tiny-invariant，或者某些第三方库将其内置打包，导致多次引入累加体积。

  • 执行命令npm ls tiny-invariant（或yarn list tiny-invariant）查看依赖版本树，确认是否有重复版本。
  • 如果存在多版本，可通过package.json中的overrides（npm）或resolutions（yarn）字段统一锁定tiny-invariant的版本。

• Source Map映射错误：构建过程中生成的source-map文件可能存在关联错误，导致其他代码的体积被错误统计到tiny-invariant名下。

  • 重新执行构建命令（如npm run build），确保source-map文件正确生成后，再重新运行source-map-explorer 'build/static/js/*.js'分析。

• Tree-shaking未生效：若项目未正确开启tree-shaking，可能会将tiny-invariant中未被使用的代码分支全部打包，但这个原因导致体积差距如此巨大的概率较低。

  • 确认项目构建模式为production（webpack在production模式下默认开启tree-shaking），同时检查babel配置中是否存在禁用tree-shaking的设置（如未设置modules: false）。

• 工具统计逻辑差异：source-map-explorer的体积统计可能包含了source-map关联的额外内容，可换用webpack-bundle-analyzer工具重新分析对比结果：

  • 安装工具：npm install --save-dev webpack-bundle-analyzer
  • 修改构建脚本，添加分析命令后重新构建查看结果。

如果换用其他工具后体积统计依然异常，再考虑source-map-explorer存在bug的可能，可尝试升级工具版本或提交issue反馈。

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