写在前面

当我们将项目部署上线后，会出现首屏加载时间过长的问题，一般情况下，是由于chunk-vendor.js文件过大进而导致加载缓慢

一.chunk-vendor.js是个啥子，为什么会导致首屏加载过慢？

简单来说，chunk-vendor.js保存着项目的第三方依赖，一个项目中会引入多个第三方的包，所以，打包后，dist文件夹中所保存的chunk-vendor.js会多大

二.如何解决？

第一步：下载compression-webpack-plugin插件

npm i compression-webpack-plugin@10.0.0

第二步：在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();
const ISPROD = process.env.NODE_ENV === 'production'

module.exports = defineConfig({
    productionSourceMap:false,
    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.IgnorePlugin({
                resourceRegExp:/^\.\/locale$/,
                contextRegExp:/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
            })
        ],
    },
    chainWebpack(config){
        if (ISPROD){
            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,
})

第三步：Nginx进行配置代理，让它可以访问gzip文件就可以啦

server{
    listen 8087;
    server_name localhost;

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
}

三.最终效果

最终打包完毕效果就变成这样啦
完结撒花~