vue项目优化实战-开启gzip压缩

vlambda
2021-03-05

vue项目优化实战-开启gzip压缩

【文末有福利】

gzip(GNU- ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多。gzip的压缩页面需要浏览器和服务器双方都支持，实际上就是服务器端压缩，传到浏览器后浏览器解压并解析。浏览器那里不需要我们担心，因为目前的大多数浏览器都支持解析gzip压缩过的资源文件。在实际的应用中我们发现压缩的比率往往在3到10倍，也就是本来50k大小的页面，采用压缩后实际传输的内容大小只有5至15k大小，这可以大大节省服务器的网络带宽，同时如果应用程序的响应足够快时，网站的速度瓶颈就转到了网络的传输速度上，因此内容压缩后就可以大大的提升页面的浏览速度。

实现gzip压缩的方式有多种，比如：nginx、tomcat、java等，选用其中一种即可。拿Vue-cli3.0项目来说，注意是Vue-cli3.0而不是vue3.0

1，开启gzip压缩

首先安装ompression-webpack-plugin这个插件

npm i [email protected]

在vue.config.js中引入

const CompressionWebpackPlugin = require('compression-webpack-plugin')//然后配置需要压缩的资源,依次是，js文件，css样式文件，字体文件，json文件，jpg类型的图片，png类型的图片const productionGzipExtensions = ['js', 'css'，’ttf’,’json’,’jpg’,’png’]
在configureWebpack中的plugins中添加 plugins: [ new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 10240, minRatio: 0.8 }), new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 5, minChunkSize: 100 }) ]

同样 nginx 上也需要配置，在nginx中的conf文件中的server{}中配置加上如下代码

gzip on; gzip_static on; gzip_buffers 4 16k; gzip_comp_level 8; gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型       gzip_vary on;

2，删除console.log

在调试项目中，经常会用console打印结果进行调试，当我们发布的时候又不能将这些打印的结果开放出去，所以我们需要删除console。这就需要安装一个插件。

安装插件

npm install terser-webpack-plugin --save-dev

如果是webpack4，则使用

npm install [email protected] --save-dev

在vue.config.js中引入

const TerserPlugin = require('terser-webpack-plugin')

同样在configureWebpack项中的optimization

对象中配置如下代码

minimizer: [ new TerserPlugin({ terserOptions: { ecma: undefined, warnings: false, parse: {}, compress: { drop_console: true, drop_debugger: false, pure_funcs: ['console.log'], // 移除console }, }, }), ],