React项目优化打包体积

项目初始体积

首先要优化打包体积,必须先分析初始项目的体积大小,这里项目使用create-react-app创建的,可以去官网找到source-map-explorer包进行分析,如图

使用npm run build进行打包,可以看到以下3个包,都是经过gzip压缩后的结果,大概压缩成原来的1/3

使用npm run analyze,看到各个模块的原始大小

可以看到大部分内容都打包进main.js文件中了。

打包体积优化

路由懒加载

路由懒加载主要是将暂时未用到的组件分包出去,等到需要用的时候在进行加载,减少了一开始加载的体积大小,路由懒加载可以根据自己的项目需求,我这里主要懒加载两个组件,因为这两个组件在一开始加载都并没有用到,将它们都抽离出去。

js 复制代码
const Edit = lazy(() => import(/* webpackChunkName: "editPage" */ '../pages/question/Edit'))
const Stat = lazy(() => import(/* webpackChunkName: "statPage" */ '../pages/question/Stat'))

webpackChunkName是给抽离后的文件命名,再次运行npm run build

可以看到main.js体积变小,而且也抽离出statPage,editPage这两个文件了,而且也可以看到css文件也抽离出去了

执行npm run analyze,可以看到main体积变成了70%

抽离第三方库

从上面中还可以看到antd和react-dom占绝大部分,而且变动也比较小,所以可以考虑将它们这些都抽离成一个个文件,然后利用缓存,从而提高加载速度。

抽离文件可以用webpack的splitChunks分包处理,react项目中要配置webpack,可以使用craco扩展

js 复制代码
module.exports = {
  webpack: {
    configure(webpackConfig) {
      if (webpackConfig.mode === 'production') {
        if (webpackConfig.optimization == null) {
          webpackConfig.optimization = {}
        }
        webpackConfig.optimization.splitChunks = {
          chunks: 'all',//同步或异步的模块都进行分包处理
          
          cacheGroups: {
            antd: {
              name: 'antd-chunk',
              test: /antd/,//匹配到antd的都抽离到一个单独的文件中,下面类似
              priority: 100,//优先级越高,较先匹配
            },
            reactDom: {
              name: 'reactDom-chunk',
              test: /react-dom/,
              priority: 99,
            },
            vendors: {
              name: 'vendors-chunk',
              test: /node_modules/,
              priority: 98,
            },
          },
        }
      }
      return webpackConfig
    },
  },
}

上面中antd和react-dom都是属于node_modules下面的第三方包,但给它们配置priority优先级,可以先让它们抽离到单独文件中,而其他node_modules下面的包抽离成vendors这个文件。

执行npm run build,再次查看打包情况

可以看到main.js体积已经减少了361.71kB,antd和react-dom,node_modules都抽离成单独的文件。

相关推荐
就是我1 小时前
React 应用性能优化实战
前端·react.js·性能优化
前端付豪1 小时前
🚀 React 应用国际化实战:深入掌握 react-i18next 的高级用法
前端·react.js·架构
Moment2 小时前
在 React 里面实现国际化实现是太简单了 🙂‍↔️🙂‍↔️🙂‍↔️
前端·javascript·react.js
晚风予星2 小时前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js
张开心_kx6 小时前
面试官又问我受控组件和非受控组件?
前端·javascript·react.js
秋天的一阵风6 小时前
Webpack 插件开发:为 Vue.js 应用实现图片预加载
前端·vue.js·webpack
火星思想6 小时前
Webpack热更新后模块生效的完整过程
前端·webpack·架构
cauyyl7 小时前
react nativeWebView跨页面通信
javascript·react native·react.js
APItesterCris7 小时前
跨平台数据采集方案:淘宝 API 对接 React Native 实现移动端实时监控
javascript·react native·react.js
YH丶浩7 小时前
React 实现爱心花园动画
前端·react.js·前端框架