问题描述

编辑

根据docs，

import() 必须至少包含一些关于模块所在位置的信息。捆绑可以限于特定目录或文件集，以便在您使用动态表达式时 - 包括可能在 import() 调用中请求的每个模块。例如，import(./locale/${language}.json) 将导致 ./locale 目录中的每个 .json 文件被捆绑到新块。在运行时，当变量语言被计算出来后，任何像 english.json 或 German.json 的文件都可以使用。

所以这里基本上发生的是，当我这样做时，

const Component = React.lazy(() => import(`@material-ui/icons/${iconName}`));

代替，

const Component = React.lazy(() => import(`@material-ui/icons/DoneAll`));

每次您更改代码并点击保存时，它实际上都会捆绑整个 node_modules 目录。

可惜它不能如我所愿，但很高兴知道我猜。仍然不确定为什么 SandBox 工作得很好。

当我在 React 中使用动态 import() 进行开发时，我遇到了一个非常令人沮丧的 Typescript 问题（Github 存储库和沙箱链接如下）。

考虑以下代码：

import React from 'react';

const MySuspense = React.memo(() => {
    const Component = React.lazy(() => import(`@material-ui/icons/DoneAll.js`));

    return (
        <React.Suspense fallback={<div />}>
            <Component />
        </React.Suspense>
    );
});

export default function App() {
    return (
        <MySuspense />
    );
}

这工作得很好，每次我更改代码并保存它们时，TS 编译器会在大约一秒钟内重新编译所有内容。很酷。

但是说我想进行动态导入......好吧，动态的。考虑一下：

import React from 'react';

type TSuspense = {
    iconName: string;
};
const MySuspense = React.memo(({ iconName }: TSuspense) => {
    const Component = React.lazy(() => import(`@material-ui/icons/${iconName}.js`));

    return (
        <React.Suspense fallback={<div />}>
            <Component />
        </React.Suspense>
    );
});

export default function App() {
    return (
        <MySuspense iconName={'Done'} />
    );
}

有了这段代码，每当我对代码进行更改时，我都必须等待大约 15 秒以上的时间，编译器才能重新编译所有内容并显示这些更改。

同样奇怪的是，在下面的 SandBox 中，一切都按预期进行。上面的动态代码工作得很好，更改会立即反映出来。

这太令人沮丧了，我做错了什么，我该如何解决？我已经在 3 台不同的机器上尝试了代码，并且都具有相同的行为。为什么沙盒会有所不同？

Github

Sandbox

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

使用动态导入进行开发时，Typescript 速度非常慢，React.Suspense

问题描述

编辑

解决方法