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/components/TopErrorBoundary.tsx

@@ -56,7 +56,11 @@ export class TopErrorBoundary extends React.Component<
   private async createGithubIssue() {
     let body = "";
     try {
-      const templateStrFn = (await import("../bug-issue-template")).default;
+      const templateStrFn = (
+        await import(
+          /* webpackChunkName: "bug-issue-template" */ "../bug-issue-template"
+        )
+      ).default;
       body = encodeURIComponent(templateStrFn(this.state.sentryEventId));
     } catch (error) {
       console.error(error);

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");
+  const firebase = await import(
-  await import("firebase/firestore");
+    /* 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),
           });

src/excalidraw-embed/package-lock.json

@@ -1706,6 +1706,16 @@
       "dev": true,
       "optional": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -2816,6 +2826,13 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -3979,6 +3996,13 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -5812,7 +5836,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",

src/excalidraw-embed/package.json

@@ -34,8 +34,8 @@
     ]
   },
   "peerDependencies": {
-    "react": "16.13.1",
+    "react": "^16.13.1",
-    "react-dom": "16.13.1"
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "@babel/core": "7.9.0",

src/excalidraw-embed/webpack.prod.config.js

@@ -1,5 +1,4 @@
 const path = require("path");
-const webpack = require("webpack");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
 
@@ -76,10 +75,16 @@ module.exports = {
       new TerserPlugin({
         test: /\.js($|\?)/i,
       }),
-      new webpack.optimize.LimitChunkCountPlugin({
-        maxChunks: 1,
-      }),
     ],
+    splitChunks: {
+      chunks: "all",
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+        },
+      },
+    },
   },
   plugins: [new MiniCssExtractPlugin({ filename: "[name].css" })],
   externals: {

src/i18n.ts

@@ -63,7 +63,9 @@ export const setLanguage = async (newLng: string | undefined) => {
 
   document.documentElement.dir = currentLanguage.rtl ? "rtl" : "ltr";
 
-  currentLanguageData = await import(`./locales/${currentLanguage.lng}.json`);
+  currentLanguageData = await import(
+    /* webpackChunkName: "i18n-[request]" */ `./locales/${currentLanguage.lng}.json`
+  );
 
   languageDetector.cacheUserLanguage(currentLanguage.lng);
 };
@@ -76,7 +78,9 @@ export const setLanguageFirstTime = async () => {
 
   document.documentElement.dir = currentLanguage.rtl ? "rtl" : "ltr";
 
-  currentLanguageData = await import(`./locales/${currentLanguage.lng}.json`);
+  currentLanguageData = await import(
+    /* webpackChunkName: "i18n-[request]" */ `./locales/${currentLanguage.lng}.json`
+  );
 
   languageDetector.cacheUserLanguage(currentLanguage.lng);
 };