Webpack 的 Code splitting
前端开发的现状是前后端分离，前端的复杂性随着越来越多的 JavaScript 库以及富交互的用户体验而不断上升。Webpack 是一个强大的打包工具，它具有对于多种文件类型的处理能力，并且支持使用多个入口文件和高度优化的代码合并和分割能力。
Code splitting 是 Webpack 的一个非常重要的功能，它可以允许我们将代码分割成更小的块。我们可以将这些块通过异步加载去动态加载，对于提升页面加载速度和性能优化非常有帮助。本文将详细介绍Code splitting 的实现方式、使用场景和优化策略，并结合实例代码，帮助你更好地了解和掌握 Code splitting。
实现方式
Webpack 中分割代码有两种方式： 1. 入口文件（entry point）的配置 2. 使用 ES6 的 import() 语法
- 入口文件（entry point） 当我们将应用程序拆分为多个入口点时，Webpack 会创建一个独立的 bundle 文件，而代码块（chunks）则可以被设置为两个或更多个。通过在配置文件中设置 entry 属性，我们可以配置多个入口文件。
下面是以 React 项目为例，在配置文件中设置两个模块：
module.exports = {
entry: {
app: './src/index.js',
vendors: ['react', 'react-router-dom']
},
}；虽然这种方法并不能真正意义上的对代码进行分割，但是它确实可以帮助我们把多个模块组织到一个 bundle 中。
- ES6 import( ) 方法 ES6 中新加入了 import( ) 方法，它可以动态地加载模块。当我们使用这个方法去动态加载模块时，Webpack 会自动 将需要异步加载的代码块自动加入到 chunk 中。
代码示例：
上图简单地展示了在不同的浏览器事件触发时导入的不同的代码块（chunk）。
- 在 loadDashboards( ) 函数内导入了 displayDashboard( ) 所需的代码块。
- 在网络请求之后，获取数据后导入了格式化数据所需的代码块。
- 在用户点击按钮时，导入了配置功能所需的代码块。
这样的代码分割能力不仅能大大缩小打包后的文件大小，同时也可以加快网页加载速度。
使用场景
代码分割因为它能够异步加载请求的代码块，所以它最适合用于大型 Web 应用程序中，特别是那些有出色的用户体验和复杂路由的应用程序。
- 对于那些需要大量的第三方库和其他模块的项目，代码分割能够显著减少单个 bundle 文件大小
- 在网页上的一些事件触发的时候执行的代码可以延迟加载有助于改善首次页面加载时间并提高性能
- 对于路由分解的项目来说，代码分割能够根据 URL 加载合适的代码块，减少加载时间
优化策略
代码分割不应该被滥用，否则可能会导致不必要的网页加载延迟。下面是一些优化策略以帮助你更好地使用代码分割功能：
利用 prefetch 和 preload 当应用程序成功加载之后，Webpack 在加载新块前，可以使用 prefetch 和 preload 预取和预加载相应的资源。 这就是说，如果我们了解应用程序的流程，我们就可以使用这些方法确保每次用户需要一个新的功能或功能块时，异步加载的速度都快。
使用 SplitChunksPlugin 去分割通用模块/库 SplitChunksPlugin 是用于在多个入口点中分割通用模块和库的更好方法。下面是一个示例代码：
-- -------------------- ---- -------
------------- -
------------ -
------- ------
------------------- ---------
-------- --
------------ -
------- -
----- -------------------------
------------ -
----- ----------- - ----------------------------------------------------------------
------ ------------------------------- ------
--
--
-
--
--SplitChunksPlugin 始终值得考虑，因为它使用的公共代码块属于通用代码块，所以在用户点击访问这些通用块之前使用加载器来延迟加载它们是明智的选择。
确定执行路径 作为开发者，我们不能简单地从所有代码块中进行打包，而是需要一种方法来确定何时加载哪些代码块。 确定执行路径是确定何时加载新块以及请求的正确代码块的好方法。
懒加载优化 懒加载是一种仅在需要时才加载代码的技术。 这种优化技术可以减小加载时间并提高应用程序的整体性能。 如果某些 HTML 元素只有用户滚动到它们时才需要加载，那么它们就应该延迟到需要时才进行加载。
示例代码
下面是一个使用 Webpack 的 Code splitting 的示例。
-- -------------------- ---- ------- ------ - ---- - ---- --------- -- ---- ------- ----- ---------- - ----- - -------- -------- - - ----- ------------------------ ----------- ----- - -------- ------------- - - ----- ----------------------------- ---------------- ----- - --- - - ----- ----------------------------- ----- - -------- ------------ - - ----- ---------------------------- ------------------ -
总结
在本文中，我们探索了 Code splitting 的实现方式，如何在实际场景中使用和优化策略。这是一个非常重要的主题，特别是对于大型和复杂的应用程序来说。希望本篇文章可以帮助您更好地学习和使用 Code splitting，提高您在前端开发中的技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645d5b1c968c7c53b0fd9be0