gzip壓縮

做了個個人vue項目，一上線首頁加載時間10~20s，這加載速度簡直不能忍。

 

特別是一個chunk-vendors.js，大小達到了800k+，而且還要這個js載入完才顯示首頁圖片。

於是查了很多資料無外乎從這幾點入手優化；

1、路由懶加載

2、gzip

3、cdn

4、圖片的處理（css精靈這類的），總之就是把小圖片弄到一起，達到減少請求的目的

5、其他

 

我看了看，感覺其實對於優化效果影響最大的應該是gzip、cdn、圖片的處理。

然而我這個小項目圖片並不多，自己也進行了圖片的大小處理，除了2張圖片超過200k，其他都是200k一下所以這一塊暫且不優化了。

 

重點是gzip和cdn。

cdn暫且先不弄，那么最大的優化點就是gzip了。

 

網上查了一下資料發現gizp大概是這么個玩意：

gzip是GNUzip的縮寫，它是一個GNU自由軟件的文件壓縮程序。

HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術。

總結：總之就是能實現壓縮文件功能的一個東西、技術

 

知道這么回事了，但要怎么用呢？

經過查詢發現使用gzip一共有3個方面的配置和要求

1、配置服務端使用gzip

2、瀏覽器要支持gzip （現代瀏覽器都支持，比如：chrome、Firefox、Safari...）

3、配置前端使用gzip

 

由於我服務端使用koa框架寫的，於是乎查到了

Koa Compress

它的使用方法很簡單：

1、npm i koa-compress

 

2、

var compress = require('koa-compress')

var Koa = require('koa')

 

var app = new Koa()

app.use(compress({

  filter: function (content_type) {

   return /text/i.test(content_type)

  },

  threshold: 2048, //閾值 1024為1kb以上就壓縮

  flush: require('zlib').Z_SYNC_FLUSH

}))

 

最后就是配置前端了：

1、安裝插件

cnpm i --save-dev compression-webpack-plugin

 

2、在vue.config.js 中加入

const CompressionWebpackPlugin = require('compression-webpack-plugin');

const productionGzipExtensions = ['js', 'css'];

 

module.exports = {

　　configureWebpack: config => {

　　　　　　if (isProduction) {

　　　　　　config.plugins.push(new CompressionWebpackPlugin({

　　　　　　algorithm: 'gzip',

　　　　　　test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),

　　　　　　threshold: 10240,

　　　　　　minRatio: 0.8

　　　　　　}))

　　　　}

　　}

}

 

效果：