一、前言
上一篇讲到不同模式下的打包配置，本篇将介绍代码分离（Code Splitting）。
// index.js import _ from 'lodash'; let element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); document.body.appendChild(element);
观察以上代码，我们发现在开头同步引入了 lodash，这没什么问题，但是一旦这个 index.js 文件很大，只要 index.js 中代码一变化，那么整个 index.js 就会重新加载，这时，lodash 又会被重新引入。简而言之，每次修改 index.js ，就会导致一次 lodash 的引入，这是一种浪费。
打包以后，打开浏览器看结果：
二、Entry 入口配置
将固定复用的代码（以 lodash 为例）写在一个 js 文件中，然后放在 entry 入口配置里。
注意：lodash 和 index 的先后顺序。
// lodash.js import _ from 'lodash'; window._ = _; // index.js （主文件） let element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); document.body.appendChild(element);
webpack.config.js
const path = require('path'); module.exports = { mode: 'development', entry: { lodash: './src/lodash.js', // 注意顺序，lodash 写在前面 index: './src/index.js' // 这样 index.js 的代码才能用到 lodash }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist'), } }
这样，main.js 就被拆分为 lodash.js 和 index.js。
- 当首次加载页面时，lodash.js 被加载一份（1.5MB），index.js 被加载一份（44.2kB）。
- 当修改业务代码时，只会重新加载 index.js （44.2kB），而 lodash.js 的那一份（1.5MB）则会被浏览器缓存，不会重新加载。
这是手动分离代码的一种方式，但还是很麻烦。
我们把入口配置恢复到原来的 entry: './src/index.js'
三、Code Splitting
1. 默认配置
Webpack 提供了代码分离的特性，默认是将 异步代码 按照以下方式进行代码分离的：
module.exports = { //... optimization: { splitChunks: { chunks: 'async', // 同步 or 异步，这里是异步 minSize: 20000, // 如果模块大小小于这个值，则不会被分割 20k minRemainingSize: 0, // 最小可保存大小，开发模式下为 0，其他情况下等于 minSize，一般不用手动配置 minChunks: 1, // 如果模块被引用次数小于这个值，则不会被分割 maxAsyncRequests: 30, // 异步模块，一次最多被加载的次数 maxInitialRequests: 30, // 入口模块最多被加载的次数 enforceSizeThreshold: 50000, // 强制分割的大小阈值 50k cacheGroups: { // 缓存组 // 打包第三方库 defaultVendors: { test: /[\\/]node_modules[\\/]/, // 正则匹配第三方库文件 priority: -10, // 优先级 reuseExistingChunk: true, // 如果一个模块已经被打包过了，那么这个模块也不会被打包 }, // 打包公共模块 default: { minChunks: 2, // 被超过两个模块引用，才会被打包 priority: -20, // 优先级 reuseExistingChunk: true, // 如果一个模块已经被打包过了，那么这个模块也不会被打包 }, }, }, }, };
2. 同步代码的处理
但显然这对于同步代码是无能为力的，于是我们这样设置：将 optimization.splitChunks.chunks 的值设置为 all ，它表示：不管同步还是异步，都会进行代码分离，但是请注意，如果你的共用模块不属于第三方库（也就是不能在 node_modules 中找到），而属于你自己写的一些代码模块，这些代码就会按照 cacheGroups 下的 default 配置打包。如果属于第三方库，就按照 cacheGroups 下的 defaultVendors 配置打包。
module.exports = { //... optimization: { splitChunks: { chunks: 'all', // 同步或异步 minSize: 100, // 自己设置最小分割大小 cacheGroups: { // 缓存组 // 打包第三方库 defaultVendors: { test: /[\\/]node_modules[\\/]/, // 正则匹配第三方库文件 priority: -10, // 优先级 reuseExistingChunk: true, // 如果一个模块已经被打包过了，那么这个模块也不会被打包 filename: 'vendors.js' // 打包后的文件名 }, // 打包公共模块 default: { minChunks: 2, // 被超过两个模块引用，才会被打包（可以去掉） priority: -20, // 优先级 reuseExistingChunk: true, // 如果一个模块已经被打包过了，那么这个模块也不会被打包 filename: 'common.js' // 打包后的文件名 }, }, }, }, };
这样，业务代码和第三方库或自己的模块代码就会分开，效果与我们手动去分割代码是一样的。
如果打包后，你发现你自己写的模块没有被分割出来，说明你的模块大小不符合分割的条件（minSize），或不符合缓存组中的条件（minChunks）……
