vue 处理打包后加载慢的问题_vite打包慢

原因：

1、chunk-vendors文件过大

2、js没有压缩

3、服务器没有开启gzip

解决办法：

首先在build发布时候压缩js、css等资源文件

安装npm压缩组件

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

压缩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,
      }))
    }
 
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

其次在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]\.";
}
1
2
3
4
5
6
7
8
9
10

或者tomcat开启nginx

 <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"/>
1
2
3
4
5
6
7
8