与用户使用前下载整个应用程序不同,代码分割允许你将代码分割成小块,然后按需加载。
此项目设置支持通过 动态import()
进行代码拆分。 它是在第3阶段的 提案 。 import()
函数表单接受模块名作为参数,并返回一个Promise
,该 Promise 总是 resolves 到模块的命名空间对象。
示例:
moduleA.js
const moduleA = 'Hello'; export { moduleA };
App.js
import React, { Component } from 'react'; class App extends Component { handleClick = () => { import('./moduleA') .then(({ moduleA }) => { // Use moduleA }) .catch(err => { // Handle failure }); }; render() { return ( <div> <button onClick="{this.handleClick}">Load</button> </div> ); } } export default App;
这将使 moduleA.js
及其所有唯一依赖项成为一个单独的块,仅在用户单击 'Load' 按钮后加载。 有关创建的块的更多信息,请参阅生产构建 部分。
如果你愿意,也可以使用 async
/ await
语法。
使用 React Router
如果你使用的是 React Router ,请查看 这个教程 ,了解如何使用它进行代码分割。 你可以在 此处 找到随附的 GitHub 仓库。
另请参阅 React 文档中的 代码拆分(Code Splitting) 部分。