koa2靜態資源緩存策略

文章原文： https://www.cnblogs.com/yalong/p/15211975.html

緩存對於前端性能優化來說有極大好處，這里總結下目前感覺還不錯的緩存策略

一. 靜態資源啟動gzip壓縮

這里不是在server端開啟gzip, 而是在 webpack 打包的時候把靜態資源進行gzip壓縮，大大減輕了服務器壓縮gzip的壓力,大大減少傳輸時間
具體可以參考這個： node.js koa2 如何使用gzip

二.webapck打包使用contenthash

webpack中對於輸出文件名可以有三種hash值：

1. hash
2. chunkhash
3. contenthash

他們的差別簡單來說就是

1.hash

每修改一個文件，所有文件的hash都會改變

2.chunkhahs

只要整個chunk 不曾修改，chunkhash 就不變, 但是chunk 里包含很多個文件，如果其中一個文件改變了，整個chunkhash 就改變了

3.contenthash

contenhahs 是針對每個文件，只要這個文件不變，contenthasn 就不變，不受其他文件影響

所以webpack 打包的時候使用 contenhash, 就可以保證只有真正有修改的文件 對應的contenthash才改變，從而更好的適用下面的緩存策略

關於 hash chunkhash conetenthash 更詳細的區別可以看這里ebpack中hash、chunkhash、contenthash區別

不理解 chunk 的可以看這個 Webpack 理解 Chunk

三.koa-static 強緩存靜態資源

因為可以保證每次打包后的文件，只對真正修改的文件，產生不一樣的contenhash,所以可以對全部靜態資源使用強緩存
以下代碼是對../dist 目錄下的靜態資源設置 10 天的強緩存

const staticCache = require('koa-static-cache');
app.use(
  staticCache(path.join(__dirname, '..', 'dist'), {
    maxAge: 10 * 24 * 60 * 60,
  }),
);

對於沒修改的文件，強緩存會生效，對於修改的文件，由於contenthash改變了 所以對應資源的路徑也變了，所以就不走緩存了