详解Webpack抽离第三方类库以及common解决方案

Webpack是前端工程化中不可避免的一环，它可以将我们项目中的各种资源进行打包和压缩，使得项目的性能得到有效优化。其中webpack从v4开始，废弃了CommonsChunkPlugin插件，提供了新的功能：SplitChunksPlugin。它可以帮助我们更好的抽离第三方类库以及项目中常用模块。下面我们来详细讲解如何进行配置。

抽离第三方类库

Webpack打包出来的文件体积往往非常大，尤其是项目代码与第三方类库打包到同一个文件里面时，造成了巨大的体积浪费。因此，我们可以采用配置optimization的splitChunks选项来抽离第三方类库。

optimization: {
  splitChunks: {
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

• test: 匹配出需要抽离的模块。在当前例子中，test的值设置为/[\/]node_modules[\/]，意味着抽离所有的node_modules中的模块。
• name: 抽离出来的模块的名称，通常是一些第三方模块，本例中我们将其命名为vendors。
• chunks：表示在哪些范围内进行抽离，包括'all', 'initial', 'async'，分别对应全部抽离，同步抽离和异步抽离。

在webpack.config.js文件中加入以上配置后，Webpack就会在构建过程中自动将所有的第三方类库抽离到vendors.js文件中，而不是与我们的项目代码混在一起。

Common解决方案

在一些场景下，我们可能会发现一些非第三方的公共代码模块也被重复打包了多次，如何将这些公共代码模块也进行抽离呢？Webpack也提供了一种常用解决方案，也是利用optimization的splitChunks选项来实现。具体配置如下：

optimization: {
  splitChunks: {
    chunks: 'async',
    minSize: 30000,
    maxSize: 0,
    minChunks: 3,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    cacheGroups: {
      commons: {
        name: 'commons',
        chunks: 'initial',
        minChunks: 2
      }
    }
  }
}

• chunks: 需要抽离公共代码的范围。在此例子中，我们只需要抽离异步加载的代码（chunks: 'async'）
• minChunks: 模块至少被几个被引用（import）的模块使用的情况下才能被单独的打包为一个文件（默认为1）。
• name: 抽离出来的模块的名称, 在此例子中，我们抽离出来的公共模块将被命名为commons。

利用以上配置，Webpack就可以自动将公共代码进行抽离，与第三方类库一样，也就实现了公共代码的单独打包，最终提高了整个项目的性能。

示例说明：

以react项目为例，我们在webpack.config.js文件中配置以下内容：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        },
        commons: {
          name: 'commons',
          chunks: 'async',
          minChunks: 2
        }
      }
    }
  }
}

可以看到，我们在optimization中同时配置了抽离第三方类库和公共代码。启动Webpack进行打包后，我们会发现在dist文件夹下生成了三个文件：bundle.js、commons.js和vendors.js，其中bundle.js为我们项目代码，commons.js为我们抽离出来的公共代码文件，vendors.js则是我们抽离出来的第三方类库文件。