vue首屏減少加載時間(gzip)

最初,我以為單純的以為通過按需引入相對應的組件和懶加載就可以有效的減少請求的時間

我to young啊，無論我怎么改，請求時間就是降不下來，后來，直到我遇到了本期的主角，gzip這個神奇的東西

原本我的請求體積是1M多（用了兩個UI組件能不大嗎（-_-）），用了懶加載和按需引入，雖然說降到600k

但是還是很大，

於是乎，在頭疼的時候，我遇到了gzip

OMG 體積變成了100多k！！！！！！ 

 

 

那么gzip是個什么東西呢

GZIP最早由Jean-loup Gailly和Mark Adler創建，用於UNIX系統的文件壓縮。我們在Linux中經常會用到后綴為.gz的文件，它們就是GZIP格式的。現今已經成為Internet 上使用非常普遍的一種數據壓縮格式，或者說一種文件格式。HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術。大流量的WEB站點常常使用GZIP壓縮技術來讓用戶感受更快的速度。這一般是指WWW服務器中安裝的一個功能,當有人來訪問這個服務器中的網站時,服務器中的這個功能就將網頁內容壓縮后傳輸到來訪的電腦瀏覽器中顯示出來.一般對純文本內容可壓縮到原大小的40％.這樣傳輸就快了,效果就是你點擊網址后會很快的顯示出來.當然這也會增加服務器的負載. 一般服務器中都安裝有這個功能模塊的.

 

簡單來說，看到zip就知道是與壓縮有關的東西了

他是用在服務端上的

node.js啟用gzip

下面說一下node的express框架如何使用gzip:

1.安裝一個compression依賴：

npm install compression

2.調用：

var compression = require('compression')
var app = express();

//盡量在其他中間件前使用compression
app.use(compression());

 

基本的使用就是這樣就ok了，是不是很簡單咧

 

另外如果想只對某些請求使用此功能，可以使用它的過濾方法：

app.use(compression({filter: shouldCompress}))

function shouldCompress (req, res) {
  if (req.headers['x-no-compression']) {
    // 這里就過濾掉了請求頭包含'x-no-compression'
    return false
  }

  return compression.filter(req, res)
}

　　

其他的功能請參考compression的文檔。