@loadable/server 是一个可以让你在服务端使用加载组件的npm包。它的主要作用是让 React 在服务端渲染时可以提高加载速度并使得代码更容易维护。下面我们将会提供详细的介绍和使用指南。
为什么需要 @loadable/server
在进行 React 服务端渲染的时候，我们往往需要使用到 Webpack 进行打包。通常情况下，Webpack 打包后的文件可能非常大，如果在服务端进行同步加载，那么在浏览器渲染页面的时候，我们需要等待所有的 JavaScript 包全部下载完成才行。这会导致非常长的加载时间和较慢的首次渲染。为了解决这个问题，我们需要使用到 @loadable/server。
这个包可以使得服务端打包后的文件变得更加轻量化并且只在需要时才将其下载。这样就可以避免大量的 JavaScript 包的加载时间，从而提高页面加载速度并加快首次渲染时间。为了更好地理解 @loadable/server 的使用，下面我们将会给出更加详细的使用指南。
使用指南
首先，我们需要安装 @loadable/server 。
npm install @loadable/server
然后，在你的服务端代码中引入此包并根据需要进行加载组件的注入。例如，我们有以下一个React组件：
import React from 'react'
export default function TestComponent () {
return <div>Test Component</div>
}在服务端渲染期间，此组件将会被装载。在@loadable/server 中，我们可以使用 loadable 函数进行创建注入组件。首先，让我们在页面中引入 loadable 方法：
-- -------------------- ---- -------
------ - --------------- --------------------- - ---- ------------------
------ ----- ---- -------
------ -------------- ---- ------------------
------ ------------- ---- ----------------------------
----- --------- - -------------------------------------------
----- --------- - --- ---------------- --------- --
------ ------- ----- -------- ------------ -- -
----- --- - -------------------------------------- ---
----- ---- - ----------------------------------
----- ---------- - -------------------------
----- -------- - -----------------------
----- --------- - ------------------------
------ -
-----
-----------
---------
----------
-
-在上面的代码中，在 serverRender 方法中，我们将 TestComponent 组件装入 jsx 中并注入在 extractor 中。此时，extractor 将会记录包含这个组件的 JavaScript 文件。然后，我们将会使用 ReactDOMServer.renderToString 方法将 jsx 转换成 HTML 字符串，并使用 inject 方法注入我们记录在 extractor 中的 JavaScript 文件。最后，将内容返回作变量使用就可以了。
-- -------------------- ---- -------
------ ------------ ---- -----------------
---------------------- ----- ----------- --------- --------- -- -- -
--------------
-
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- ------------------ ------------------ ------------------ ------------------
--------------- ------ ---------------
-----------
------------
-------
------
---- -----------------------
-------------
-------
-------
-
-
--最后，我们需要注意，在打包出来的前端代码中，我们需要使用 loadable-components 作为客户端渲染的注入组件，这样才能正确地使用前面 serverRender 方法获取的注入信息。
-- -------------------- ---- ------- ------ ----- ---- ------- ------ -------- ---- ----------- ------ --- ---- ------- ------ - -------------- - ---- ------------------ ----- ----- - ----------------------------------------- ----- --------- - --- ---------------- ----- -- --------------------- ---------- --------------------- --- --------------------------------
完成上面这些步骤后，我们已经成功配置了 @loadable/server。
结论
在本文中，我们介绍了 @loadable/server 及其使用。这个包的主要作用是可以让 React 在服务端渲染时可以提高加载速度并使得代码更容易维护。我们详细地介绍了该包的使用方法，希望这个包能够帮助你更好地进行服务端渲染的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/loadable-server