manual chunking

Author: catFurr

Makefile

@@ -59,6 +59,20 @@ deploy-appbundle:
 		$(BUILD_DIR)/close3.min.js \
 		$(BUILD_DIR)/close3.min.js.map \
 		$(DEPLOY_DIR) || true
+	cp \
+		$(BUILD_DIR)/excalidraw.min.js \
+		$(BUILD_DIR)/excalidraw.min.js.map \
+		$(BUILD_DIR)/rnnoise.min.js \
+		$(BUILD_DIR)/rnnoise.min.js.map \
+		$(BUILD_DIR)/ts-ebml.min.js \
+		$(BUILD_DIR)/ts-ebml.min.js.map \
+		$(BUILD_DIR)/zxcvbn.min.js \
+		$(BUILD_DIR)/zxcvbn.min.js.map \
+		$(BUILD_DIR)/vendor.min.js \
+		$(BUILD_DIR)/vendor.min.js.map \
+		$(BUILD_DIR)/react.min.js \
+		$(BUILD_DIR)/react.min.js.map \
+		$(DEPLOY_DIR) || true
 
 deploy-lib-jitsi-meet:
 	cp \

react/features/base/util/isInsecureRoomName.ts

@@ -32,7 +32,7 @@ function isValidUUID(str: string) {
  */
 function _getZxcvbn() {
     if (!_zxcvbnPromise) {
-        _zxcvbnPromise = import('zxcvbn').then(module => module.default);
+        _zxcvbnPromise = import(/* webpackChunkName: "zxcvbn" */ 'zxcvbn').then(module => module.default);
     }
 
     return _zxcvbnPromise;

react/features/recording/components/Recording/LocalRecordingManager.web.ts

@@ -347,7 +347,7 @@ const LocalRecordingManager: ILocalRecordingManager = {
  */
 async function fixDuration(data: Blob, duration: number): Promise<Blob> {
     // Dynamically import ts-ebml library
-    const ebml = await import('ts-ebml/dist/EBML.min.js' as any);
+    const ebml = await import(/* webpackChunkName: "ts-ebml" */ 'ts-ebml/dist/EBML.min.js' as any);
 
     const decoder = new ebml.Decoder();
     const reader = new ebml.Reader();

react/features/stream-effects/noise-suppression/NoiseSuppressorWorklet.ts

@@ -71,7 +71,7 @@ class NoiseSuppressorWorklet extends AudioWorkletProcessor {
     private async _initializeProcessor() {
         try {
             // Dynamically import the rnnoise module
-            const rnnoiseModule = await import('@jitsi/rnnoise-wasm' as any);
+            const rnnoiseModule = await import(/* webpackChunkName: "rnnoise" */ '@jitsi/rnnoise-wasm' as any);
             const { createRNNWasmModuleSync } = rnnoiseModule;
 
             this._denoiseProcessor = new RnnoiseProcessor(createRNNWasmModuleSync());

react/features/stream-effects/rnnoise/index.ts

@@ -15,7 +15,7 @@ let rnnoiseModule: Promise<any> | undefined;
  */
 export function createRnnoiseProcessor() {
     if (!rnnoiseModule) {
-        rnnoiseModule = import('@jitsi/rnnoise-wasm' as any).then(m => {
+        rnnoiseModule = import(/* webpackChunkName: "rnnoise" */ '@jitsi/rnnoise-wasm' as any).then(m => {
             const { createRNNWasmModule } = m;
 
             return createRNNWasmModule();

react/features/whiteboard/components/web/WhiteboardApp.tsx

@@ -33,7 +33,7 @@ export default class WhiteboardApp extends BaseApp<any> {
         if (!roomId && !roomKey) {
             try {
                 // Dynamically import generateCollaborationLinkData
-                const excalidrawModule = await import('@jitsi/excalidraw');
+                const excalidrawModule = await import(/* webpackChunkName: "excalidraw" */ '@jitsi/excalidraw');
                 const collabDetails = await excalidrawModule.generateCollaborationLinkData();
 
                 roomId = collabDetails.roomId;

react/features/whiteboard/hooks/useExcalidraw.ts

@@ -9,7 +9,7 @@ let _excalidrawPromise: Promise<any> | null = null;
  */
 function _getExcalidraw() {
     if (!_excalidrawPromise) {
-        _excalidrawPromise = import('@jitsi/excalidraw');
+        _excalidrawPromise = import(/* webpackChunkName: "excalidraw" */ '@jitsi/excalidraw');
     }
 
     return _excalidrawPromise;

react/features/whiteboard/middleware.web.ts

@@ -143,7 +143,7 @@ async function setNewWhiteboardOpen(store: IStore) {
     const { dispatch, getState } = store;
 
     // Dynamically import generateCollaborationLinkData
-    const excalidrawModule = await import('@jitsi/excalidraw');
+    const excalidrawModule = await import(/* webpackChunkName: "excalidraw" */ '@jitsi/excalidraw');
     const collabLinkData = await excalidrawModule.generateCollaborationLinkData();
     const state = getState();
     const conference = getCurrentConference(state);

webpack.config.js

@@ -186,7 +186,32 @@ function getConfig(options = {}) {
         },
         optimization: {
             concatenateModules: isProduction,
-            minimize: isProduction
+            minimize: isProduction,
+            splitChunks: {
+                chunks: 'all',
+                cacheGroups: {
+                    // React chunk for React and React-DOM (higher priority)
+                    react: {
+                        test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
+                        name: 'react',
+                        chunks: 'all',
+                        priority: 20,
+                        enforce: true
+                    },
+                    vendor: {
+                        test: /[\\/]node_modules[\\/]/,
+                        name: 'vendor',
+                        chunks: 'initial', // Only bundle initial chunks, not async chunks
+                        priority: 10,
+                        enforce: true
+                    },
+                    default: {
+                        minChunks: 2,
+                        priority: -20,
+                        reuseExistingChunk: true
+                    }
+                }
+            }
         },
         output: {
             filename: `[name]${isProduction ? '.min' : ''}.js`,