按需加载

启用按需加载

为了简化部署成本,按需加载功能默认是关闭的,你需要在使用之前先通过配置开启,

  1. export default {
  2. dynamicImport: {},
  3. }

使用按需加载

按需加载组件

通过 Umi 的 dynamic 接口实现,比如:

  1. import { dynamic } from 'umi';
  2. const delay = (timeout) => new Promise(resolve => setTimeout(resolve, timeout));
  3. const App = dynamic({
  4. loader: async function() {
  5. await delay(/* 1s */1000);
  6. return () => <div>I will render after 1s</div>;
  7. },
  8. });

按需加载非组件

通过 import() 实现,比如:

  1. import('g2').then(() => {
  2. // do something with g2
  3. });