webpack 长缓存优化

作者: 海之深处爱之港湾 | 来源:发表于2019-03-19 15:01 被阅读0次

什么是长缓存long time cache

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

为什么需要长缓存?

怎么做?

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

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

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

总结

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

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

相关文章

  • webpack 长缓存优化

    什么是长缓存long time cache 为什么需要长缓存? 怎么做? 场景: 改变app代码,vendor变化...

  • webpack优化-缓存

    解决方案 生成manifest文件 每次构建时,webpack 生成了一些 webpack runtime 代码,...

  • 缓存优化

    缓存优化的基本原理 Webpack 4 内置了压缩插件 TerserWebpackPlugin,且默认开启了缓存参...

  • webpack

    用于webapp。 webpack 打包优化。选项去优化项目。 减少HTPP请求,减少请求文件,希望使用缓存让我们...

  • webpack 解读

    关于 webpack 打包性能优化的话题说过很多了。除了基本的 babel 缓存, common chunk 抽取...

  • 性能优化+打包构建

    性能优化 webpack-bundle-analyzerwebpack构建优化webpack分包webpack g...

  • nginx优化

    nginx优化并发优化长连接压缩静态缓存一、并发优化nginx工作模式:主进程+工作进程 启动工作进程数量work...

  • webpack - 项目优化

    Webpack学习笔记webpack - 项目优化webpack实现原理webpack - loaderwebpa...

  • webpack实现原理

    Webpack学习笔记webpack - 项目优化webpack实现原理webpack - loaderwebpa...

  • webpack - 项目优化2

    Webpack学习笔记webpack - 项目优化webpack实现原理webpack - loaderwebpa...

网友评论

    本文标题:webpack 长缓存优化

    本文链接:https://www.haomeiwen.com/subject/wcggmqtx.html