Webpack5 系列（七）：代码分离

type

status

date

slug

summary

一、前言

上一篇讲到不同模式下的打包配置，本篇将介绍代码分离（Code Splitting）。

观察以上代码，我们发现在开头同步引入了 lodash，这没什么问题，但是一旦这个 index.js 文件很大，只要 index.js 中代码一变化，那么整个 index.js 就会重新加载，这时，lodash 又会被重新引入。简而言之，每次修改 index.js ，就会导致一次 lodash 的引入，这是一种浪费。

打包以后，打开浏览器看结果：

二、Entry 入口配置

将固定复用的代码（以 lodash 为例）写在一个 js 文件中，然后放在 entry 入口配置里。

注意：lodash 和 index 的先后顺序。

webpack.config.js

这样，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 提供了代码分离的特性，默认是将 异步代码 按照以下方式进行代码分离的：

2. 同步代码的处理

但显然这对于同步代码是无能为力的，于是我们这样设置：将 optimization.splitChunks.chunks 的值设置为 all ，它表示：不管同步还是异步，都会进行代码分离，但是请注意，如果你的共用模块不属于第三方库（也就是不能在 node_modules 中找到），而属于你自己写的一些代码模块，这些代码就会按照 cacheGroups 下的 default 配置打包。如果属于第三方库，就按照 cacheGroups 下的 defaultVendors 配置打包。

这样，业务代码和第三方库或自己的模块代码就会分开，效果与我们手动去分割代码是一样的。

如果打包后，你发现你自己写的模块没有被分割出来，说明你的模块大小不符合分割的条件（minSize），或不符合缓存组中的条件（minChunks）……