webpack 的 CommonsChunkPlugin 详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用到 webpack 这个工具来打包和管理我们的代码。而在 webpack 中，有一个非常重要的插件，那就是 CommonsChunkPlugin。它可以帮助我们将公共的代码提取出来，避免代码重复，从而提高整个应用的性能。

本文将详细介绍 CommonsChunkPlugin 的使用方法，包括它的基本概念、配置方法、注意事项等，同时也会提供一些示例代码，帮助读者更好地理解。

什么是 CommonsChunkPlugin？

CommonsChunkPlugin 是 webpack 的一个插件，主要用于提取公共的代码块。当我们的应用中存在多个入口文件时，这些文件之间可能存在一些公共的代码，如第三方库、工具函数等。如果我们不加以处理，这些公共的代码会被打包进每个入口文件中，导致代码冗余，浪费带宽和加载时间。

而 CommonsChunkPlugin 的作用就是将这些公共的代码提取出来，形成一个单独的文件，这样每个入口文件只需要引用这个公共文件即可，避免了代码重复，提高了应用的性能。

如何使用 CommonsChunkPlugin？

在 webpack 中，使用 CommonsChunkPlugin 非常简单，只需要在配置文件中添加如下代码即可：

// www.javascriptcn.com code example
const webpack = require('webpack');

module.exports = {
  // 入口文件
  entry: {
    app: './src/app.js',
    vendor: ['react', 'react-dom'],
  },
  // 输出文件
  output: {
    path: __dirname + '/dist',
    filename: '[name].js',
  },
  // 插件配置
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.js',
    }),
  ],
};

上面的代码中，我们首先定义了两个入口文件 app.js 和 vendor.js，其中 vendor.js 中包含了两个第三方库 react 和 react-dom。然后，我们在插件配置中使用了 CommonsChunkPlugin，将 vendor.js 中的公共代码提取出来，形成一个单独的文件 vendor.js。

这样，当我们打包应用时，就会生成两个文件 app.js 和 vendor.js，其中 app.js 中只包含应用代码，而 vendor.js 中则包含了公共的第三方库，这样就避免了代码重复，提高了应用的性能。

CommonsChunkPlugin 的配置项

除了上面的示例代码外，我们还可以对 CommonsChunkPlugin 进行更加详细的配置，以满足不同的需求。下面我们将对 CommonsChunkPlugin 的配置项进行详细介绍。

name

用于指定要提取的公共代码块的名称。如果我们有多个入口文件，可以将它们的公共代码块提取出来形成一个单独的文件，这个文件的名称就是 name 参数指定的名称。

filename

用于指定提取出来的公共代码块的文件名。如果我们不指定这个参数，则默认会将公共代码块打包到入口文件中。

minChunks

用于指定一个模块被多少个入口文件共享时，才会被提取出来形成公共代码块。如果我们设置这个参数为 2，则只有当两个或两个以上的入口文件共享同一个模块时，这个模块才会被提取出来形成公共代码块。默认值为 1，表示只要有任意一个入口文件引用了这个模块，它就会被提取出来。

chunks

用于指定哪些入口文件需要提取公共代码块。如果我们不指定这个参数，则默认会将所有入口文件中的公共代码块提取出来。

children

用于指定是否将子模块中的公共代码块也提取出来。如果我们设置这个参数为 true，则会将子模块中的公共代码块也提取出来，否则只会提取当前模块中的公共代码块。默认值为 false。

async

用于指定是否将异步加载的模块也提取出来形成公共代码块。如果我们设置这个参数为 true，则会将异步加载的模块中的公共代码块也提取出来，否则只会提取同步加载的模块中的公共代码块。默认值为 false。

注意事项

虽然 CommonsChunkPlugin 提供了非常方便的公共代码提取功能，但是在使用时我们也需要注意一些事项，以免出现意外情况。

顺序问题

在使用 CommonsChunkPlugin 时，我们需要注意插件的顺序问题。通常情况下，我们需要将 CommonsChunkPlugin 放在其他插件的前面，以确保它能够正确地提取公共代码块。

模块路径问题

在使用 CommonsChunkPlugin 时，我们还需要注意模块路径问题。如果我们的应用中存在多个模块路径，可能会导致 CommonsChunkPlugin 无法正确地提取公共代码块。为了避免这种情况，我们可以在配置文件中使用 resolve.alias 属性来指定模块路径，以确保 CommonsChunkPlugin 能够正确地提取公共代码块。

示例代码

最后，我们提供一些示例代码，帮助读者更好地理解 CommonsChunkPlugin 的使用方法。

提取所有入口文件中的公共代码块

// www.javascriptcn.com code example
const webpack = require('webpack');

module.exports = {
  // 入口文件
  entry: {
    app1: './src/app1.js',
    app2: './src/app2.js',
    app3: './src/app3.js',
  },
  // 输出文件
  output: {
    path: __dirname + '/dist',
    filename: '[name].js',
  },
  // 插件配置
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      filename: 'common.js',
    }),
  ],
};

上面的代码中，我们定义了三个入口文件 app1.js、app2.js 和 app3.js，它们之间存在一些公共的代码。然后，我们使用 CommonsChunkPlugin 将这些公共代码提取出来，形成一个单独的文件 common.js。

提取指定入口文件中的公共代码块

// www.javascriptcn.com code example
const webpack = require('webpack');

module.exports = {
  // 入口文件
  entry: {
    app1: './src/app1.js',
    app2: './src/app2.js',
    app3: './src/app3.js',
  },
  // 输出文件
  output: {
    path: __dirname + '/dist',
    filename: '[name].js',
  },
  // 插件配置
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      filename: 'common.js',
      chunks: ['app1', 'app2'],
    }),
  ],
};

上面的代码中，我们指定了只提取 app1.js 和 app2.js 两个入口文件中的公共代码块，而 app3.js 中的公共代码块不会被提取。

提取指定模块中的公共代码块

// www.javascriptcn.com code example
const webpack = require('webpack');

module.exports = {
  // 入口文件
  entry: {
    app1: './src/app1.js',
    app2: './src/app2.js',
    app3: './src/app3.js',
  },
  // 输出文件
  output: {
    path: __dirname + '/dist',
    filename: '[name].js',
  },
  // 插件配置
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      filename: 'common.js',
      minChunks: 2,
    }),
  ],
};

上面的代码中，我们指定了只有当一个模块被两个或两个以上的入口文件共享时，才会被提取出来形成公共代码块。这样，只有那些真正的公共模块才会被提取出来，避免了代码冗余。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d0e90ba941bf71341f1218

webpack 的 CommonsChunkPlugin 详解