From 4a268453950149a0c390320cb487908a6cf166ee Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Sun, 18 Oct 2020 23:06:25 +0530 Subject: [PATCH] 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 | 6 ++++- src/data/blob.ts | 8 ++++-- src/data/firebase.ts | 6 +++-- src/data/index.ts | 8 ++++-- src/excalidraw-embed/package-lock.json | 30 ++++++++++++++++++++- src/excalidraw-embed/package.json | 4 +-- src/excalidraw-embed/webpack.prod.config.js | 13 ++++++--- src/i18n.ts | 8 ++++-- 8 files changed, 67 insertions(+), 16 deletions(-) diff --git a/src/components/TopErrorBoundary.tsx b/src/components/TopErrorBoundary.tsx index bd386b4b0..71c2e040c 100644 --- a/src/components/TopErrorBoundary.tsx +++ b/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); diff --git a/src/data/blob.ts b/src/data/blob.ts index 619955952..5f95deecb 100644 --- a/src/data/blob.ts +++ b/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) { diff --git a/src/data/firebase.ts b/src/data/firebase.ts index 87a1036cc..e97044ad5 100644 --- a/src/data/firebase.ts +++ b/src/data/firebase.ts @@ -6,8 +6,10 @@ import Portal from "../components/Portal"; let firebasePromise: Promise | 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); diff --git a/src/data/index.ts b/src/data/index.ts index 39c8aff20..350188639 100644 --- a/src/data/index.ts +++ b/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), }); diff --git a/src/excalidraw-embed/package-lock.json b/src/excalidraw-embed/package-lock.json index 60a1d021f..5c65b64e0 100644 --- a/src/excalidraw-embed/package-lock.json +++ b/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", diff --git a/src/excalidraw-embed/package.json b/src/excalidraw-embed/package.json index 90c51b440..faa44a7de 100644 --- a/src/excalidraw-embed/package.json +++ b/src/excalidraw-embed/package.json @@ -34,8 +34,8 @@ ] }, "peerDependencies": { - "react": "16.13.1", - "react-dom": "16.13.1" + "react": "^16.13.1", + "react-dom": "^16.13.1" }, "devDependencies": { "@babel/core": "7.9.0", diff --git a/src/excalidraw-embed/webpack.prod.config.js b/src/excalidraw-embed/webpack.prod.config.js index e0a65d17f..71dc4be3a 100644 --- a/src/excalidraw-embed/webpack.prod.config.js +++ b/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: { diff --git a/src/i18n.ts b/src/i18n.ts index 03f024914..7165f18fe 100644 --- a/src/i18n.ts +++ b/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); };