Code Splitting - Libraries
文档地址
应用程序一般会使用第三方的类库，这些类库一般不会经常变动。
而我们的业务代码需要随着业务改变经常更新。
webapp为了提升效率，会根据cache header中的参数对文件进行缓存，
文件缓存之后就不需要再从cdn上从新拉去资源了。
为了使用缓存特性，我们需要将vendor文件进行缓存，无论我们的业务代码如何改变，
都不希望重新下载不变的vendor文件。
我们可以通过将代码分离成vendor bundle和application bundle来使用该特性。
单入口配置
不拆分的配置方法，比如我们在应用中使用(momentjs)[https://www.npmjs.com/package/moment],用来格式化时间的js类。
安装moment,https://www.npmjs.com/package/moment.
在index.js中引入moment，并使用其打印当前时间。
//index.js
var moment = require('moment');
console.log(moment().format());
使用如下配置进行打包
var path = require('path');
module.exports = function(env) {
return {
entry: './index.js',
output: {
filename: '[chunkhash].[name].js',
path: path.resolve(__dirname, 'dist')
}
}
}
在运行webpack进行打包之后，分析resulting bundle，会发现moment和index.js被打包到了同一个文件中(bundle.js)。
上面的方案，对于应用来讲，是不完美的，如果index.js代码变了，那涉及到的bundle，都会进行重新编译。浏览器会重新加载所有的bundle，虽然很多bundle没有改变。
多入口配置(Multiple Entries)
将moment同vendor分离，实现更改index.js不影响vendor。
var path = require('path');
module.exports = function(env) {
return {
entry: {
main: './index.js',
vendor: 'moment'
},
output: {
filename: '[chunkhash].[name].js',
path: path.resolve(__dirname, 'dist')
}
}
}
按照上面的配置，运行webpack后，将会生成两个bundle。
查看这两个bundle文件，将会看到两个文件中都包含moment文件。
这是因为moment是主程序(index.js)的依赖.所以两个entry point中都会出现moment.
这样配置没有实现我们的预期。为了解决这个问题，需要使用CommonsChunkPlugin
CommonsChunkPlugin
该plugin有些复杂，使用该plugin可以将不同bundle中的公共模块抽出来放在公用的bundle中。
如果该公用的bundle不存在，会创建一个新的bundle。
使用下面的配置启用CommonsChunkPlugin.
var webpack = require('webpack');
var path = require('path');
module.exports = function(env) {
return {
entry: {
main: './index.js',
vendor: 'moment'
},
output: {
filename: '[chunkhash].[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor' // Specify the common bundle's name.
})
]
}
}
经过上面的配置，执行webpack,查看打包的bundle，moment代码只会存在于vendor bundle。
这样对index.js的修改，就不会导致全部文件进行重新打包了。
Implicit Common Vendor Chunk
可以配置CommonsChunkPlugin仅仅对vendor lib起作用。
var webpack = require('webpack');
var path = require('path');
module.exports = function() {
return {
entry: {
main: './index.js'
},
output: {
filename: '[chunkhash].[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1;
}
})
]
};
}
Manifest File
如果再次运行webpack命令，会看到vendor文件的hash值被改变了。虽然通过配置将vendor同main bundle进行了拆分。
但是我们观察到，当业务代码改变后，vendor bundle也会进行改变。这样我们就仍然无法使用浏览器的缓存功能。
产生这种情况是因为每次构建，webpack都会生成一些webpack的运行时代码(runtime code)，
webpack需要依赖runtime code才能真正的向用户提供访问的内容。
当仅有一个单独bundle时，runtime code会包含与该bundle中。
但是当生成多个bundles时，runtime code会呗抽取到公用的module(此处位vendor文件)
由于是抽取到了vendor中，所以业务代码改变，仍然会影响vendor。
为了避免这个问题，需要将runtime代码拆分到一个单独的manifest文件，
虽然这样做会导致多生成一个bundle文件，但是这样就能使用浏览器的缓存机制了。
具体配置如下
var webpack = require('webpack');
var path = require('path');
module.exports = function(env) {
return {
entry: {
main: './index.js',
vendor: 'moment'
},
output: {
filename: '[chunkhash].[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'] // Specify the common bundle's name.
})
]
}
};
使用上面的配置，将会生成三个bundles，vendor,main,manifest三个bundles。
