以下配置在Vue-cli框架上进行
1、找到config/index.js下,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'],
将productionGzip由false改为true,表示开启gzip打包压缩,看注释,发现需要安装一个compression-webpack-plugin
摸摸度娘后发现直接安装有坑,所以,下一步
2、修改build/webpack.prod.conf.js文件中,asset选项无效,要改成filename
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
// asset: '[path].gz[query]', // 就是她这个妖媚
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
3、再安装那个包包,有人说高版本错误,低版本没事,不想折腾了,直接低版本吧,安装v1.1.2
npm install --save-dev compression-webpack-plugin@1.1.2
4、再次运行npm run build
打包,打包文件中就由了gzip文件了,前端的工作算结束了。接下来,帮后端同学修改一下nignx配置
5、在后台nignx配置文件,nignx.config文件中,开启gzip,添加配置
gzip on;
gzip_http_version 1.1;
gzip_comp_level 5;
gzip_min_length 1000;
gzip_types text/csv text/xml text/css text/plain text/javascript application/javascript application/x-javascript application/json application/xml;
啥意思呢,怎么这么多,单纯的gzip设置为on,发现有些压缩了,有些没有,
- gzip_http_version设置http最低版本,默认是1.0,修改为1.1
- gzip_comp_level压缩级别,级别越高压缩率越大,当然压缩时间也就越长,默认值1,取值1-9
- gzip_min_length设置允许压缩的页面最小字节数,Content-Length小于该值的请求将不会被压,缩默认值:0,当设置的值较小时,压缩后的长度可能比原文件大,建议设置1000以上
- gzip_types 要采用gzip压缩的文件类型(MIME类型),默认值:text/html(默认不压缩js/css)
最重要的就是gzip_types玩意啦,不然只压缩heml文件,我折腾了大半天,你就给我看这个?
6,最后一步,重启nignx服务器,
在这个服务器文件夹目录执行命令行nignx -s reload
重启服务器就好了。
ok,到此结束!
老规矩,推荐一篇好文章,参考
前端必备的 Nginx 知识: https://www.jianshu.com/p/cf90320102f9