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 是异步加载的。

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