vue项目打包上线chunk-XX.js文件太多导致页面加载缓慢解决方案

因把vuetify的icon安装在本地后，导致项目发布先上chunk的文件生成特别多，于是想去解决一下这个问题！翻阅各种典籍以后尝试了下面的几种方法，个人觉得第二种好用，强烈推荐哈！！！

第一种方法：

1.npm使用下面命令安装

npm install --save-dev compression-webpack-plugin

2.yarn使用下面命令安装

yarn add compression-webpack-plugin --save-dev

二、接下来要去修改vue的配置文件 vue.config.js

const path = require('path');

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  publicPath:'/appShare/',
  productionSourceMap: false,
  configureWebpack:{
    resolve:{
      alias:{
        '@':path.resolve(__dirname, './src'),
        '@i':path.resolve(__dirname, './src/assets'),
      } 
    },
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^./locale$/, /moment$/),
      
      // 配置compression-webpack-plugin压缩
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5, 
        minChunkSize: 100
      })
    ]

  },

一顿操作下来发现项目报错了，于是又去翻阅了典籍

报错提示：# TypeError: Cannot read property ‘tapPromise‘ of undefined

这个问题是compression-webpack-plugin版本问题，

compression-webpack-plugin 默认安装的是 9 版本的

**解决方案：

先执行卸载命令->npm uninstall compression-webpack-plugin

执行安装命令->npm i compression-webpack-plugin@5.0.1

这个时候项目报起来了，各种多余的chunk-xx.js也没有了，速度好像也提升了那么一丢丢，但是我觉得配置太多了，于是我又去找寻找了另外一种方法。。。

第二种方法：

vue项目目前用的是路由懒加载的模式，在每一次刷新都会重新加载很多js文件，由于路由都没有自定义webpackChunkName，所以就是默认的11(数字).js这种。

打包后默认是chunk-xxx.js

一种方法是移除prefetch，此插件是用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。具体内容指路官网：cli.vuejs.org/zh/guide/ht…

代码如下：

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

简单两句配置起来就完美解决了我的问题，而且速度也提升的很快，推荐推荐推荐！！！