在开发项目时引入过多的插件时,容易导致项目打包后chunk-vendors.js文件过大,导致浏览器加载慢的问题,目前有两种解决方式
方式一:
由于:chunk-vendors文件过大、js没有压缩、服务器没有开启gzip
解决方式:
1、首先在build发布时候压缩js、css等资源文件
2、安装npm压缩组件
npm install --save-dev compression-webpack-plugin //vue3
npm i [email protected] //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 就开启了!
标签:vue,compression,text,压缩,js,css,gzip,打包,加载
From: https://www.cnblogs.com/axingya/p/16812992.html