前端优化之gzip

使用vue-cli构建项目，打包后发现文件体积很大，特别是第三方库文件，达到1.6M，在使用gzip压缩有，文件体积减少到600K左右。

第一步：安装compression-webpack-plugin插件
npm install compression-webpack-plugin

第二步：webpack配置

new ConpressionPlugin({ 
	  filename:'[path].gz[query]',
	  algorithm:'gzip',
	  test: /\.js$|\.html$|\.css/,
	  threshold:10240,	//只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
	  minRatio:0.8,		//只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
	  deleteOriginalAssets: false		//删除源文件，不建议
})

链式调用：

config
	.plugin('ConpressionPlugin')
	.after('html')
	.use('compression-webpack-plugin', [{
		test: /\.js$|\.html$|\.css/,
		threshold:10240,
		deleteOriginalAssets: false	//删除源文件，不建议
	}])
	.end()

第三步：nginx配置
// 开通gzip压缩
gzip on;

// 配置压缩类型
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

第四步：打包
使用npm run build 打包，打包完成后可以看到后缀为.gz的压缩文件

部署到服务器后，访问项目，浏览器控制台看到gzip即成功