解决 Vue 打包 chunk-vendors.js 文件过大导致页面加载缓慢的问题

1、下载 compression-webpack-plugin 插件：

npm install --save-dev compression-webpack-plugin
// 由于安装最新版本会安装失败，报错 unable to resolve dependency tree
// 所以需要找一个低版本的进行安装，如果不知道安装什么版本合适，就直接去 npm 官网找到这个组件，找到发布版本列表，一个一个的从新到旧安装，直到成功为止！
// 上面的如果安装失败就先用这个版本，或按照上句话所说的去尽量安装新的版本
npm install --save-dev compression-webpack-plugin@6.1.1

2、修改 vue.config.js：

const CompressionWebpackPlugin = require("compression-webpack-plugin");

module.exports = {
  ... ...
  // 自定义webpack配置
  configureWebpack: (config) => {
    config.plugins.push(
      new CompressionWebpackPlugin({
        algorithm: "gzip",
        test: /\.js$|\.html$|\.json$|\.css/,
        threshold: 10240,
        minRatio: 0.8
      })
    );
    // 开启分离js
    config.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("@", "")}`;
            }
          }
        }
      }
    };
    // 取消webpack警告的性能提示
    config.performance = {
      hints: "warning",
      //入口起点的最大体积
      maxEntrypointSize: 50000000,
      //生成文件的最大体积
      maxAssetSize: 30000000,
      //只给出 js 文件的性能提示
      assetFilter: function(assetFilename) {
        return assetFilename.endsWith(".js");
      }
    };
    config.plugins.forEach((val) => {// 使用 CDN 链接引入时加上
      if (val instanceof HtmlWebpackPlugin) {
        val.options.cdn = cdn;
      }
    });
    return {
      externals, // 使用 CDN 链接引入时加上，打包时忽略这些依赖
      resolve: {
        alias: {
          "@": resolve("src")
        }
      },
      output: {
        // 把子应用打包成 umd 库格式
        library: `${name}-[name]`,
        libraryTarget: "umd",
        jsonpFunction: `webpackJsonp_${name}`
      }
    };
  },
  ... ...
};

3、后端 nginx 配置：

server {
    listen       80;
    server_name  localhost;
    location / {
        try_files $uri $uri/ /index.html;
        root C:/nginx-1.18.0/html/gzip/dist;
        index  index.html index.htm;
    }
    location /api/ {
        proxy_pass http://localhost:6666/;
    }
    
    # 主要是下方的gizp配置
    gzip on; # 开启gzip压缩
    gzip_min_length 4k; # 小于4k的文件不会被压缩，大于4k的文件才会去压缩
    gzip_buffers 16 8k; # 处理请求压缩的缓冲区数量和大小，比如8k为单位申请16倍内存空间；使用默认即可，不用修改
    gzip_http_version 1.1; # 早期版本http不支持，指定默认兼容，不用修改
    gzip_comp_level 2; # gzip 压缩级别，1-9，理论上数字越大压缩的越好，也越占用CPU时间。实际上超过2的再压缩，只能压缩一点点了，但是cpu确是有点浪费。因为2就够用了
                # 压缩的文件类型 MIME类型，百度一下，一大把                                    # css             # xml             # 识别php     # 图片
    gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/x-woff font/ttf;
                # text                   # 早期js                 # js        # js的另一种写法                                                                                 # .eot字体                   # woff字体  # ttf字体
    gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，一般情况下建议开启       
}

4、路由懒加载：

import Vue from "vue";
import Router from "vue-router";
import Login from "components/login";

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: "/",
      name: "Login",
      component: Login
    },
  ]
});

export default router;

// 改成下面这种

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: "/",
      name: "Login",
      component: () => import("components/login")
    },
  ]
});

export default router;