在现代网站中，页面的加载速度非常重要，因为它关系到用户的体验。React 作为前端框架，也非常注重页面性能优化。其中一个关键问题是如何减小页面 bundle 的大小。这时，代码分割就变得至关重要了。
什么是代码分割？
代码分割是一种优化技术，可以将代码分成几个小部分，从而减小应用的初始加载时间。这种技术被广泛应用于现代 SPA（Single Page Application） 中，因为这类应用一般有大量的代码，以及很多都是在初次渲染时加载。
React 的代码分割技术可以通过实现动态加载组件的方式进行。与传统的静态加载相比，这种方法可以按需加载组件，这样就能避免在初次渲染时加载所有组件的缺点。
如何使用 Loadable Components 实现代码分割
Loadable Components 是一个非常流行的库，可以用来实现动态加载组件。它是由 webpack 的创建者之一开发的，因此它与 webpack 非常兼容，并且对于 React 生态系统来说是一个不错的选择。
如果想要使用 Loadable Components，则需要执行以下步骤。
步骤一：安装 Loadable Components
首先，需安装 Loadable Components 库。
npm i --save @loadable/component
步骤二：创建一个动态组件
在 React 应用中创建一个动态组件，可以像下面这样使用 Loadable Components。
import Loadable from '@loadable/component'
const AsyncComponent = Loadable(() => import('./SomeComponent'))在上面的代码中，Loadable 是一个 HOC（Higher-Order Component），它接受一个方法，该方法可以返回 import() 函数。这个函数会动态加载组件，也就是我们想要的效果。
另外要注意，这里使用了箭头函数，这意味着我们可以使用 ES6 的 import 语法。
步骤三：使用动态组件
现在我们已经创建了一个动态组件，可以在 React 项目中使用了。
-- -------------------- ---- -------
------ ----- ---- -------
------ -------------- ---- ------------------
----- --- - -- -- -
-----
------ --------
--------------- --
------
-
------ ------- ---在上面的代码中，我们只需要像使用普通组件一样使用 AsyncComponent。Loadable Components 会自动处理剩下的事情。
示例代码
上面讲得有点抽象，下面来看一个实际的示例。
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------------- -
------------ -
------- ------
--
--
--- -------------------- ---- -------
-- ------
------ ----- ---- -------
------ -------- ---- ---------------------
----- -------------- - ----------- -- --------------------------
----- --- - -- -- -
-----
------ --------
--------------- --
------
-
------ ------- ---// SomeComponent.js import React from 'react' const SomeComponent = () => <h2>Some Component</h2> export default SomeComponent
在这个示例中，webpack.config.js 配置实现了代码分割，将所有共享代码提取到单独的文件中。然后，我们使用 Loadable Components 打包 SomeComponent 组件，使用 AsyncComponent 动态加载组件，避免了在初始加载时加载整个组件。
总结
使用 Loadable Components 实现代码分割，是提高 React 项目性能的关键技术之一。通过动态加载组件，可以减小页面 bundle 的大小，提高页面加载速度，从而改善用户体验。在日常开发中，我们可以尝试使用该方法来进行性能优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464a75f968c7c53b0588b0d