Webpack 提取公共模块

较早之前总结过一篇【前端构建】WebPack实例与前端性能优化。

这次打算写几篇对几个重要的知识点进行更详细的总结。本篇是这次 Webpack 相关的第三篇总结，之前的两篇是：
[译]为什么要 Webpack
Webpack 构建后文件变得很大？

啃先生(MrKenniu) | 文

上一篇文章提到我主要从四个方面解决 Webpack 构建后文件太大的问题，总结了 Code Split，即按需加载的技能点。这篇总结提取公共代码。它要解决的问题是冗余代码过多，即同一个模块在多个地方被引用，显然是解决上一篇文章最后遗留的问题。

Webpack 的 CommonsChunkPlugin 插件，负责将多次被使用的 JS 模块打包在一起。

使用&配置项

使用方法：在 webpack config 的 plugins 属性里添加 CommonsChunkPlugin 实例即可。

实例化的配置项「options」如下：

name 或者 names：chunk的名称，如果是 names 数组，则相当于为数组里的每个name 实例化插件。如果缺省，而且 children 或者 asyn 为 true，那么，所有的 chunks 都会被使用。

filename：此 common chunk 的文件名模板，可以与 output.filename 一样

minChunks：通常情况下这是一个整数，表示至少有 minChunks 个 chunk 使用了该模块，该模块才会被挪到公共代码「common chunk」里。minChunks 还可以是 Infinity，意味着将没有任何模块被移入进来，只是创建当前这个 chunk，这通常用来生成 jquery 等第三方代码库。minChunks还可以是一个返回布尔值的函数，返回 true 该模块会被移入 common chunk，否则不会。默认值是 chunks 的长度。

chunks：这是一个元素为 chunk 名称的数组，插件将会从这些 chunks 里提取 common chunks。可见，minChunks 如果是整数，那么它应该小于 chunks 的长度，且大于1。如果缺省，所有的入口 chunks 会被选中。

children：默认false。如果为 true ，相当于上一项 chunks 配置为当前 chunk 的子 chunk，用于 code split。

async：默认false。如果为 true，生成的 common chunk 将会是异步加载的。这个异步的 common chunk 是 name 这个 chunk 的子 chunk，而且跟 chunks 一起并行加载

minSize：如果有指定大小，那么 common chunk 的文件大小至少有 minSize 才会被创建。非必填项。

提示：以上配置项理解起来有些复杂，应结合实际案例运行的结果来理解

CommonsChunkPlugin 能解决的问题

在使用插件前，考虑几个问题：

• 对哪些 chunk 进行提取，这决定了 chunks ，children 和 name 要怎么配置

• common chunk 是否异步，这决定了 async 怎么配置

• common chunk 的粒度，这决定了 minChunks 和 minSize 怎么配置

以下是官方给出的常用的场景：

• 提取两个及两个以上 Chunk 的公共代码

• 将 Code Split 切割出来的 Chunk「就是子 Chunk」，提取到父 Chunk

• 将 Code Split 切割出来的 Chunk，提取到一个新的异步加载的 Chunk

• 提取某个类似 jquery 或 react 的代码库「但是这个用得很少，使用用 dll 插件来打包会更好一些，一下篇介绍」

例1：chunks 的公共代码，生成 page-comm

例2：将 code split 的公共子 chunk 提取到父 chunk

topic.js 使用了 code split

例3：将 Code Split 切割出来的 Chunk，提取到一个新的异步加载的 Chunk
async 设置为true，与例2一样，不同的是例2提取到父 chunk，这样会增加父 chunk 的文件大小，而例3提到一个新的 chunk 里，这个 chunk 是异步加载的。

多跑实例，理解各配置项产生的影响