bundle vs chunk
bundle 由許多不同的模塊生成,包含對源文件編譯后的最終版本。
2. Chunk
chunk 是 webpack 的特定術(shù)語,在內(nèi)部用于管理捆綁過程。輸出 bundle 由 chunk 組成,其中有幾種類型(例如 entry 和 child )。通常,塊(chunk)與 輸出束 (bundle)一一對應(yīng),但是,有些配置不會產(chǎn)生一對一的關(guān)系。
舉個例子:
使用 Code Splitting 進行代碼分割時,Webpack 將生成多個 chunk,并將它們合并成一個或多個最終的輸出 bundle。這些 chunk 可能來自多個入口點,或者是異步加載的結(jié)果,因此輸出 bundle 和 chunk 之間就不是一對一的關(guān)系了。
或者使用 import() 動態(tài)導(dǎo)入時,Webpack 可能會根據(jù)需要生成一些額外的 chunk,然后在運行時動態(tài)加載這些 chunk。這些 chunk 也不會與 bundle 一一對應(yīng)。
2.1 Entry Chunk
是 Webpack 打包時指定的入口文件所生成的 chunk,它包含了所有的應(yīng)用程序代碼。如果有多個入口文件,則會生成多個 entry chunk。
2.2 Child Chunk
是由 Entry Chunk 生成的子 chunk,也可以是由其他 Child Chunk 經(jīng)由代碼分割(Code Splitting)生成的子 chunk。Child Chunk 通常是異步加載的,它們包含了應(yīng)用程序中的一部分代碼,且在某些情況下可能被多個 Entry Chunk 共享。在 Webpack 打包時,Child Chunk 會被合并到 Entry Chunk 中,最終生成輸出文件(bundle)。
參考
- ChatGPT
- https://webpack.docschina.org/glossary/
