Create React App 代码拆分(Code Splitting)

与用户使用前下载整个应用程序不同,代码分割允许你将代码分割成小块,然后按需加载。

此项目设置支持通过 动态import() 进行代码拆分。 它是在第3阶段的 提案import() 函数表单接受模块名作为参数,并返回一个Promise ,该 Promise 总是 resolves 到模块的命名空间对象。

示例:

moduleA.js

----- ------- - --------

------ - ------- --

App.js

------ ------ - --------- - ---- --------

----- --- ------- --------- -
  ----------- - -- -- -
    -------------------
      -------- ------- -- -- -
        -- --- -------
      --
      ---------- -- -
        -- ------ -------
      ---
  --

  -------- -
    ------ -
      -----
        ------- ------------------------------------------
      ------
    --
  -
-

------ ------- ----

这将使 moduleA.js 及其所有唯一依赖项成为一个单独的块,仅在用户单击 'Load' 按钮后加载。 有关创建的块的更多信息,请参阅生产构建 部分。

如果你愿意,也可以使用 async / await 语法。

使用 React Router

如果你使用的是 React Router ,请查看 这个教程 ,了解如何使用它进行代码分割。 你可以在 此处 找到随附的 GitHub 仓库。

另请参阅 React 文档中的 代码拆分(Code Splitting) 部分。


上一篇:使用 public 文件夹
下一篇:安装依赖项