文章原文: https://www.cnblogs.com/yalong/p/15211975.html
缓存对于前端性能优化来说有极大好处,这里总结下目前感觉还不错的缓存策略
一. 静态资源启动gzip压缩
这里不是在server端开启gzip, 而是在 webpack 打包的时候把静态资源进行gzip压缩,大大减轻了服务器压缩gzip的压力,大大减少传输时间
具体可以参考这个: node.js koa2 如何使用gzip
二.webapck打包使用contenthash
webpack
中对于输出文件名可以有三种hash值:
- hash
- chunkhash
- 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
天的强缓存
app.use(
staticCache(path.join(__dirname, ‘..‘, ‘dist‘), {
maxAge: 10 * 24 * 60 * 60,
}),
);
对于没修改的文件,强缓存会生效,对于修改的文件,由于contenthash
改变了 所以对应资源的路径也变了,所以就不走缓存了