New (pnpm) vite + React + TypeScript project build becomes very slow with @arcgis/core (even though using dynamic-imports)

[itayperry]

I have a question and I would love to get some help please :)

I installed a new vite project with React and TypeScript:

pnpm create vite some-app --template react-ts

When I run pnpm build the build takes approximately 800ms.

After installing @arcgis/core and although using dymanic-import

import { useEffect, useState } from "react";
import "./App.css";

const getAll = async () => {
  const { default: Basemap } = await import("@arcgis/core/Basemap.js");
  const { default: TileLayer } = await import("@arcgis/core/layers/TileLayer");
  const { default: VectorTileLayer } = await import(
    "@arcgis/core/layers/VectorTileLayer"
  );
  const { default: WebTileLayer } = await import(
    "@arcgis/core/layers/WebTileLayer"
  );
  const { default: arcGISMap } = await import("@arcgis/core/Map.js");
  const { default: MapView } = await import("@arcgis/core/views/MapView");
  const { default: BaseMapGallery } = await import(
    "@arcgis/core/widgets/BasemapGallery"
  );
  const { default: LocalBaseMapsSource } = await import(
    "@arcgis/core/widgets/BasemapGallery/support/LocalBasemapsSource"
  );
  const { default: Expand } = await import("@arcgis/core/widgets/Expand");
  return {
    Basemap,
    TileLayer,
    VectorTileLayer,
    WebTileLayer,
    arcGISMap,
    MapView,
    BaseMapGallery,
    LocalBaseMapsSource,
    Expand,
  };
};

function App() {
  useEffect(() => {
    (async () => {
      const x = await getAll();
      // draw a map on a div...
      console.log(x);
    })();
  }, []);

  return <>some new app that draws a map...</>;
}

export default App;

The build takes about 30 seconds.

Is there anyway to fix it? Is there anything I could do to reduce the build time?