webpack 的 commonChunkPlugin

当我们开发前端应用时，如果不对代码进行优化，可能会发现应用加载时间很长、带宽消耗大等问题。为了解决这些问题，Webpack提供了很多工具和插件，其中之一就是 commonChunkPlugin。

什么是 commonChunkPlugin？

commonChunkPlugin 是 Webpack 提供的一个插件，可以将多个入口chunk中相同的 module 提取出来，生成一个公共的 chunk。这个公共 chunk 就可以被多个入口chunk 共享，从而减少 bundle 文件的大小，提高加载速度。

commonChunkPlugin 的使用

首先，我们需要在 webpack.config.js 中导入插件：

const webpack = require('webpack')

然后，在 plugins 中配置插件：

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    // name 参数指定公共 chunk 的名称
    name: 'common',
    // chunks 参数可以是 entry 的名称，也可以是数组，表示需要选取公共部分的 chunk
    chunks: ['entry1', 'entry2']
  })
]

上面的配置中，我们选择将 entry1 和 entry2 中的公共部分提取成一个名为 common 的chunk，并将它加入到每个 entry 的依赖中。

示例代码

我们来看一个简单的示例，假设我们有两个入口文件 entry1.js 和 entry2.js，它们都会引用 jquery 这个 module，我们可以将这个 module 提取出来，并生成一个公共的 chunk。

// entry1.js
import $ from 'jquery'
console.log('entry1')

// entry2.js
import $ from 'jquery'
console.log('entry2')

我们的 webpack.config.js 中配置 commonChunkPlugin：

const webpack = require('webpack')
module.exports = {
  entry: {
    entry1: './src/entry1.js',
    entry2: './src/entry2.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      chunks: ['entry1', 'entry2']
    })
  ]
}

然后，我们运行 webpack，生成的结果如下：

./dist
├── entry1.js
├── entry2.js
└── common.js

我们可以看到，webpack 生成了 entry1.js、entry2.js 和 common.js 三个文件，其中 common.js 中包含了 jquery 这个 module，entry1.js 和 entry2.js 都引用了 common.js 中的 module，这样就避免了重复加载和解析 jquery 模块。

总结

Webpack 的 commonChunkPlugin 可以帮助我们将多个入口chunk 中的公共部分提取出来，生成一个公共的 chunk。这样可以减少 bundle 文件的大小，提高加载速度。在实际项目开发中，常常会用到这个插件，它也是提高应用性能的重要手段之一。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65af3a0dadd4f0e0ff8a3db1