React项目如何通过webpack拆分资源为小块优化页面加载速度

现有配置的问题及优化方案 #

一、当前webpack配置存在的影响Page Insight指标的问题

• 代码分割策略过度细碎：你当前配置了每个node_modules下的包单独拆分为一个chunk，会导致首屏需要发起数十个JS资源请求，在HTTP1.1环境下请求队头阻塞会大幅拉长资源加载耗时，直接拉低速度指数、LCP等核心指标。
• 压缩工具效率偏低：你使用的UglifyJsPlugin仅支持ES5语法压缩，对ES6+代码的压缩率远低于terser-webpack-plugin，同等代码下打包体积更大。
• 缺失图片优化流程：仅用file-loader处理图片，没有做压缩、下一代图片格式转换，未优化的图片往往是Page Insight中「高效编码图像」「适当尺寸图像」告警的来源，对速度指数影响极大。
• 未区分首屏/非首屏依赖：当前分割策略会把所有用到的依赖都打到首屏加载的包中，非首屏路由的依赖也会占用首屏加载资源。

二、首屏第三方库对速度的影响

会直接影响所有核心性能指标：首屏引入的第三方库越多，需要下载的JS体积越大，同时浏览器解析、执行JS的耗时也会同步升高，会直接导致速度指数、LCP、TBT、FID等指标变差，是Page Insight扣分的重灾区。

三、具体优化调整建议

1. 调整代码分割策略：取消按单个npm包拆包的逻辑，设置minSize: 20000（20KB），体积小于20KB的chunk自动合并，控制首屏JS请求数在10个以内；也可以手动把体积较大且首屏必须的依赖（比如react、react-dom）单独拆包，利用浏览器缓存提升二次加载速度。
2. 替换压缩工具：把UglifyJsPlugin替换为terser-webpack-plugin，开启无用代码剔除、dead_code删除能力，生产环境下关闭sourcemap减少包体积。
3. 新增图片优化配置：在file-loader前新增image-webpack-loader做图片无损压缩，同时配置工具输出webp/avif格式的图片，前端代码优先加载下一代格式图片，可减少40%左右的图片体积。
4. 开启路由懒加载：配合React的React.lazy + Suspense实现路由级代码分割，非首屏路由的组件和对应依赖不会在首屏加载，可大幅降低首屏JS体积。
5. 精简首屏依赖：通过打包分析截图排查首屏加载的第三方依赖，替换重型库为轻量替代品（比如moment替换为dayjs，完整lodash替换为按需引入的功能模块），删除首屏未使用的依赖。

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