vue项目首次加载缓慢，利用splitChunks分包打包导致上线chunk-XX.js文件过多页面加载缓慢资源请求阻塞问题解决方案

前言

由于后台管理项目一直在迭代开发，不知不觉项目包过大（30MB左右），每次项目上线后加载最新资源文件（chunk-vendors）用时过久。白屏时间比较长用户体验感特别差。

利用splitChunks 进行分包打包

利用splitChunks 分包将chunk-vendors 包拆分成多个chunk-xxxx.js文件。拆分后过多chunk-xxxx.js文件也会有问题，下文有详细说明和解决方案。

下面进行splitChunks 分包配置

vue.config.js文件

module.exports = {
    optimization: {
            runtimeChunk: 'single',
            splitChunks: {
                chunks: 'all',
                minSize: 60000,//生成 chunk 的最小体积（以 bytes 为单位）
                maxAsyncRequests: 30,//按需加载时的最大并行请求数
                maxInitialRequests: 30,//入口点的最大并行请求数
                name:true,//是否使用自定义命名
                cacheGroups: {
                    vendor: {
                      test: /[\\/]node_modules[\\/]/,
                      reuseExistingChunk:true,
                      name(module) {
                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                        return `npm.${packageName.replace('@', '')}`;
                      }
                    },
                    ui: {
                        name: 'npm.ui',
                        test: /[\\/]node_modules[\\/]element-ui[\\/]/,
                        chunks: 'initial',
                        priority: 3,//缓存组优先级
                        maxSize: 600000,
                        reuseExistingChunk: true,//是否缓存
                        enforce: true
                      },
                      echarts: {
                        name: 'npm.echarts',
                        test: /[\\/]node_modules[\\/]echarts|echarts-gl[\\/]/,
                        chunks: 'initial',
                        priority: 3,
                        maxSize: 600000,
                        reuseExistingChunk: true,
                        enforce: true
                      }            
                  }
            }
        }
}

splitChunks配置说明

这里我根据个人项目需求对 element-ui echarts 进行单独分包处理，第一次配置完项目上线后发现element-ui echarts单个包还是比较大，又进行单独分包处理。也可以使用cdn方式，我这里使用了单独分包处理。

webpack-splitChunks 官方文档

分包前

分包后

可以看到echarts 分成三个文件了。

利用splitChunks分包导致上线chunk-XX.js文件过多页面加载缓慢资源请求阻塞问题

项目第一次加载请求了所有资源包，一共发送了595次请求（看上图），这不太可怕了。浏览器一次请求6-8个，剩下下的请求都在排队中，这样就造成了阻塞，部分小文件请求排队就需要十几秒。

上线chunk-XX.js文件过多解决方法

配置vue.config.js 文件

module.exports = {
chainWebpack: (config) => {
        config.plugins.delete("prefetch");
    },
}

这里配置使用懒加载用到组件资源再去发送请求去服务器取。 之前是预加载形式，项目第一次打开就请求所有资源文件。 分包配置结合懒加载处理可以解决一以上问题。

配置后效果

第一打开项目，请求资源文件49个，提升效果非常明显。感谢你的阅读~