webpack 代码拆分：是否提供浏览器缓存答案

【问题标题】：webpack code splitting: does it provide browser cachingwebpack 代码拆分：是否提供浏览器缓存
【发布时间】：2019-05-14 15:15:10
【问题描述】：

当我们使用延迟加载来下载特定的 web 模块时，例如：

import('./polyfills').then(render);

浏览器是否会缓存这些动态加载的文件，webpack 是否会在后续请求中使用缓存的版本？

通过捆绑拆分，我知道浏览器会缓存加载的文件；我认为这对于代码拆分应该是相同的，但我不确定。

【问题讨论】：

标签： javascript webpack

【解决方案1】：

Cache-Control 响应标头指定是否可以缓存资源以及可以缓存多长时间。您的服务器负责设置它。

当 webpack 生成的代码遇到动态导入时，它会获取并执行它。只要页面没有关闭/重新加载，并且当再次遇到相同的导入时，这些内存中的绑定就会被使用（模块不会被重新获取或再次执行），那么模块所公开的任何内容都是可用的。

【讨论】：

所以当用户再次访问该站点时，动态获取的组件不会被缓存。听起来不是那么好，我不明白代码拆分有什么问题。除非我遗漏了什么，否则捆绑拆分听起来更有用。浏览器预见到缓存，然后代码拆分取消了非常短期的好处（即它仅限于第一个初始页面加载）。
@Trace 是的，这样做的好处是您可以获得更快的初始页面加载，但动态模块可以在您进行捆绑拆分时以与代码块相同的方式缓存，因此后续访问使用缓存资源（基本上，您以较慢的站点段之间的初始导航为代价更快地获得站点的初始 TTI）。捆绑拆分可防止用户重新下载整个捆绑包，即使您进行了少量代码更改。它们可以一起使用。
但这与您在回答中所写的内容相矛盾：Whatever is exposed by the module is then available as long as the page isn't closed/reloaded and when the same import is encountered again those in-memory bindings are used (the module isn't refetched or executed again). 所以在您的评论中您提到您可以缓存这些块。那么它是哪一个？有什么资源可以证实这一点吗？我的意思是缓存是在页面重新加载后缓存的上下文中，而不是在内存中。
@Trace 浏览器可以像任何其他资源一样缓存动态块（这只是一个 js 文件）（由 Cache-Control 标头引导） - 它与 webpack 或 javascript 无关，但它是受控的由设置标头的服务器。 webpack runtime 处理动态导入，就像我在回答中描述的那样：当再次遇到时，它不会向浏览器询问导入的模块，而是使用它已经创建的内存绑定（可以认为是 @987654325 @类似于节点模块缓存）。