enable code splitting and add chunk names to dynamic import and create separate chunk vendor for all node modules (#2245)

* build: increase Limit chunk to enable code splitting add chunk names to dynamic import

* Remove limitchunkcount and have separate chunk for each node module so we dnt have any unnamed id.js chunks

* fix

* create one chunk for all node modules

* Add caret to peer deps

* extra space

src/data/blob.ts

@@ -10,7 +10,9 @@ export const parseFileContents = async (blob: Blob | File) => {
 
   if (blob.type === "image/png") {
     try {
-      return await (await import("./image")).decodePngMetadata(blob);
+      return await (
+        await import(/* webpackChunkName: "image" */ "./image")
+      ).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new Error(t("alerts.imageDoesNotContainScene"));
@@ -34,7 +36,9 @@ export const parseFileContents = async (blob: Blob | File) => {
     }
     if (blob.type === "image/svg+xml") {
       try {
-        return await (await import("./image")).decodeSvgMetadata({
+        return await (
+          await import(/* webpackChunkName: "image" */ "./image")
+        ).decodeSvgMetadata({
           svg: contents,
         });
       } catch (error) {

src/data/firebase.ts

@@ -6,8 +6,10 @@ import Portal from "../components/Portal";
 let firebasePromise: Promise<typeof import("firebase/app")> | null = null;
 
 async function loadFirebase() {
-  const firebase = await import("firebase/app");
-  await import("firebase/firestore");
+  const firebase = await import(
+    /* webpackChunkName: "firebase" */ "firebase/app"
+  );
+  await import(/* webpackChunkName: "firestore" */ "firebase/firestore");
 
   const firebaseConfig = JSON.parse(process.env.REACT_APP_FIREBASE_CONFIG);
   firebase.initializeApp(firebaseConfig);

src/data/index.ts

@@ -308,7 +308,9 @@ export const exportCanvas = async (
       shouldAddWatermark,
       metadata:
         appState.exportEmbedScene && type === "svg"
-          ? await (await import("./image")).encodeSvgMetadata({
+          ? await (
+              await import(/* webpackChunkName: "image" */ "./image")
+            ).encodeSvgMetadata({
               text: serializeAsJSON(elements, appState),
             })
           : undefined,
@@ -340,7 +342,9 @@ export const exportCanvas = async (
     tempCanvas.toBlob(async (blob) => {
       if (blob) {
         if (appState.exportEmbedScene) {
-          blob = await (await import("./image")).encodePngMetadata({
+          blob = await (
+            await import(/* webpackChunkName: "image" */ "./image")
+          ).encodePngMetadata({
             blob,
             metadata: serializeAsJSON(elements, appState),
           });