鍍金池/ 問答/HTML/ webpack3 的async chunk 是什么意思

webpack3 的async chunk 是什么意思

下面這段文檔，看了半天，沒理解說的是啥意思
這個(gè)和sync在瀏覽器的加載表現(xiàn)上有啥區(qū)別呢?

async: boolean|string,
// 如果設(shè)置為 true，一個(gè)異步的 公共chunk 會(huì)作為 options.name 的子模塊，和 options.chunks 的兄弟模塊被創(chuàng)建。
// 它會(huì)與 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.
回答
編輯回答
墻頭草

帶有async的配置是提取async chunk中公用模塊的，注意是async模塊中的公用模塊（實(shí)驗(yàn)得出的結(jié)論，不一定準(zhǔn)）。
假如我有兩個(gè)異步路由a.js和b.js，它們都用了c.js，正常情況下是會(huì)將c打包兩遍，出兩個(gè)包a.chunk和b.chunk，配置了async，設(shè)置合理規(guī)則（minChunks）后，會(huì)單獨(dú)的打包出c.chunk，然后a和b只做對(duì)c的請(qǐng)求，而不打包c(diǎn)的代碼。

async在webpack中的概念和html中的不一樣。script標(biāo)簽的異步也是會(huì)在頁(yè)面解析的時(shí)候下載的，但是異步執(zhí)行（相對(duì)于html解析），webpack的async就是正常的滿足代碼邏輯的時(shí)候下載并執(zhí)行（進(jìn)入頁(yè)面時(shí)，如果沒有觸發(fā)邏輯，則根本不存在，是相對(duì)于業(yè)務(wù)邏輯）。

參考：Webpack 大法之 Code Splitting

2018年9月1日 05:08