文章原文：https://www.cnblogs.com/yalong/p/14948533.html
背景：
項目中打包后的代碼，體積過大，導致加載的時候很慢，特別影響用戶體驗，所以要對此優化，開啟gzip壓縮無疑是關鍵的一點
使用gzip的前提
web服務器和客戶端（瀏覽器）必須共同支持gzip。
即請求頭的Accept-Language 包含 gzip, 返回頭的Conten-Encoding 也包含 gzip
目前主流的瀏覽器，Chrome,firefox,IE等都支持該協議。常見的服務器如Apache，Nginx，IIS等同樣支持gzip。
Koa2開啟gizp壓縮
首先安裝 npm install koa-compress -S
然后在koa2中配置：
const koa = require('koa');
const compress = require('koa-compress');
const app = koa();
const options = { threshold: 2048 };
app.use(compress(options));
但是這種方式，是node直接對源文件進行gzip壓縮，雖然給客戶端返回的是壓縮后的資源，但是如果壓縮的文件比較大的話，壓縮的這個過程耗時是比較久的，可能會導致用戶體驗還不如不開啟gzip壓縮好。
webpack開啟gzip壓縮
由於現在大部分項目是基於webpack的， webapck本身是支持對靜態資源進行gzip壓縮的， 所以可以把這個耗時的工作交給webpack
webpack配置開啟gzip壓縮
代碼如下：(具體參數含義可自行百度)
const CompressionWebpackPlugin = require('compression-webpack-plugin');
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(js|css)$'),
threshold: 10240,
minRatio: 0.8
})
)
如下圖可以看到，打包后的文件下面，生成了同名的.gz 文件，文件體積明顯減少了，前端同學只需要把這些文件一起上傳到服務器即可
koa2如何把.gz 文件返回給前端？
如果使用node原生的話，需要判斷服務器上是否有.gz文件，還要設置
Content-Encoding 為 gzip
比較好的是，koa的 koa-static 默認自帶對gzip文件的檢測，基本原理就是對請求先檢測.gz后綴的文件是否存在，再去根據結果返回不同的內容
而且如果koa做服務器端的話，koa-static又是必須的，所以就不用做額外的配置了
koa-static 的配置示例如下：
app.use(require('koa-static')(path.join(__dirname, '..', 'dist')));
如下圖，打開瀏覽器的NetWork可以看到，請求的Accept-Language 包含 gzip, 返回頭的Conten-Encoding 是gzip, 這樣就通了，網站打開速度明顯提升了
