webpack3 的async chunk 是什么意思

下面这段文档,看了半天,没理解说的是啥意思
这个和sync在浏览器的加载表现上有啥区别呢?

async: boolean|string,
// 如果设置为 true,一个异步的 公共chunk 会作为 options.name 的子模块,和 options.chunks 的兄弟模块被创建。
// 它会与 options.chunks 并行被加载。
// Instead of using option.filename, it is possible to change the name of the output file by providing
// the desired string here instead of true.
阅读 2.9k
1 个回答

带有async的配置是提取async chunk中公用模块的,注意是async模块中的公用模块(实验得出的结论,不一定准)。
假如我有两个异步路由a.js和b.js,它们都用了c.js,正常情况下是会将c打包两遍,出两个包a.chunk和b.chunk,配置了async,设置合理规则(minChunks)后,会单独的打包出c.chunk,然后a和b只做对c的请求,而不打包c的代码。


async在webpack中的概念和html中的不一样。script标签的异步也是会在页面解析的时候下载的,但是异步执行(相对于html解析),webpack的async就是正常的满足代码逻辑的时候下载并执行(进入页面时,如果没有触发逻辑,则根本不存在,是相对于业务逻辑)。

参考:Webpack 大法之 Code Splitting

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进