webpack中bundle、chunk、module的區別

webpack

Webpack Glossary
  1. bundle

    Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.

    譯:Bundle:由許多不同的modules生成,包含了源碼處理後的最終版本——源碼被加載和編譯處理;

  2. chunk

    Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child). Typically, chunks directly correspond with the output bundles however, there are some configurations that don’t yield a one-to-one relationship.

    譯:chunk:該webpack專業術語用於webpack內部管理bundling的過程中。bundles由許多的chunks組成——這些chunk有不同的類型(比如entrychild)。通常,chunks直接與bundles相對應。然而,有一些配置可以使其不是一對一的關係;

  3. module

    Module: Discrete chunks of functionality that provide a smaller surface area than a full program. Well-written modules provide solid abstractions and encapsulation boundaries which make up a coherent design and clear purpose.

    譯:module:非連續的功能塊——提供了更小的表面積而不是整個程序。書寫良好的modules提供了可靠的抽象及封裝邊界,組成了統一的設計和清晰的目的;

結合stackoverflow釋疑

modulewebpack支持解析的模塊;
chunk包含多個module,存在於webpack處理過程中的階段;
bundle包含一個或多個chunk,是源碼經過webpack處理後的最終版本;

The distinction is useful when talking about webpack processes as they are occuring. As modules are chunked together, they can change significantly (especially during plugin processing), so it isn’t accurate to call them bundles at that point, the chunks may not even be emitted as bundles in the final output! Then after webpack is finished it is useful to have a term to refer to all of the emitted, final files (bundles).

譯: 這樣的區分對於描述webpack的處理過程是有幫助的。由於多個module被組合爲一個chunk,他們能夠有效地改變(尤其是在插件處理過程中),所以這個時間節點把它們稱爲bundle並不準確,而且這些chunks可能不會稱爲最終輸出中的bundles!當webpack處理結束後,有必要使用一個術語去表示它的最終輸出文件(bundles

析: 這裏應該是——所以這個時間節點把它們稱爲module並不準確;module通常是與源碼相關的,webpack將多個module合併爲一個chunk,然後進行統一處理有助於提高效率,比如統一進行babel轉移等插件操作,所以webpack處理過程中使用了術語chunk表示這些文件;由於不是所有的chunks都會稱爲最終的輸出文件,所以又定義了一個新的術語——bundle


參考文獻

  1. Webpack Glossary
  2. stackoverflow
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章