如何通过webpack实现静态资源缓存策略？

本文共计2155个文字，预计阅读时间需要9分钟。

目录+引言+分区+几种不同的hash+实现JS缓存的策略+CommonsChunkPlugin不正确使用+引发问题的原因+实现CSS的缓存+实现图片/字体的缓存+参考+引言+hash+chunkhash+contenthash+实现JS缓存+CommonsChunkPlugin不正确使用+引发问题的原因+实现CSS的缓存+实现图片/字体的缓存+参考

目录

• 引言
• 区分一下几种不同的hash
• hash
• chunkhash
• contenthash
• 实现js缓存
• CommonsChunkPlugin不正确用法
• 引起问题的原因
• 实现css的缓存
• 实现图片/字体的缓存
• 参考

引言

静态资源缓存是前端性能优化的一个点，所以在前端开发过程中，一般会最大限度的利用缓存（这里主要是强缓存）。回到本文主题，在使用webpack构建的项目中，稍有不慎的话，即使服务器设置了缓存策略，可能构建的项目无法实现静态资源缓存。那么webpack怎样才能达到使用缓存的效果呢，下面就来谈谈这个问题。