Code Splitting 是指将大型的 JavaScript 应用程序分解成更小的块，以便于更高效地加载和使用。在前端开发中，Code Splitting 是非常有用的，因为它可以显著减少网页的加载时间，提高用户的体验。webpack 是目前最流行的前端打包工具，它支持 Code Splitting，本文将介绍如何使用 webpack 实现 Code Splitting。
为什么需要 Code Splitting
随着 JavaScript 应用程序越来越庞大，整个应用程序的代码量也越来越大，因此在加载第一个页面时，需要加载大量的 JavaScript 代码，这会导致页面加载时间较长，用户体验较差。为了解决这个问题，开发人员开始采用 Code Splitting 技术，将应用程序拆分成更小的块，让浏览器逐步加载应用程序。
webpack 是目前最流行的前端打包工具，webpack 4 后自带了实现 Code Splitting 的 SplitChunksPlugin 插件，让开发人员可以方便地实现 Code Splitting。
配置文件
在你的 webpack 配置文件中，我们需要使用 optimization.splitChunks 配置项。
-- -------------------- ---- -------
-------------- - -
-- ---
------------- -
------------ -
------- -----
-
-
-- ---
-这里我们将 chunks 属性设置为 all，这意味着我们将应用程序中的所有模块都拆分成一个新的块，如果想要自己控制代码分割的粒度，可以根据实际需求进行配置。
动态导入代码
Dynamic Imports 是一种原生支持 Code Splitting 的方式，它可以在运行时动态加载代码块，可以根据实际需求对应用程序进行切分。
在应用程序中，我们可以使用 import() 来实现动态导入代码。
import('./path/to/module')
.then(module => {
// 模块加载成功
})
.catch(error => {
// 模块加载失败
});示例代码
下面是一个简单的示例，演示如何使用 webpack 实现动态导入。
-- -------------------- ---- -------
-- --------
----- -------- ------ -
----- - -------- - - - ----- -----------------
---------------------------- ----------- - ----
-
-------
-- -----------------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------------- -
------------ -
------- -----
-
-
--在上面的例子中，我们动态导入了 lodash 库，并使用它来连接 Hello 和 webpack 字符串。当使用 webpack 打包时，它将把 lodash 库代码块拆分成单独的文件，当我们第一次访问网页时，只需要加载 index.js 文件，等到需要使用 lodash 时，再动态加载 lodash 文件，减小了初始加载时间。
总结
开发人员使用 Code Splitting 技术，可以将庞大的 JavaScript 应用程序拆分成更小的块，提高网页的加载速度和用户体验。webpack 4 后自带了实现 Code Splitting 的 SplitChunksPlugin 插件，给开发人员带来了很大的方便，可以根据实际需求进行配置。动态导入是一种原生支持 Code Splitting 的方式，使开发人员可以根据需要动态加载代码块。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492bc6448841e9894089bff