React 项目打包优化

最新推荐文章于 2025-10-10 03:16:35 发布

原创

最新推荐文章于 2025-10-10 03:16:35 发布 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文详细介绍了React项目的打包优化技巧，包括打包体积分析、生产环境优化、路由懒加载以减少首屏加载时间，去除console.log提高性能，以及利用CDN加速第三方库的加载。通过对打包体积的分析，确定优化目标，结合配置调整，有效提升了应用的启动速度和用户体验。

一、打包体积分析

通过分析打包体积，才能知道项目中的哪部分内容体积过大，才能知道如何来优化

安装分析打包体积的包：npm i source-map-explorer
在 package.json 中的 scripts 标签中，添加分析打包体积的命令
```
"scripts": {
  "analyze": "source-map-explorer 'build/static/js/*.js'",
}
```
对项目打包：npm run build（如果已经打过包，可省略这一步）
运行分析命令：npm run analyze
通过浏览器打开的页面，分析图表中的包体积

二、生产环境优化

能够根据是否为生产环境对redux中间件进行优化

store/index.js 中：

let middlewares

if (process.env.NODE_ENV === 'production') {
  // 生产环境，只启用 thunk 中间件
  middlewares = applyMiddleware(thunk)
} else {
  middlewares = composeWithDevTools(applyMiddleware(thunk))
}