典型的应用程序使用第三方库来满足框架/功能需求。 我们会使用这些库的特定版本，并且不会经常变动。 但是，另一方面应用程序代码却频繁更改。
将第三方代码捆绑在应用程序是低效的。 因为浏览器可以基于缓存头，缓存允许被缓存的资源文件，在其内容不更改的情况下不需要再次调用cdn。 利用这一点，不管应用程序代码如何变化，我们希望保持第三方文件的哈希值恒定。
只有当我们单独打包第三方包和应用程序代码的包，我们才能做到这一点。
让我们来看一下这个示例程序 momentjs, 一个常用的时间格式化库。
如下所示，在你的应用里面安装moment 。
npm install --save moment
在 index文件中require moment作为依赖，并且输出当前时间，如下所示：
index.js
var moment = require('moment');
console.log(moment().format());
我们可以利用webpack和如下配置将你的应用打包
webpack.config.js
var path = require('path');
module.exports = function(env) {
return {
entry: './index.js',
output: {
filename: '[chunkhash].[name].js',
path: path.resolve(__dirname, 'dist')
}
}
}
在应用程序中运行 webpack , 如果你检查运行的结构包, 你会发现 moment和index.js 已经打包进了bundle.js.
这并不是理想效果。如果index.js中的代码变动,那么接下来整个包都将重新构建 。 浏览器将必须加载新构建出来包的副本，即使它的大部分没有改变。
多入口
让我们尝试优化一下，为moment 增加一个单独的入口点，命名为vendor
webpack.config.js
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 ,我们可以看到创建了两个包 。如果你检查这两个包，你会发现 moment的代码在两个包中都存在!
正是由于这个原因, 我们需要运用插件 CommonsChunkPlugin.
CommonsChunkPlugin
这是一个非常复杂的插件。 它让我们可以从不同的包中提取所有公共模块，并将它们添加到公共包。 如果公共包不存在，那么将创建一个新包做为公共包。
我们可以通过修改webpack的配置如下，来使用CommonsChunkPlugin 插件
webpack.config.js
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 . moment代码就仅存在于vendor包中了.
隐式通用vendor块
你可以配置一个CommonsChunkPlugin实例只接受vendor库。
webpack.config.js
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;
}
})
]
};
}
清单文件
但是，如果我们现在更改应用程序代码，并再次运行 webpack, 我们看到vendor文件的hash值改变了. 即便我们实现了为vendor包·和main包 单独打包,我们依然可以看到当应用程序代码变更时vendor 包依然发生了变化 。
这意味着，我们仍然没有利用到浏览器缓存，因为vendor文件的hash值在每次构建中都会更改，这导致浏览器必须重新加载文件。
我们现在面临的问题是，在每次构建中，webpack会生成一些webpack运行时代码，这有助于webpack的工作。 当只有单个包时，运行时代码会保留在包中。 但是当生成多个bundle时，运行时代码会被提取到公共模块中，就是我们的“vendor”文件。
为了阻止这样的事情发生，我们需要将运行时代码提取到一个单独的清单文件. 即便我们会有额外的开销——创建另一个包，但是相较于‘vender’文件长期缓存的优势，这明显利大于弊。
webpack.config.js
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.
})
]
}
};
基于以上的webpack配置，我们可以看到生成了三个包，分别是：vendor, main 和manifest .
注意，长期包缓存是通过哈希策略“chunkhash”实现的。学习更多caching.
下一篇：CSS的代码分离
网友评论