1.前端开启gzip
首先要安装compression-webpack-plugin这个插件，它是专用于将项目打包是压缩的。
cnpm i --save compression-webpack-plugin
2.在vue.config.js中进行配置
const webpack = require('webpack')
// 解决文件到打包后过大问题
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {
configureWebpack:{
// 解决文件到打包后过大问题 配置
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 下面是下载的插件的配置
new CompressionWebpackPlugin({
algorithm: 'gzip', //使用gzip压缩
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//哪些文件要压缩
threshold: 10240,
minRatio: 0.8 //压缩率小于0.8才会压缩
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5, //最大文件数
minChunkSize: 100
})
]
}
}
这样我们打包出来的js或css文件就变成压缩包格式的
3.后端配置nginx
gzip on; #决定是否开启gzip模块，on表示开启，off表示关闭；
gzip_static on; #它会去找.gz后缀的文件，找到了就直接返回。没找到就找到原来的文件，进行压缩再返回
gzip_min_length 1k; #设置允许压缩的页面最小字节(从header头的Content-Length中获取) ，当返回内容大于此值时才会使用gzip进行压缩,以K为单位,当值为0时，所有页面都进行压缩。建议大于1k
gzip_buffers 4 16k; #设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间,param2:int(k) 后面单位是k。这里设置以16k为单位,按照原始数据大小以16k为单位的4倍申请内存
gzip_http_version 1.1; #识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
gzip_comp_level 4; #设置gzip压缩等级，等级越底压缩速度越快文件压缩比越小，反之速度越慢文件压缩比越大；等级1-9，最小的压缩最快 但是消耗cpu
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascrip; #设置需要压缩的MIME类型,非设置值不进行压缩，即匹配压缩类型
gzip_disable "MSIE [1-6]\."; #IE6不压缩
网友评论