生成gizp的打包资源，可以优化页面加载速度
打包的时候开启gzip可以很大程度减少包的大小，页面大小可以变为原来的30%甚至更小,非常适合线上部署, 但还记得需要服务端支持
1、前端配置compression-webpack-plugin
先安装：npm install compression-webpack-plugin
安装的版本需要注意，根据自己的webpack版本来定，尽量匹配
01、vue.config.js 在vuecli中
/* 第一种方式 */
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const plugins = [...]
if (isProduction) {
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\.(' + ['html', 'js', 'css'].join('|') + ')$'),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
})
)
}
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': resolve('./src')
}
},
plugins
},
}
02、 在vuecli中，configureWebpack 返回函数式写法
/* 第二种方式 */
// configureWebpack 返回函数式写法
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV !== 'development'
module.exports = {
...
configureWebpack: (config) => {
config.plugins.push(
new HardSourcePlugin()
)
// 其他配置
Object.assign(config.resolve, {
alias: {
'@': resolve('./src')
}
})
// 为生产环境修改配置
if (isProduction) {
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\.(' + ['html', 'js', 'css'].join('|') + ')$'),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
})
)
}
},
}
// webpack.config.js 在webpack搭建的项目中
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
mode: 'development',
...
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\.(' + ['html', 'js', 'css'].join('|') + ')$'),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
})
]
2、服务端配置, 以nginx为例
服务端 Nginx 需开启 gzip_static 功能;
在nginx.conf的server模块中加入以下代码:
server{
//开启和关闭gzip模式
gzip on;
//gizp压缩起点，文件大于2k才进行压缩;设置允许压缩的页面最小字节数，页面字节数从header头得content-length中进行获取。 默认值是0，不管页面多大都压缩。建议设置成大于2k的字节数，小于2k可能会越压越大。
gzip_min_length 2k;
// 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区
gzip_buffers 4 16k;
// 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
// gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 2;
//进行压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml;
// 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
}
以上
对于支持gzip的浏览器, 配置成功后请求头中会包含: Accept-Encoding: gzip, deflate
服务器响应时 在响应头中显示: Content-Encoding: gzip
