项目（Vue2）在打包时chunk-vendors.js文件过大问题

本文主要是介绍项目（Vue2）在打包时chunk-vendors.js文件过大问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

写在前面

当我们将项目部署上线后，会出现首屏加载时间过长的问题，一般情况下，是由于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]\.";
}