前言

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

利用splitChunks 进行分包打包

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

下面进行splitChunks 分包配置

vue.config.js文件

复制 1module.exports = {
 2    optimization: {
 3            runtimeChunk: 'single',
 4            splitChunks: {
 5                chunks: 'all',
 6                minSize: 60000,
 7                maxAsyncRequests: 30,
 8                maxInitialRequests: 30,
 9                name:true,
10                cacheGroups: {
11                    vendor: {
12                      test: /[\\/]node_modules[\\/]/,
13                      reuseExistingChunk:true,
14                      name(module) {
15                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
16                        return `npm.${packageName.replace('@', '')}`;
17                      }
18                    },
19                    ui: {
20                        name: 'npm.ui',
21                        test: /[\\/]node_modules[\\/]element-ui[\\/]/,
22                        chunks: 'initial',
23                        priority: 3,
24                        maxSize: 600000,
25                        reuseExistingChunk: true,
26                        enforce: true
27                      },
28                      echarts: {
29                        name: 'npm.echarts',
30                        test: /[\\/]node_modules[\\/]echarts|echarts-gl[\\/]/,
31                        chunks: 'initial',
32                        priority: 3,
33                        maxSize: 600000,
34                        reuseExistingChunk: true,
35                        enforce: true
36                      }            
37                  }
38            }
39        }
40}

splitChunks配置说明

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

webpack-splitChunks 官方文档

分包前

分包后

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

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

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

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

配置vue.config.js 文件

复制 1module.exports = {
 2chainWebpack: (config) => {
 3        config.plugins.delete("prefetch");
 4    },
 5}

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

配置后效果

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