为什么要使用代码分割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中会消失。