vue打包的时候chunk-vendors.js文件很大，导致首次加载页面比较慢；

首先：
1、安装compression-webpack-plugin

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

安装的时候如果报以下的错误

版本的问题：

解决办法：npm install compression-webpack-plugin@6.1.1

2、修改vue的配置文件vue.config.js

const path = require('path');
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const zlib = require('zlib')
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  // 去除vue打包后js目录下生成的.map文件，用于加速生产环境构建
  productionSourceMap: false,
  publicPath: "./",
  // 解决打包体积大报的错
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@i': path.resolve(__dirname, './src/assets'),
      }
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 下面两项配置才是 compression-webpack-plugin 压缩配置
      // 压缩成 .gz 文件
      new CompressionPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
      }),
      // 压缩成 .br 文件，如果 zlib 报错无法解决，可以注释这段使用代码，一般本地没问题，需要注意线上服务器会可能发生找不到 zlib 的情况。
      new CompressionPlugin({
        filename: '[path][base].br',
        algorithm: 'brotliCompress',
        test: /\.(js|css|html|svg)$/,
        compressionOptions: {
          params: {
            [zlib.constants.BROTLI_PARAM_QUALITY]: 11
          }
        },
        threshold: 10240,
        minRatio: 0.8
      })
    ],
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 20000,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`
            }
          }
        }
      }
    }
  }
}

其次：
路由配置由原先的import更改为下面情况 因为import会一次性全部加载完 那样会影响很多

const heihei= resolve => require(['../views/heihei.vue'],resolve);
const one= resolve => require(['../views/one.vue'],resolve);

还有：
采用cdn加速

// 我这里引入了elementui  vue  echarts
<script
  crossorigin="anonymous"
  integrity="sha512-RuUMLxuB8daxj+iqjuwA7u2lFFFQNlbnFnerb0FPhfZ761E0Wn6wD4f5vZskYgbxu+wSu36vfFHCUDaKaHHhUQ=="
  src="http://lib.baomitu.com/echarts/5.0.2/echarts.common.js"
></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 在引入 ElementUI 之前引入 Vue，会注入全局变量 Vue  -->
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<!-- 引入 ElementUI 组件库，会注入全局变量 -->
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>

在vue.config.js中配置

chainWebpack: config => {
  config
    .plugin('html')
    .tap(args => {
      args[0].title = '医联体标化绩效管理平台'
      return args
    }),
    config.externals({
      'echarts': 'echarts',
      'element-ui': 'ElementUI',
      'vue': 'Vue',
    });
},

去除之前的引用

// import Vue from 'vue'
// 引入echarts
// import * as echarts from "echarts";
// Vue.prototype.$echarts = echarts
// 引入element组件
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'