Vue打包优化之gizp压缩

前言：

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。在 Vue CLI3 中
webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。

安装插件：

npm i -D compression-webpack-plugin

webpack配置

在 vue.config.js 中按照如下方式进行配置

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
	configureWebpack: config =>{
		if(process.env.NODE_ENV === 'production'){
			return {
				plugins:[new Compression({
					test: /\.js$|\.html$|\.css/, //匹配文件名
					threshold: 10240, //大于10KB的文件进行压缩
					deleteOriginalAssets: false //是否删除原文件
				})]
			}
		}
	}
}

压缩对比：

兼容性及nginx配置

一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip

要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件

http:{ 
      gzip on; 
      gzip_static on;
      gzip_buffers 4 16k;
      gzip_comp_level 5;
      gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg 
                 image/gif image/png;
}

配置参考：配置参考

结语

Vue项目 GIZP 压缩优化就到这里了。希望大家能点赞评论！

如果喜欢本文的话，欢迎关注我的订阅号，漫漫技术路，期待未来共同学习成长。