代碼分割（code splitting）

前言

由於在學習webpack的過程當中對於chunk（語塊）很有疑惑，所以翻譯了webpack官方文檔中的這邊文章文章傳送門

正文

對於大的web應用來說，將全部的代碼都放在一個文件中顯然是不夠有效的，特別是當你的某些代碼塊是在某些特殊的時候纔會被使用到。webpack有一個功能就是將你的代碼庫分割成chunks（語塊），當代碼運行到須要它們的時候再進行加載。（問題：如何在代碼分割的時候判斷哪些是須要按需加載的呢）這在其餘的打包工具中將這些chunks成爲layers，rollups或者是fragments。這種特性被叫作代碼分割（code splitting）。

代碼分割的這個特性是可選的，你能夠在你的代碼庫中定義具體的分割點。webpack能夠處理依賴庫，輸出文件和運行時的東西。

接下來咱們澄清一個廣泛的誤解：代碼分割不是僅僅將相同的代碼抽出到一個可共享的chunk中。更值得關注的特性是：代碼分割能夠被用來將代碼分割到一個能夠按需加載的語塊中。這可使得初始下載的代碼更小，以及能夠在應用程序須要的時候才加載相應的代碼。

定義分割點

AMD和CommonJs規範了不一樣的按需加載代碼的方法。

CommonJs: require.ensure

require.ensure(dependencies, callback)

require.ensure方法確保了在dependencies中的每個依賴均可以在調用回調函數的時候被同步加載。所以在實現上被依賴的函數做爲一個參數傳遞給回調函數。
使用栗子以下：

require.ensure(["module-a", "module-b"], function() {
  var a = require("module-a");
  // ...
});

AMD: require

在AMD的規範中定義了一個異步的require方法，以下：

require(dependencies, callback)

當調用的時候，全部的依賴將會被異步加載，加載完成以後調用回調函數。
使用栗子以下：

require(["module-a", "module-b"], function(a, b) {
  // ...
});

ES6 Modules

注意webpack是不支持ES6的模塊語法的；可是能夠經過諸如Babel的轉換器將ES6中的import語法轉換爲CommonJs或者AMD中的模塊（modules）語法。

(待續)