react中的“动态导入”和常规导入之间有什么区别？

Question

“动态导入”（使用React.lazy）和React中的常规导入之间有什么区别？

动态导入：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

与

常规导入：

import OtherComponent from './OtherComponent';

Answer 1

在动态导入上，您在到达表达式时导入组件：

let OtherComponent = undefined;
// Never imported.
if (false) {
  OtherComponent = React.lazy(() => import('./OtherComponent.jsx'));
}

在常规导入上，您可以在组件调用时导入组件：

// AB.jsx
import AB from './AB.jsx';

function App() {
  // imports A and B
  return <AB/>
}

// AB.jsx
import A from './A.jsx';
import B from './B.jsx';

// B is imported altought never used.
function AB() {
  return <A/>; 
}