webpack的code spliting与chunks

为什么要使用代码分割code spliting？

对于一个大型项目而言，将所有代码打包进一个文件可能会导致打包后的文件非常大（虽然减少了请求次数,单个文件过大会导致阻塞）,而且有些代码只是在某些情况下是必需的，这就导致了效率低下。webpack有一个code spliting的特性，它可以将你的代码库分割成按需加载的块(chunks)。

怎么定义了一个分割点split point

AMD和commonJS指定不同的方法去做代码的按需加载。它们都支持代码分隔并充当分割点:

commonJS

require.ensure(dependencies, callback);
require.ensure确保当执行回到函数callback的时候，dependencies中的每个依赖都能被同步的引用。callback中的参数是require。
示例：

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

AMD

require(dependencies, callback)
AMD规范的分割点的定义使用异步的require方法，当调用时，所有依赖会被加载，回调函数callback中的参数是dependencies的输出。
示例：

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

Note:在webpack中模块是从左至右加载的。

ES6 modules

webpack不支持ES6 modules，但可以依据你的转换器所创建的模块格式决定使用require.ensure 或require
示例：

//static imports
import _ from 'lodash'

// dynamic imports
require.ensure([], function(require) {
  let contacts = require('./contacts')
})

代码块中的内容chunk content

所有分割点中的依赖dependencies都会放进一个新的代码块（new chunk）中。依赖dependencies还可以递归添加。
示例：

var b = require("./b");
require.ensure(["./a","./c"], function(require) {
    require("./b").xyz();
    var d = require("./d");
    var c=require('./c');
    console.log('c:',c);
    console.log('d:',d);
});

如上述代码，a,b,c,d分别代表四个模块，webpack打包后，会生成一个主bundle，和一个代码块文件chunk,在chunk中包含了a,c,d三个模块。

chunk的优化

如果两个chunk含有相同的模块，它们会合并成一个（这就不会导致chunks有多个父级块）；
如果一个chunk中的某个模块，在所有父级块中都是可用的，这个模块会从这个chunk中删除；
如果一个chunk包含了另一个chunk的所有模块，这个chunk将会存储起来。

chunk的加载

chunks是根据configuration的target属性来决定其加载的，比如，当target为‘web’时，chunks是通过jsonp加载的。

chunk类型

• entry chunk
• normal chunk
• initial chunk(no-entry)

入口块（entry chunk）

含有一系列模块，这些模块有运行，那么这个chunk就是一个entry chunk。

普通块（normal chunk）

含有一系列模块，这些模块只是引入进来了，但并没有运行，那么这个chunk就是一个normal chunk。

初始块 Initial chunk (non-entry)

Initial chunk也属于normal-chunks，唯一不同的是它计入初始加载时间。这种类型可以与CommonsChunkPlugin结合使用。

分割程序代码与第三方库代码Split app and vendor code

将项目分割成两个文件:比如app.js和vendor.js,你可以在vendor.js中引入第三方代码库（vendor files），然后传递这个chunk的name（vendor）给CommonsChunkPlugin，如下所示：

var webpack = require("webpack");

module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["jquery", "underscore", ...],
  },
  output: {
    filename: "bundle.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
  ]
};

以上这样的配置，会从app chunk中移除那些在vendor chunk中引入的模块。bundle.js中只有程序代码，外部库代码在vendor.bundle.js中。在你的html页面中，先加载vendor.bundle.js

<script src="vendor.bundle.js"></script>
<script src="bundle.js"></script>

多入口块 multiple entry chunks

可以设置多个入口点，这会导致多个入口块。入口块只能有一个运行时间。

运行多入口点

使用CommonsChunkPlugin时，运行时间（runtime）被移动到公共块。这时入口点在初始块（initial chunk）中，然而只能加载一个initial chunk，可以加载多个入口块entry chunks，这显示了在一个单页中运行多入口点的可能性。
示例：

var webpack = require("webpack");
module.exports = {
    entry: { a: "./a", b: "./b" },
    output: { filename: "[name].js" },
    plugins: [ new webpack.optimize.CommonsChunkPlugin("init.js") ]
}

公用块commons chunk

CommonsChunkPlugin能够将出现在mutilple entry chunks中出现的模块移动至一个新的chunk（commons chunk）中，runtime也一并移动至commons chunk中，这意味着原来的entry chunks现在是initial chunks了。

优化

有优化插件，可以根据特定的标准合并块。
* LimitChunkCountPlugin
* MinChunkSizePlugin
* AggressiveMergingPlugin

命名块Named chunks

require.ensure接受第三个参数，这个参数必须是个字符串，如果两个分给点传递了相同的字符串，它们会使用相同的chunk。

require.include

require.include(request)

require.include是一个webpack特定的函数，这个函数添加一个模块至现在的chunk中，但不执行它。
示例：

require.ensure(["./file"], function(require) {
  require("./file2");
});

// is equal to

require.ensure([], function(require) {
  require.include("./file");
  require("./file2");
});

如果一个模块出现在多个子chunks中，require.include引入的模块，在子chunks中会消失。