典型的应用程序使用第三方库来满足框架/功能需求。 我们会使用这些库的特定版本，并且不会经常变动。 但是，另一方面应用程序代码却频繁更改。

将第三方代码捆绑在应用程序是低效的。 因为浏览器可以基于缓存头，缓存允许被缓存的资源文件，在其内容不更改的情况下不需要再次调用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的代码分离