Webpack中require.context的默认'sync'模式具体作用是什么？

sync 是 require.context 专属的默认模式，动态import的webpackMode列表里找不到它很正常——毕竟动态import本身是异步API，天生不可能支持同步返回的逻辑。这个模式的具体规则可以拆成几点：

• 打包阶段：所有符合context匹配规则的模块，会被全部收集后直接打进当前引用require.context的chunk，不会拆分出任何独立的懒加载chunk，页面加载当前chunk的时候这些模块就已经随包带过来了，运行时不会发额外的网络请求去拉模块。
• 调用逻辑：这个模式下require.context返回的函数是纯同步的，传模块路径调用它的时候，不会返回Promise，直接返回对应模块的导出内容，和写普通的静态require()引入模块的行为完全一致。所有匹配到的模块会在当前chunk初始化的时候就完成解析执行，调用函数取模块的时候直接拿现成的结果就行，没有任何异步等待的成本。
• 和同API下其他模式的核心区别：
  • 对比lazy/lazy-once：这两个模式会把匹配的模块拆成独立的懒加载chunk，调用的时候才会触发网络请求，返回Promise；sync不拆包，同步返回结果。
  • 对比eager：eager虽然也不拆包、不发额外请求，但它是给异步import设计的，调用的时候还是会返回一个已经完成状态的Promise，而且模块是等调用import的时候才会执行；sync模式下模块在chunk初始化阶段就执行完成，调用的时候直接返回导出内容，没有Promise包装。
  • 对比weak：weak模式不会主动加载模块，只有模块已经被其他路径加载过的情况下才能解析成功，不然就直接返回失败状态；sync会主动把所有匹配模块打进当前包，不依赖其他加载路径。

适用场景 #

sync作为默认模式，最适合不需要懒加载的批量模块引入场景：比如全局批量注册前端组件、批量引入目录下的工具函数、批量加载本地静态资源的配置映射等等，这些场景下需要直接同步拿到模块内容，不需要异步等待，用默认的sync就对了。实际上require.context最早设计出来就是为了解决同步批量引入模块的需求，后面加的lazy、eager这些模式，都是后来为了对齐动态import的能力补上的扩展选项。

内容的提问来源于stack exchange，提问作者Alexey Romanov