Vue 打包 chunk-vendors.js 文件过大导致页面加载慢

问题描述

项目部署后移动打开加载缓慢，F12发现chunk-vendors.js加载时间过长。
百度参考材料

---

解决方案：

利用compression-webpack-plugin插件

第一步
下载compression-webpack-plugin

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

或者

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

第二步
修改vue.config.js

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const zlib = require('zlib')
const path = require('path')
const Timestamp = new Date().getTime();

// 至此，你会发现原先的vender文件没有了，同时多了好几个依赖的js文件  
module.exports = defineConfig({
  productionSourceMap: false,
  transpileDependencies: true,
  configureWebpack: {
    output: {
      filename: `[name].js?v=${Timestamp}`,
      chunkFilename: `[name].js?v=${Timestamp}`
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@i': path.resolve(__dirname, './src/assets'),
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jquery: "jquery",
        "windows.jQuery": "jquery",
      }),
      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
      })
    ]
  },
  chainWebpack(config) {
    config.optimization.splitChunks({
      cacheGroups: {
        common: {//commons 一般是是个人定义的
          name: 'chunk-common', // 打包后的文件名
          chunks: 'initial',
          minChunks: 1,
          maxInitialRequests: 5,
          minSize: 0,
          priority: 1,
          reuseExistingChunk: true
        },
        vendors: {//vendor 是导入的 npm 包
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial',
          maxSize: 600000,
          maxInitialRequests: 20,
          priority: 2,
          reuseExistingChunk: true,
          enforce: true
        },
        antDesignVue: {//把antDesignVue从chunk-vendors.js提取出来。当然我们也可以把mixins，vue.min.js等等也按照类似配置提取出来
          name: 'chunk-ant-design-vue',
          test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
          chunks: 'initial',
          priority: 3,
          maxSize: 600000,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    })
  },
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    port: 9010,
    proxy: {
      '/api': {
        target: 'http://xxxxx',//后端地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        }
      }
    }
  }
})