vue项目优化——vue 处理打包后加载慢的问题

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

方式一：

由于：chunk-vendors文件过大、js没有压缩、服务器没有开启gzip
解决方式：
1、首先在build发布时候压缩js、css等资源文件
2、安装npm压缩组件

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

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

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

后端需要的配置：
在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]\.";
}

tomcat开启nginx（现在基本上tomcat都处于内嵌状态）

<Connector port="8080"  protocol="org.apache.coyote.http11.Http11NioProtocol"
    useSendfile="false"  
    connectionTimeout="20000"
    redirectPort="8443"
    compression="on"
    compressionMinSize="50"
    noCompressionUserAgents="gozilla,traviata"
    compressableMimeType="text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/css,text/plain"/>
### 方式二（仅后端）：
接口请求的数据太大。
控制返回参数收效甚微，这时开启 gzip 就非常有用了，可以压缩接口请求的数据，一般的json文本压缩比率很大，开启之后接口时间大幅下降！
1、启用步骤
Spring Boot 项目配置：

server.compression.enabled=true

默认只压缩超过 2048 字节的数据，修改server.compression.min-response-size的值可以设置该大小
默认情况下，只有在响应内容类型为以下内容时才会压缩响应：

text/html
text/xml
text/plain
text/css

我们的接口返回的是 json 数据，所以修改下面的配置：

server.compression.mime-types=application/json

yml 文件的配置方式

开启Gzip压缩，默认只压缩超过2048字节的数据

server:
compression:
enabled: true
mime-types: application/json

这样 Gzip 就开启了！