WIP: Reduce bundle size in editor package

apps/web/src/data/de/index.ts

@@ -1,10 +1,23 @@
 import { licenses } from './license-data-short';
-import { headerData, footerData, landingSubjectsData, secondaryMenus } from './menu-data';
+
+const isBundlingEditor = Boolean(process?.env?.BUNDLE_EDITOR || false)
+
+let menuData = null;
+
+if (!isBundlingEditor) {
+  menuData = await import('./menu-data');
+}
+
+
 export const instanceData = {
   lang: "de",
-  headerData,
-  footerData,
-  secondaryMenus,
+  ...(menuData
+    ?  {
+      headerData: menuData.headerData,
+      footerData: menuData.footerData,
+      secondaryMenus: menuData.secondaryMenus,
+    } :
+    {}),
   licenses,
   strings: {
     header: {
@@ -471,7 +484,11 @@ export const instanceData = {
 };
 export const instanceLandingData = {
   lang: "de",
-  subjectsData: landingSubjectsData,
+  ...(menuData
+    ?  {
+      subjectsData: menuData.landingSubjectsData,
+    } :
+    {}),
   strings: {
     vision: "Wir ermöglichen Schüler*innen und Studierenden selbständig und im eigenen Tempo zu lernen – unabhängig von den finanziellen Möglichkeiten ihrer Eltern, denn serlo.org ist und bleibt komplett kostenlos.\n\nUnsere Vision ist es, hochwertige Bildung weltweit frei verfügbar zu machen.",
     learnMore: "Mehr erfahren",
@@ -1169,14 +1186,14 @@ export const kratosMailStrings = {
       subject: "👉 Zugang zu deinem Serlo Account",
       'body.plaintext': `👋 Hi {{ .Identity.traits.username }},
 versuchst du wieder Zugang zu deinem Account zu bekommen? (Wenn nein, kannst du die Mail einfach ignorieren)
- 
+
 Um dein Passwort zurückzusetzen, öffne bitte diesen Link im Browser:
 {{ .RecoveryURL }}
 
 Das Serlo-Team wünscht dir viel Erfolg!`,
       body: `<p>👋 Hi <b>{{ .Identity.traits.username }}</b>,</p>
 <p>versuchst du wieder Zugang zu deinem Account zu bekommen? (Wenn nein, kannst du die Mail einfach ignorieren)</p>
- 
+
 <p>Um dein Passwort zurückzusetzen, öffne bitte diesen Link im Browser:
 <a href="{{ .RecoveryURL }}">{{ .RecoveryURL }}</a><br/><br/>Viel Erfolg! Dein Serlo Team</p>`
     },
@@ -1207,7 +1224,7 @@ Sonst kannst du diese Mail einfach ignorieren.
       'body.plaintext': `Hi {{ .Identity.traits.username }},
 
 wunderbar dich auf serlo.org zu haben 🎉
-      
+
 Bitte bestätige deinen brandneuen Account mit einem Klick auf diesen Link:
 {{ .VerificationURL }}
 

apps/web/src/data/en/index.ts

@@ -1,15 +1,24 @@
 import { licenses } from './license-data-short'
-import {
-  headerData,
-  footerData,
-  landingSubjectsData,
-  secondaryMenus,
-} from './menu-data'
+
+const isBundlingEditor = Boolean(process?.env?.BUNDLE_EDITOR || false)
+
+let menuData = null;
+
+if (!isBundlingEditor) {
+  menuData = await import('./menu-data');
+}
+
+
+
 export const instanceData = {
   lang: 'en',
-  headerData,
-  footerData,
-  secondaryMenus,
+  ...(menuData
+    ?  {
+      headerData: menuData.headerData,
+      footerData: menuData.footerData,
+      secondaryMenus: menuData.secondaryMenus,
+    } :
+    {}),
   licenses,
   strings: {
     header: {
@@ -522,7 +531,11 @@ export const instanceData = {
 }
 export const instanceLandingData = {
   lang: 'en',
-  subjectsData: landingSubjectsData,
+  ...(menuData
+    ?  {
+      subjectsData: menuData.landingSubjectsData,
+    } :
+    {}),
   strings: {
     vision:
       'It is our vision to enable personalized learning and provide high quality educational resources worldwide – completely free of charge. Serlo is a grassroots organization inspired by Wikipedia. We already provide thousands of articles, videos and solved exercises for five million German students every year. Now it’s time to go international.',

packages/editor/package.json

@@ -28,6 +28,7 @@
   "scripts": {
     "_eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "_prettier": "prettier .",
+    "prebuild": "cross-env BUNDLE_EDITOR=true",
     "build": "vite build",
     "format": "npm-run-all --continue-on-error \"format:*\"",
     "format:eslint": "yarn _eslint --fix",
@@ -158,6 +159,7 @@
     "redux": "^4.2.1",
     "redux-saga": "^1.3.0",
     "reselect": "^4.1.8",
+    "rollup-plugin-visualizer": "^5.12.0",
     "slate": "^0.94.1",
     "slate-react": "^0.99.0",
     "styled-jsx-plugin-postcss": "^4.0.1",

packages/editor/tsconfig.json

@@ -7,7 +7,7 @@
       "@editor/*": ["./src/*"]
     },
     "outDir": "dist",
-    "module": "ES2022",
+    "module": "ESNext",
     "moduleResolution": "bundler"
   },
   "include": [
@@ -19,5 +19,10 @@
     "../../apps/web/**/*ts",
     "../../apps/web/**/*tsx"
   ],
-  "exclude": ["node_modules", "dist"]
+  "exclude": [
+    "node_modules",
+    "dist",
+    "../../apps/web/src/pages/*tsx",
+    "../../apps/web/src/pages/*ts"
+  ]
 }

packages/editor/vite.config.ts

@@ -4,20 +4,28 @@ import { defineConfig } from 'vite'
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import dts from 'vite-plugin-dts'
 import svgr from 'vite-plugin-svgr'
+import { visualizer } from 'rollup-plugin-visualizer'
 
 // https://vitejs.dev/guide/build.html#library-mode
 /* we use vite only for building the serlo editor package */
 
 // eslint-disable-next-line import/no-default-export
 export default defineConfig({
+  esbuild: {
+    target: 'esnext'
+  },
   build: {
+    target: 'esnext',
     lib: {
       entry: resolve(__dirname, 'src/package/index.ts'),
       name: 'editor',
       fileName: 'editor',
       formats: ['es'],
     },
     rollupOptions: {
+      plugins: [
+        visualizer({ open: true, filename: 'bundle-analysis.html' }),
+      ],
       external: ['react', 'react-dom'],
       output: {
         globals: {

packages/typescript-config/base.json

@@ -21,7 +21,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "es6"
+    "target": "ESNext"
   },
   "exclude": ["node_modules"]
 }

yarn.lock

@@ -5190,6 +5190,7 @@ __metadata:
     redux: ^4.2.1
     redux-saga: ^1.3.0
     reselect: ^4.1.8
+    rollup-plugin-visualizer: ^5.12.0
     serlo-katex-styles: ^1.0.0
     slate: ^0.94.1
     slate-react: ^0.99.0
@@ -8735,6 +8736,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"define-lazy-prop@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "define-lazy-prop@npm:2.0.0"
+  checksum: 0115fdb065e0490918ba271d7339c42453d209d4cb619dfe635870d906731eff3e1ade8028bb461ea27ce8264ec5e22c6980612d332895977e89c1bbc80fcee2
+  languageName: node
+  linkType: hard
+
 "define-properties@npm:^1.1.3, define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
   version: 1.2.1
   resolution: "define-properties@npm:1.2.1"
@@ -11520,6 +11528,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-docker@npm:^2.0.0, is-docker@npm:^2.1.1":
+  version: 2.2.1
+  resolution: "is-docker@npm:2.2.1"
+  bin:
+    is-docker: cli.js
+  checksum: 3fef7ddbf0be25958e8991ad941901bf5922ab2753c46980b60b05c1bf9c9c2402d35e6dc32e4380b980ef5e1970a5d9d5e5aa2e02d77727c3b6b5e918474c56
+  languageName: node
+  linkType: hard
+
 "is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -11852,6 +11869,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-wsl@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "is-wsl@npm:2.2.0"
+  dependencies:
+    is-docker: ^2.0.0
+  checksum: 20849846ae414997d290b75e16868e5261e86ff5047f104027026fd61d8b5a9b0b3ade16239f35e1a067b3c7cc02f70183cb661010ed16f4b6c7c93dad1b19d8
+  languageName: node
+  linkType: hard
+
 "isarray@npm:^2.0.5":
   version: 2.0.5
   resolution: "isarray@npm:2.0.5"
@@ -14685,6 +14711,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"open@npm:^8.4.0":
+  version: 8.4.2
+  resolution: "open@npm:8.4.2"
+  dependencies:
+    define-lazy-prop: ^2.0.0
+    is-docker: ^2.1.1
+    is-wsl: ^2.2.0
+  checksum: 6388bfff21b40cb9bd8f913f9130d107f2ed4724ea81a8fd29798ee322b361ca31fa2cdfb491a5c31e43a3996cfe9566741238c7a741ada8d7af1cb78d85cf26
+  languageName: node
+  linkType: hard
+
 "opener@npm:^1.5.2":
   version: 1.5.2
   resolution: "opener@npm:1.5.2"
@@ -16451,6 +16488,25 @@ react-notify-toast@Entkenntnis/tmp-react-notify-toast:
   languageName: node
   linkType: hard
 
+"rollup-plugin-visualizer@npm:^5.12.0":
+  version: 5.12.0
+  resolution: "rollup-plugin-visualizer@npm:5.12.0"
+  dependencies:
+    open: ^8.4.0
+    picomatch: ^2.3.1
+    source-map: ^0.7.4
+    yargs: ^17.5.1
+  peerDependencies:
+    rollup: 2.x || 3.x || 4.x
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  bin:
+    rollup-plugin-visualizer: dist/bin/cli.js
+  checksum: 17dc10a93d4bd457c8bb7796a57c284487fb00f4b9703a33a1a954f5d40c66a89b24aca98564569922456f4fa8f72281c3ef96a95502195e6930b3fac62fce8e
+  languageName: node
+  linkType: hard
+
 "rollup@npm:^4.13.0":
   version: 4.14.0
   resolution: "rollup@npm:4.14.0"
@@ -17108,7 +17164,7 @@ react-notify-toast@Entkenntnis/tmp-react-notify-toast:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.7.3":
+"source-map@npm:^0.7.3, source-map@npm:^0.7.4":
   version: 0.7.4
   resolution: "source-map@npm:0.7.4"
   checksum: 01cc5a74b1f0e1d626a58d36ad6898ea820567e87f18dfc9d24a9843a351aaa2ec09b87422589906d6ff1deed29693e176194dc88bcae7c9a852dc74b311dbf5
@@ -19316,7 +19372,7 @@ react-notify-toast@Entkenntnis/tmp-react-notify-toast:
   languageName: node
   linkType: hard
 
-"yargs@npm:^17.0.0, yargs@npm:^17.3.1":
+"yargs@npm:^17.0.0, yargs@npm:^17.3.1, yargs@npm:^17.5.1":
   version: 17.7.2
   resolution: "yargs@npm:17.7.2"
   dependencies: