请教一下大家 umi3.x 中，默认的html模版 有做异步加载吗 ？具体代码在那一块？

Question

请假一下大家 umi3.x 中，默认的html模版 有做异步加载吗 ？

具体代码在那一块？

Answer 1

在 Umi 3.x 中，默认的 HTML 模板不包含异步加载的功能。HTML 模板主要负责渲染应用的初始 HTML 结构，并加载应用的 JavaScript 和 CSS 资源。

如果您希望实现异步加载，可以通过以下几种方式进行处理：

异步加载 JavaScript：您可以手动在 HTML 模板中添加异步加载 JavaScript 的代码，例如使用 <script async src="your-script.js"></script>，其中 "your-script.js" 是您要异步加载的 JavaScript 文件的路径。这样可以使 JavaScript 在页面加载过程中异步加载并执行。

动态加载组件：在 Umi 中，您可以使用动态导入（Dynamic Import）的方式来异步加载组件。通过在需要异步加载的组件上使用 dynamic 方法，您可以将组件按需加载，以提升应用的加载速度。例如：

import { dynamic } from 'umi';

const AsyncComponent = dynamic({
  loader: async () => {
    const module = await import('./YourComponent');
    return module.default;
  },
});

在上述代码中，AsyncComponent 将以异步方式加载 ./YourComponent 组件。

请注意，以上方法是针对 JavaScript 文件和组件的异步加载。如果您希望实现其他类型资源的异步加载，如异步加载 CSS 文件或图片等，可以采用不同的技术和方案，例如使用动态创建 <link> 标签或通过 JavaScript 的 fetch 方法进行异步加载等。

具体实现方式可以根据您的需求和具体情况选择最合适的方法，并将其应用到您的 Umi 3.x 项目中。

Answer 2

import { dynamic } from 'umi';

export default dynamic({
  loader: async function() {
    const { default: HugeA } = await import(/* webpackChunkName: "external_A" */ './HugeA');
    return HugeA;
  },
});

import React from 'react';
import AsyncHugeA from './AsyncHugeA';

export default () => {
  return <AsyncHugeA />;
}