React应用JS加载量检测异常：每次刷新数值差异大求助

为什么之前的方法数值波动大？ #

• Network→JS标签波动：
  • 浏览器缓存：刷新时部分JS命中缓存，不重新加载，导致总量差异
  • 动态加载/代码分割：React应用如果用了code splitting，不同场景（比如首屏和带参数的路由）会加载不同的JS chunk，刷新时加载的chunk集合可能变化
  • 缓存策略：服务器或CDN的缓存机制可能导致每次加载的JS版本或大小有差异
• performance.memory数值波动：
  • 这个API获取的是浏览器运行时内存占用，包括组件实例、缓存数据、临时变量等，和JS编译包的静态大小完全无关，所以每次运行都会有波动，不能用来检测包大小变化

正确检测JS编译包变化的方法 #

1. 直接查看构建输出的静态文件大小（最准确） #

React应用构建后（执行npm run build），会在build/static/js目录下生成编译后的JS文件，直接对比优化前后这些文件的大小即可，比如main.[hash].js的大小。
如果需要更详细的分析，可使用webpack-bundle-analyzer插件：

• 安装插件：npm install --save-dev webpack-bundle-analyzer
• 修改构建脚本（以create-react-app为例）：在package.json的scripts里添加"analyze": "react-scripts build && npx webpack-bundle-analyzer build/static/js/*.chunk.js"
• 执行npm run analyze，会生成可视化的bundle分析报告，能清晰看到每个模块的大小，方便对比优化效果

2. 禁用缓存后查看Network标签 #

打开Chrome DevTools的Network标签，勾选Disable cache（需保持DevTools处于打开状态），然后刷新页面，确保每次都加载完整的JS资源。此时查看：

• Total列：JS文件的实际未压缩大小
• Transferred列：压缩后的传输大小（对应用户实际下载的流量）
  注意：要确保每次刷新的是同一个页面（比如固定首屏路由），避免动态加载不同chunk导致数值变化

3. 使用Lighthouse检测 #

打开Chrome DevTools的Lighthouse标签，选择"Performance"等相关选项，运行检测。Lighthouse会给出页面加载的JS总大小，以及性能评分，优化前后对比这些数值即可，同时还能获得其他优化建议

内容的提问来源于stack exchange，提问作者marcus-linmarkson