javascript - Typescript is absurdly slow when developing with dynamic imports, React.Suspense

Question

Edit

According to the docs,

The import() must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression - every module that could potentially be requested on an import() call is included. For example, import(./locale/${language}.json) will cause every .json file in the ./locale directory to be bundled into the new chunk. At run time, when the variable language has been computed, any file like english.json or german.json will be available for consumption.

So what's basically happening here, is that when I do,

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

instead of,

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

It literally bundles the whole node_modules directory each time you make changes in the code and hit save.

Pity it doesn't work as I'd like it to, but good to know I guess. Still unsure why the Sandbox works just fine.

---

I'm running into a very frustrating issue with Typescript when I'm developing with dynamic import() in React, (Github repo and Sandbox links below).

Consider the below code:

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 />
    );
}

This works just fine and every time I make change to the code and save them, the TS compiler recompiles everything in about a second. Cool.

But say I want to make dynamic imports... well, dynamic. Consider this:

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'} />
    );
}

With this code, whenever I make changes to the code, I have to wait upwards of ~15s for the compiler to recompile everything and show me those changes.

What is also strange, is that in the below Sandbox, everything works as expected. The above dynamic code works just fine and the changes are reflected instantly.

This is beyond frustrating, what am I doing wrong and how can I get around this? I've tried the code on 3 different machines and all have the same behavior. Why would the Sandbox be any different?

Github

Sandbox

question from:https://stackoverflow.com/questions/65932333/typescript-is-absurdly-slow-when-developing-with-dynamic-imports-react-suspense

Answer 1

Waitting for answers