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改变了 所以对应资源的路径也变了，所以就不走缓存了