代码分割（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）语法。

(待续)