在前端开发中，构建快速、高效的应用程序是非常重要的。当单个页面变得庞大而臃肿时，应用性能也会受到影响。Code Splitting（代码分割）作为一种前端优化技术，可以将应用程序拆分成多个小模块，以获得更好的性能和用户体验。
本篇文章将介绍如何在 React SPA（单页应用）应用程序中使用 Code Splitting 技术，实现优化应用程序的效果。
什么是 Code Splitting？
Code Splitting 它是指将一个单独的 JavaScript 文件拆分成多个较小文件的过程。 随着应用程序规模的不断增大，单个 JavaScript 文件也变得越来越大，导致应用程序可维护性下降、加载速度慢、性能差。
Code Splitting 的目的就是将代码拆分成多个文件，只在需要的时候才加载它们。这可以显著提高页面的加载速度和性能，并减少内存使用。
React 中的 Code Splitting
在 React 中，我们可以使用 React.lazy 和 Suspense API 来实现 Code Splitting，让应用程序能够在需要的时候加载特定的组件，而不是在初始加载时全部加载。
React.lazy
React.lazy 是一个用于懒加载组件的函数式组件。它允许我们使用动态 import() 加载一个组件并返回一个可用的 React 组件。
这是一个基本的示例：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- ----------- - ------- -- -------------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
------------ --
-----------
------
--
-
------ ------- ----在这个示例中，我们使用 React.lazy 动态引入 MyComponent 组件。该组件只有在 <Suspense> 组件中使用时才会被加载。在组件加载期间，Suspense 组件将显示指定的后备组件，即 <div>Loading...</div> 组件。
Suspense
Suspense 是一个 React 组件，用于在渲染组件时显示一个后备 UI，直到需要加载的组件准备好后才显示实际 UI。
在前面的示例中，我们使用 <Suspense> 组件包装 MyComponent 组件。在组件加载过程中， Suspense组件会显示 <div>Loading...</div> 组件。当 MyComponent 组件准备好后， Suspense 组件会将其显示出来。
代码分割示例
现在我们可以看一个具体的 Code Splitting 示例。假设我们有一个标题组件 Header 和一个正文组件 Body，我们希望将这些组件拆分为单独的代码块。
Header.js
import React from 'react'; const Header = () => <h1>Header Component</h1>; export default Header;
Body.js
import React from 'react'; const Body = () => <p>Body Component</p>; export default Body;
App.js
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- ------ - ------- -- --------------------
----- ---- - ------- -- ------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
------- --
----- --
-----------
------
--
-
------ ------- ----在这里，我们使用动态 import() 导入 Header 和 Body 组件，并在 <Suspense> 组件中将它们渲染为一个整体。因为懒加载组件需要时间去加载，所以我们设置了一个加载指示器作为 fallback，等待组件加载完成后再显示它们。
此时如果你通过浏览器的 Network 面板或者 webpack-bundle-analyzer 来分析打包后的文件大小，你可能会发现打包出来有两个 JavaScript 文件，一个用于渲染 Header，另一个用于渲染 Body，只有在页面需要它们时才会被加载。
总结
Code Splitting 是一种前端优化技术，可以将庞大的应用程序代码拆分成多个小模块，以提高应用程序性能和用户体验。在 React 中，我们可以使用 React.lazy 和 Suspense API 来实现 Code Splitting，让应用程序能够在需要的时候加载特定的组件，而不会影响初始加载性能。
建议在开发 React 应用程序时，尽可能使用 Code Splitting 技术，以提高您的应用程序的性能，从而提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a8addc48841e9894513aad