在前端开发中，我们常常会面对代码质量优化、性能优化等问题。Webpack 作为前端项目打包工具，它的优化功能极其强大，可以帮助我们实现这些目标。其中，Code Splitting 是 Webpack 中非常重要的一个模块化功能，通过对代码进行分割，可以实现更高效、更灵活的加载与更新。
Code Splitting 概述
Code Splitting 是将代码分割成更小、更独立的部分，可以把不同的代码块加载到不同的页面中。这样，用户只需要下载与当前页面相关的代码，能够更快地开始使用应用程序，提高应用程序的加载效率。
在 Webpack 中，Code Splitting 的实现方式有两种：
1. 手动配置
我们可以手动配置 Webpack，将不同的依赖关系拆分成多个文件，实现代码的按需加载。这种方式需要手动管理依赖关系，灵活性较高，但在大规模应用中，手动配置较为繁琐，工作量较大。
2. 自动分割
Webpack 还提供了自动代码分割的方式，只需要在配置中开启相应的选项即可。Webpack 会根据内部算法，将依赖的模块分割成不同的文件，从而实现代码集成的最小化。在自动分割的基础上，Webpack 也提供了多种方案，如按需加载、预取前置等等。
Code Splitting 的优势
1. 减小文件体积
对于较为复杂的前端应用，通常有很多 JS、CSS、图片等资源，在传统的打包方式下，这些资源可能被打包成一个 monolith 包，即很多不需要的文件也随之被打包下来。而在使用 Code Splitting 后，Webpack 会自动将依赖树中的模块分离成单独的 chunk 文件，从而减小整个打包文件的体积，提高网页加载速度。
2. 实现按需加载
在使用 Code Splitting 后，我们可以实现按需加载，即只有当需要用到某个代码块时，才会被下载和执行。这大大提升了应用程序的加载速度，降低了应用程序的响应时间。
3. 预取前置
通过 Code Splitting，我们可以将代码块优先加载到客户端或者服务器，提前获取资源，从而减少加载速度等待时间。这种优化方式通常被称为预取前置。
Code Splitting 的实现
1. 基本配置
在 Webpack 配置中，我们需要配置 optimization.splitChunks 属性，即启用代码分割功能：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------------- -
------------ -
------- -----
-
-
--在上述配置中，我们使用了 optimization.splitChunks 来进行代码分割。例如 chunks: 'all' 表示会自动将所有模块分出来，然后打包成多个单独的代码块。
2. 按需加载
在实现按需加载时，我们可以使用 import() 方式来引入代码块。例如下面的代码，只有当需要使用对应模块时，才会将其打包进来：
function loadComponent() {
return import(/* webpackChunkName: "component" */ './component')
.then(component => {
document.body.appendChild(component)
});
}其中，webpackChunkName 是这个文件注释的一部分，可以在我们的打包后的代码中查看到，帮助我们标识和识别代码块。
3. 预取前置
在 Webpack 中，预取前置通常是通过插件实现的。Webpack 提供了 ScriptExtHtmlWebpackPlugin 插件来实现预取前置的效果。这个插件会自动为引入的代码添加 prefetch 和 preload 标记，指示浏览器预取页面中指定的资源。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- -------------------------- - ------------------------------------------
-------------- - -
-- ---
-------- -
--- --------------------
--- ----------------------------
--------- --------- ----------
-------- ------------ -----------
----------------- -------
--
-
--在上述配置中，我们使用 script-ext-html-webpack-plugin 插件来实现预取（prefetch）和预加载（preload）功能，用于优化性能。
结论
通过 Code Splitting，我们可以实现按需加载和预取前置等优化方式，从而达到降低文件体积和提升网页加载速度的目的。借助 Webpack 的自动代码分割和插件，我们可以轻松地实现这些代码优化。
（完整示例代码请见 Webpack Code Splitting 示例）
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fcb77c44713626017210df