代码均放在 git仓库
Webpack 4给我们带来了一些改变。包括更快的打包速度，引入了SplitChunksPlugin插件来取代（之前版本里的）CommonsChunksPlugin插件。在这篇文章中，你将学习如何分割你的输出代码，从而提升我们应用的性能。
SplitChunks插件( webpack 4.x以前使用CommonsChunkPlugin )允许我们将公共依赖项提取到现有的 entry chunk 或全新的代码块中。
代码分割的理念
首先搞明白： webpack里的代码分割是个什么鬼？ 它允许你将一个文件分割成多个文件。如果使用的好，它能大幅提升你的应用的性能。其原因是基于浏览器会缓存你的代码这一事实。每当你对某一文件做点改变，访问你站点的人们就要重新下载它。然而依赖却很少变动。如果你将（这些依赖）分离成单独的文件，访问者就无需多次重复下载它们了。
使用webpack生成一个或多个包含你源代码最终版本的“打包好的文件”（），（概念上我们当作）它们由（一个一个的）组成。
首先 webpack 总共提供了三种办法来实现 Code Splitting，如下：
入口配置：entry 入口使用多个入口文件；
抽取公有代码：使用 SplitChunks 抽取公有代码；
动态加载 ：动态加载一些代码。
这里我们姑且只讨论使用 SplitChunks 抽取公有代码。
splitChunks配置
在src目录下创建三个文件pageA.js、pageB.js和pageC.js。代码详情见文章开头git仓库。
// src/pageA.js var react = require('react'); var reactDom = require('react-dom'); var utility1 = require('../utils/utility1'); var utility2 = require('../utils/utility2'); new Vue(); module.exports = "pageA";
// src/pageB.js var react = require('react'); var reactDom = require('react-dom'); var utility2 = require('../utils/utility2'); var utility3 = require('../utils/utility3'); module.exports = "pageB";
// src/pageC.js var react = require('react'); var reactDom = require('react-dom'); var utility2 = require('../utils/utility2'); var utility3 = require('../utils/utility3'); module.exports = "pageC";
入口文件 && 出口文件
entry: { pageA: "./src/pageA", // 引用utility1.js utility2.js pageB: "./src/pageB", // 引用utility2.js utility3.js pageC: "./src/pageC", // 引用utility2.js utility3.js }, output: { path: path.join(__dirname, "dist"), filename: "[name].[hash:8].bundle.js" },
配置optimization
首先我们配置optimization如下：
optimization: { splitChunks: { chunks: "all", },
执行npm run build打包命令之后，查看dist目录
可以发现，打包出来的除了三个page文件，还存在一个vendors~pageA~pageB~pageC.[hash].bundle.js文件（ 此文件中保存了pageA、pageB、pageC和node_modules中共有的size大于30KB的文件 ）。事实上这全靠了配置中本身默认固有一个cacheGroups的配置项：
splitChunks: { chunks: "all", cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, // 匹配node_modules目录下的文件 priority: -10 // 优先级配置项 }, default: { minChunks: 2, priority: -20, // 优先级配置项 reuseExistingChunk: true } } }
在默认设置中，会将 node_mudules 文件夹中的模块打包进一个叫 vendors的bundle中，所有引用超过两次的模块分配到 default bundle 中。更可以通过 priority 来设置优先级。
参数说明如下：
chunks：表示从哪些chunks里面抽取代码，除了三个可选字符串值 initial、async、all 之外，还可以通过函数来过滤所需的 chunks；
minSize：表示抽取出来的文件在压缩前的最小大小，默认为 30000；
maxSize：表示抽取出来的文件在压缩前的最大大小，默认为 0，表示不限制最大大小；
minChunks：表示被引用次数，默认为1；上述配置commons中minChunks为2，表示将被多次引用的代码抽离成commons。
值得注意的是，如果没有修改minSize属性的话，而且被公用的代码（假设是utilities.js）size小于30KB的话，它就不会分割成一个单独的文件。在真实情形下，这是合理的，因为（如分割）并不能带来性能确实的提升，反而使得浏览器多了一次对utilities.js的请求，而这个utilities.js又是如此之小（不划算）。
maxAsyncRequests：最大的按需(异步)加载次数，默认为 5；
maxInitialRequests：最大的初始化加载次数，默认为 3；
automaticNameDelimiter：抽取出来的文件的自动生成名字的分割符，默认为 ~；
name：抽取出来文件的名字，默认为 true，表示自动生成文件名；
cacheGroups: 缓存组。（这才是配置的关键）