1.开启gzip
使用compression-webpack-plugin插件
安装依赖(npm install --save-dev compression-webpack-plugin@1.1.12 或者 yarn add compression-webpack-plugin@1.1.12 --dev)
// 在vue.config.js配置
// gzip 压缩
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
configureWebpack: config => {
const plugins = [];
// Begin 生成 gzip 压缩文件
plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: productionGzipExtensions,
threshold: 10240, // 大于10k就压缩(只处理比这个值大的资源,按字节计算)
minRatio: 0.8 // 只有压缩率比这个值小的资源才会被处理
})
);
// End 生成 gzip 压缩文件
config.plugins = [...config.plugins, ...plugins];
},
// 其他配置代码
}
// 在nginx配置
http {
gzip on; #开启gzip
gzip_min_length 10k; #低于10kb的资源不压缩
gzip_comp_level 3; #压缩级别【1-9】,越大压缩率越高,同时消耗cpu资源也越多,建议设置在4左右。
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css; #需要压缩哪些响应类型的资源,多个空格隔开。不建议压缩图片
gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
gzip_vary on; #是否添加“Vary: Accept-Encoding”响应头
gzip_static on; #检查是否存在请求静态文件的gz结尾的文件,如果有则直接返回该gz文件内容,不存在则先压缩再返回
// 其他配置代码
}
查看gzip是否生效
浏览器文件请求的请求头(Request Headers)包含字段Accept-Encoding: gzip代表浏览器支持gzip压缩文件
文件响应头(Response Headers)包含字段Content-Encoding: gzip代表返回的是压缩文件
同时NetWork一栏还可以查看到文件的size实际大小和实际的请求(gzip)文件大小
判断gzip是否使用前端打包的gz文件
浏览器请求的响应头(Response Headers)包含字段ETag的值开头是否有W/,有表示这是nginx压缩的,没有就是使用前端提供的gz文件
2.index.html缓存问题
// 在nginx配置
http {
server {
location = /index.html {
add_header Cache-Control "no-cache";
}
// 其他配置代码
}
// 其他配置代码
}
3.使用cdn
// 在vue.config.js配置(配置好后,在index.html头部加上对应的cdn)
module.exports = {
chainWebpack: (config) => {
//忽略的打包文件
config.externals({
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'element-ui': 'ELEMENT',
})
}
// 其他配置代码
}
4.图片过大时记得压缩( https://tinypng.com/ )
5.productionSourceMap
如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建