代码分离（Code Splitting）是webpack一个非常重要的特性：
Webpack中常用的代码分离有三种：
入口起点的含义非常简单，就是配置多入口：
比如配置一个index.js和main.js的入口；
他们分别有自己的代码逻辑；
假如我们的index.js和main.js都依赖两个库：lodash、dayjs
如果我们单纯的进行入口分离，那么打包后的两个bunlde都有会有一份lodash和dayjs；
事实上我们可以对他们进行共享；
配置很灵活，import也可以是再次多入口，是多个文件。
另外一种分包的模式是splitChunk，它是使用SplitChunksPlugin来实现的：
Webpack提供了SplitChunksPlugin默认的配置，我们也可以手动来修改它的配置：
比如默认配置中，chunks仅仅针对于异步（async）请求，我们可以设置为initial或者all；
minSize的优先级高于maxSize，
在模块中，使用（import，require）等关键字引入其他模块的时候，只有引入次数大于等于该值时，才会进行分包。
缓存组，出现在缓存组中的模块，不会直接分包，而是在所有模块加载完毕以后再根据缓存组配置的内容进行分包处理。
// 优化
optimization: {
// 代码压缩操作
minimizer: [
new TerserPlugin({
// 去除注释信息
extractComments: false,
}),
],
splitChunks: {
chunks: "all",
// chunks:"async" // 默认值 模块存在异步加载操作(import("文件")) 进行分离
// 最小值 默认值：20000B ~ 拆分出来的最小的包的大小是 大概20KB
minSize: 20,
maxSize: 40000,
minChunks: 1,
cacheGroups: {
// 第三方库 将匹配到的 node_modules下加载的库 都打包到vendors下面
vendors: {
test: /[\\\/]node_modules[\/\\]/,
filename: "[id]_vendors.js",
},
// 将自己的 utils文件夹下的文件 打包
format:{
test:/[\\\/]utils[\/\\]/,
filename:"[id]_utils_format.js"
}
},
},
},
cacheGroups: {
// 第三方库 将匹配到的 node_modules下加载的库 都打包到vendors下面
vendors: {
test: /[\\\/]node_modules[\/\\]/,
filename: "[id]_vendors.js",
},
// 默认缓存组 当一个文件被引入超过两次的时候 也分包成一个文件
default: {
minChunks: 2,
filename:"[id]_default.js"
},
}
如果一个模块同时满足多个缓存组，那么就将模块分包到优先级高的缓存组中。优先级可以为负数。
如图所示：
cacheGroups: {
// 第三方库 将匹配到的 node_modules下加载的库 都打包到vendors下面
vendors: {
test: /[\\\/]node_modules[\/\\]/,
filename: "[id]_vendors.js",
},
// 将自己的 utils文件夹下的文件 打包
format: {
test: /[\\\/]utils[\/\\]/,
filename: "[id]_utils_format.js",
priority: -30,
},
// 默认缓存组 当一个文件被引入超过两次的时候 也分包成一个文件
default: {
minChunks: 2,
filename: "[id]_default.js",
priority: -20,
},
}
整个项目中，只要某个模块的引用次数超过2次（可以等于），也就是说多入口的引入也是一样，都会打包到默认中。
最大的异步请求数量。默认值 20
设置拆包的名称：
告诉webpack，配置分包的时候，生成的分包文件的id采用什么算法。
optimization.chunkIds配置用于告知webpack模块的id采用什么算法生成。
有三个比较常见的值：
最佳实践：
optimization:{
// 采用自然数
chunkIds:"natural"
}
实际开发中很少使用：
因为：
而named属性值用的较多。在开发环境中很常见
默认情况下，不配该属性值，打包环境的值就是 deterministic
配置runtime相关的代码是否抽取到一个单独的chunk中：
抽离出来后，有利于浏览器缓存的策略：
比如我们修改了业务代码（main），那么runtime和component、bar的chunk是不需要重新加载的；
比如我们修改了component、bar的代码，那么main中的代码是不需要重新加载的；
设置的值：
optimization:{
chunkIds:"deterministic",
runtimeChunk:{
name:"runtime"
}
}
通过将 optimization.runtimeChunk 设置为 object，对象中可以设置只有 name 属性，其中属性值可以是名称或者返回名称的函数，用于为 runtime chunks 命名。
默认值是 false：每个入口 chunk 中直接嵌入 runtime。
module.exports = {
//...
optimization: {
runtimeChunk: {
// name: "runtime.module", // single的别名配置
// name: (entrypoint) => "runtime.module" // single的别名配置
name: (entrypoint) => `runtime.module-${entrypoint.name}`, // true multiple 的别名配置
}
},
};
同步代码的分包，一般我们最多分成四个文件：
对于异步导入的模块，不管你设置什么样的值，chunks的值为什么，webpack都会在打包时帮我们进行分离。
即使chunks的值为initial，也只是表示splitChunks不对异步代码做分包，webpack依然会帮我们分包。
另外一个代码拆分的方式是动态导入时，webpack提供了两种实现动态导入的方式：
比如我们有一个模块 bar.js：
注意：使用动态导入bar.js：
异步导入的模块，不管文件的大小，都会进行分包处理的。
动态导入的文件命名：
因为动态导入通常是一定会打包成独立的文件的，所以并不会再cacheGroups中进行配置；
那么它的命名我们通常会在output中，通过 chunkFilename 属性来命名；(设置异步加载的打包文件名)
output:{
chunkFilename:"[name].chunk.js"
}
output: {
// 异步 分离打包的文件名称
// 默认情况下：这里的占位name就是我们chunkIds生成的 id
chunkFilename: "[name].chunk.js",
// 以入口文件名称作为打包后文件名称前缀
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
}
你会发现默认情况下我们获取到的 [name] 是和id的名称保持一致的，如果我们希望修改name的值，可以通过**magic comments（魔法注释）**的方式；
// 魔法注释： name的值需要加引号
import(/* webpackChunkName:"bar" */ "./bar").then((res) => {
console.log(res, res.default);
});
动态import使用最多的一个场景是懒加载（比如路由懒加载）：
这种方法解决了首屏页面暂时用不到的js文件的获取，是加快首屏页面渲染速度的方式之一：
但是也有弊端：
我们如何避免这种情况？
我们可以让首屏渲染完毕后，在浏览器空闲的时候，提前帮我们把需要懒加载的一些文件提前下载好，在用户执行某些操作后，就不需要再次发起请求，直接解析代码即可。
在webpack中，做这种效果很简单：
我们只需要使用魔法注释：webpack就会在浏览器的空闲时间帮我们下载好：
只需要在需要提前懒加载的文件前面使用魔法注释：webpackPrefetch:true，webpack就会帮我们做好。
btn.addEventListener("click", async () => {
const { default: div } = await import(
/* webpackChunkName: "component" */
/* webpackPrefetch: true */
"./components/component"
);
document.body.appendChild(div);
});
可以发现该组件是从预获取的缓存中获取的，而不是再次发起请求。
预加载会和当前懒加载所在的模块一起，以并行的方式开始加载。而预获取是当父模块加载结束后开始加载。
preload是中等优先级，且立即开始下载。prefetch chunk 在浏览器闲置时下载。
preload chunk 会在父 chunk 中立即请求，用于当下时刻。prefetch chunk 会用于未来的某个时刻。
浏览器支持程度不同。
推荐组件等的懒加载，使用prefetch