作者:Eddy 历史版本:1 最后编辑:龚清 更新时间:2024-11-20 15:41
所有操作都是在打包构建之前修改配置;
一、开启gzip压缩机制
注意:所有操作都是在打包构建之前修改配置
1.1、修改配置文件
在IBPS平台中。修改.env
文件
- 修改前
VUE_APP_GZ = false
- 修改后
VUE_APP_GZ = true
1.2、修改nginx配置开启gizp
经过gzip压缩
的包可以缩小约2/3体积,对网络传输的提升显著。开启gzip需要服务器的配合,以nginx为例,在nginx.conf
中加入
server: {
...
gzip on; # 是否开启gzip
gzip_buffers 32 4K; #缓冲(压缩在内存中缓冲几块? 每块多大?)
gzip_comp_level 6; #推荐6 压缩级别(级别越高,压的越小,越浪费CPU计算资源)
gzip_min_length 100; #开始压缩的最小长度(再小就不要压缩了,意义不大)
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json; #对哪些类型的文件用压缩 如txt,xml,html ,css
gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
gzip_vary on; #是否传输gzip压缩标志
}
说明:其他容器请百度
1.3、开启gizp说明:
这样,客户端请求文件时,服务器就会自动压缩文件。但是服务器的压缩是需要CPU开销的,为了节省CPU资源,我们可以在打包的时候同时打包一份gzip,配置如下vue.config.js
configureWebpack: config => {
const configNew = {}
if (process.env.NODE_ENV === 'production') {
configNew.externals = externals
if (enableGzip) { //是否开启gzip
configNew.plugins = [
// gzip
new CompressionWebpackPlugin({
filename: '[path][base].gz[query]',
test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false //是否删除原文件
})
]
}
}
return configNew
}
二、开启第三方资源文件CDN加速
注意:所有操作都是在打包构建之前修改配置
2.1、修改配置文件
- 修改
.env
文件 - 修改前
VUE_APP_CDN = false
- 修改后
VUE_APP_CDN = true
2.2、配置CDN的第三方库
dependencies-cdn.js
配置需要CDN的第三方库
2.2.1 支持本地CDN和服务CDN (3.5.4+支持)
- 修改环境配置文件
.env
修改成需要环境
# CDN地址 服务地址:可选:unpkg[推荐],cdnjs【太多包没】,jsdelivr【服务器挂了】,local【本地环境】
VUE_APP_CDN_PATH = 'local'
配置CDN的第三方库
dependencies-cdn.js
配置复制本地的第三方库【local类型需要关注,其他类型忽略】
copy-plugins.js
2.3、代码打包
npm run build
三、开启HTTP/2或多域名
参考文档:http://doc.bpmhome.cn/docs/ibps_v3_develop/ibps_v3_develop-1c9e5f7756gie
3.1、方案一:HTTP/2
该方案服务器nginx 配置
或其他容器
3.1、方案二:多域名
该方案修改配置文件config.js
配置
http://doc.bpmhome.cn/docs/ibps_v3_deploy/ibps_v3_deploy-1c9cgh4drc105