webpack 长缓存优化

什么是长缓存long time cache

   用户从访问网页开始，浏览器向服务器下载请求，服务器返回请求的时候，通过控制http协议的这些响应头，告诉浏览器某些资源以内的是强缓存，不用更新它。
   最主要的目的：如果代码有更新，版本号发生变化，则这段代码需要更新的代码。如果已经被浏览器缓存，用户希望获取缓存代码。只更新改变的代码。

为什么需要长缓存？

怎么做？

场景： 改变app代码，vendor变化
解决：
　　　提取vendor，分别打包
　　　hash -> chunkhash
　　　提取webpack runtime

场景：引入新的模块，模块顺序发生变化，vendor hash变化
解决：
　　　NamedChunksPlugin
　　　NamedModulesPlugin

场景：动态引入模块，veodor hash变化
解决：
　　　动态模块给定模块名称

总结

 　 独立打包 vendor
　  抽出manifest(webpack runtime)
 　 使用NamedChunksPlugin
 　 使用NamedModulesPlugin
　  动态模块给定模块名称

通过以上方式，在我们打包第三方代码的时候或者打包公用代码的时候可以尽可能的长缓存。不再发生变化，使浏览器享受到长缓存，既而访问速度变得更快。