vue项目优化——页面加载缓慢 chunk-vendors.js 文件过大

在开发项目时引入过多的插件时，容易导致项目打包后chunk-vendors.js文件过大，导致浏览器加载慢的问题。

优化步骤

一、减少chunk-vendors.js文件的大小

引入element-ui等第三方组件的时候，按需引入

二、对chunk-vendors.js文件进行压缩

1、添加 压缩组件

npm install --save-dev compression-webpack-plugin    //vue3 
npm i compression-webpack-plugin@5.0.1    //vue 4

2、压缩配置
压缩js、css文件，在vue.config.js 中加入如下配置项：

const CompressionPlugin = require("compression-webpack-plugin")

module.exports = defineConfig({
	chainWebpack: (config) => {
	    // 生产环境，开启js\css压缩
	    // if (process.env.NODE_ENV === 'product') {
	      config.plugin('compressionPlugin').use(new CompressionPlugin({
	        test: /\.(js|css|less|map)$/, // 匹配文件名
	        threshold: 1024, // 对超过10k的数据压缩
	        minRatio: 0.8,
	      }))
	    // }
  },
})

3、在Nginx服务端开启gzip

server{
        gzip on;
        gzip_static on;
        gzip_min_length 1k;
        gzip_buffers 4 16k;
        gzip_comp_level 9;
        gzip_types text/plain application/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]\.";
}