What if JupyterLab was made of many small files?

async-loading-lab.diff

diff --git a/dev_mode/webpack.config.js b/dev_mode/webpack.config.js
index 78c1769a5..25816f6ac 100644
--- a/dev_mode/webpack.config.js
+++ b/dev_mode/webpack.config.js
@@ -153,6 +153,9 @@ module.exports = [
       filename: '[name].[chunkhash].js'
     },
     optimization: {
+      runtimeChunk: {
+        name: entrypoint => `runtime~${entrypoint.name}`
+      },
       splitChunks: {
         chunks: 'all'
       }
diff --git a/jupyterlab/staging/index.js b/jupyterlab/staging/index.js
index abc005876..dc3189905 100644
--- a/jupyterlab/staging/index.js
+++ b/jupyterlab/staging/index.js
@@ -19,8 +19,8 @@ require('./imports.css');
 /**
  * The main entry point for the application.
  */
-function main() {
-  var JupyterLab = require('@jupyterlab/application').JupyterLab;
+async function main() {
+  var JupyterLab;
 
   // Get the disabled extensions.
   var disabled = { patterns: [], matches: [] };
@@ -71,82 +71,92 @@ function main() {
   var mimeExtensions = [];
   var extension;
   var extMod;
-  {{#each jupyterlab_mime_extensions}}
-  try {
-    if (isDeferred('{{key}}')) {
-      deferred.matches.push('{{key}}');
-      ignorePlugins.push('{{key}}');
-    }
-    if (isDisabled('{{@key}}')) {
-      disabled.matches.push('{{@key}}');
-    } else {
-      extMod = require('{{@key}}/{{this}}');
-      extension = extMod.default;
-
-      // Handle CommonJS exports.
-      if (!extMod.hasOwnProperty('__esModule')) {
-        extension = extMod;
-      }
 
-      if (Array.isArray(extension)) {
-        extension.forEach(function(plugin) {
-          if (isDeferred(plugin.id)) {
-            deferred.matches.push(plugin.id);
-            ignorePlugins.push(plugin.id);
+  await Promise.all([
+    (async () => {
+      JupyterLab = (await import('@jupyterlab/application')).JupyterLab;
+    })(),
+    {{#each jupyterlab_mime_extensions}}
+      (async () => {
+        try {
+          if (isDeferred('{{key}}')) {
+            deferred.matches.push('{{key}}');
+            ignorePlugins.push('{{key}}');
           }
-          if (isDisabled(plugin.id)) {
-            disabled.matches.push(plugin.id);
-            return;
+          if (isDisabled('{{@key}}')) {
+            disabled.matches.push('{{@key}}');
+          } else {
+            extMod = await import(/* webpackChunkName: "mimeExtensions" */'{{@key}}/{{this}}');
+            extension = extMod.default;
+
+            // Handle CommonJS exports.
+            if (!extMod.hasOwnProperty('__esModule')) {
+              extension = extMod;
+            }
+
+            if (Array.isArray(extension)) {
+              extension.forEach(function(plugin) {
+                if (isDeferred(plugin.id)) {
+                  deferred.matches.push(plugin.id);
+                  ignorePlugins.push(plugin.id);
+                }
+                if (isDisabled(plugin.id)) {
+                  disabled.matches.push(plugin.id);
+                  return;
+                }
+                mimeExtensions.push(plugin);
+              });
+            } else {
+              mimeExtensions.push(extension);
+            }
           }
-          mimeExtensions.push(plugin);
-        });
-      } else {
-        mimeExtensions.push(extension);
-      }
-    }
-  } catch (e) {
-    console.error(e);
-  }
-  {{/each}}
-
-  // Handled the registered standard extensions.
-  {{#each jupyterlab_extensions}}
-  try {
-    if (isDeferred('{{key}}')) {
-      deferred.matches.push('{{key}}');
-      ignorePlugins.push('{{key}}');
-    }
-    if (isDisabled('{{@key}}')) {
-      disabled.matches.push('{{@key}}');
-    } else {
-      extMod = require('{{@key}}/{{this}}');
-      extension = extMod.default;
-
-      // Handle CommonJS exports.
-      if (!extMod.hasOwnProperty('__esModule')) {
-        extension = extMod;
-      }
-
-      if (Array.isArray(extension)) {
-        extension.forEach(function(plugin) {
-          if (isDeferred(plugin.id)) {
-            deferred.matches.push(plugin.id);
-            ignorePlugins.push(plugin.id);
+        } catch (e) {
+          console.error(e);
+        }
+      })(),
+    {{/each}}
+
+    // Handled the registered standard extensions.
+    {{#each jupyterlab_extensions}}
+      (async () => {
+        try {
+          if (isDeferred('{{key}}')) {
+            deferred.matches.push('{{key}}');
+            ignorePlugins.push('{{key}}');
           }
-          if (isDisabled(plugin.id)) {
-            disabled.matches.push(plugin.id);
-            return;
+          if (isDisabled('{{@key}}')) {
+            disabled.matches.push('{{@key}}');
+          } else {
+            extMod = await import(/* webpackChunkName: "{{@key}}" */'{{@key}}/{{this}}');
+            extension = extMod.default;
+
+            // Handle CommonJS exports.
+            if (!extMod.hasOwnProperty('__esModule')) {
+              extension = extMod;
+            }
+
+            if (Array.isArray(extension)) {
+              extension.forEach(function(plugin) {
+                if (isDeferred(plugin.id)) {
+                  deferred.matches.push(plugin.id);
+                  ignorePlugins.push(plugin.id);
+                }
+                if (isDisabled(plugin.id)) {
+                  disabled.matches.push(plugin.id);
+                  return;
+                }
+                register.push(plugin);
+              });
+            } else {
+              register.push(extension);
+            }
           }
-          register.push(plugin);
-        });
-      } else {
-        register.push(extension);
-      }
-    }
-  } catch (e) {
-    console.error(e);
-  }
-  {{/each}}
+        } catch (e) {
+          console.error(e);
+        }
+      })(),
+    {{/each}}
+  ]);
 
   var lab = new JupyterLab({
     mimeExtensions: mimeExtensions,
@@ -200,4 +210,4 @@ function main() {
 
 }
 
-window.addEventListener('load', main);
+window.addEventListener('load', async () => await main());
diff --git a/jupyterlab/staging/webpack.config.js b/jupyterlab/staging/webpack.config.js
index 78c1769a5..3b54a117f 100644
--- a/jupyterlab/staging/webpack.config.js
+++ b/jupyterlab/staging/webpack.config.js
@@ -153,6 +153,7 @@ module.exports = [
       filename: '[name].[chunkhash].js'
     },
     optimization: {
+      runtimeChunk: 'multiple',
       splitChunks: {
         chunks: 'all'
       }

the-static-files.txt

2.3M Aug 12 22:37 0.2debc96794081151e50f.js
2.0M Aug 12 22:37 1.ba120c19ebe15dc143e1.js
 96K Aug 12 22:37 14279fa7b78ac2230a015925b603a1f7.eot
 96K Aug 12 22:37 657723dc996cf0ae6b4c6110f5d4ddab.woff
 93K Aug 12 22:37 5fa1b8f25b4aa8787f70d5b6b7f0b90f.ttf
 13K Aug 12 22:37 4.8af58ff2b4b0e8005757.js
542K Aug 12 22:37 3.2e2682ca21e208f2567b.js
1.9M Aug 12 22:37 2.658bde32642991e933b8.js
434K Aug 12 22:37 912ec66d7572ff821749319396470bde.svg
 96K Aug 12 22:37 90247cfdde1bd7b76d804a797d5dec56.ttf
 94K Aug 12 22:37 6fdb722c94434811f89a68eafc4531f8.eot
162K Aug 12 22:37 674f50d287a8c48dc19ba404d20fe713.eot
 96K Aug 12 22:37 fee66e712a8a08eef5805a46892932ad.woff
 93K Aug 12 22:37 cd1a26696ebf17a89545a3f9067d7028.woff
162K Aug 12 22:37 b06871f281fee6b241d60582ae9369b9.ttf
 76K Aug 12 22:37 af7ae505a9eed503f8b8e6982036873e.woff2
 12K Aug 12 22:37 package.json
196K Aug 12 22:37 main.adc361ef464a3f80cc18.js
 49K Aug 12 22:37 index.out.js
1.8K Aug 12 22:37 index.html
2.3K Aug 12 22:37 imports.css
 52K Aug 12 22:37 runtime~main.061a1df38cde212de629.js
6.6M Aug 12 22:37 vendors~main.764a8d9d91a78af16820.js

@jupyterlab:
total 324K
1.9K Aug 12 22:37 docmanager-extension.7b3ff11b04f50dc29948.js
1.9K Aug 12 22:37 csvviewer-extension.98b7552893b04ea02513.js
1.9K Aug 12 22:37 console-extension.8fbe35434b90f22a63ec.js
1.9K Aug 12 22:37 completer-extension.64d0c39a292d649e0bb7.js
1.9K Aug 12 22:37 codemirror-extension.948fa80d4649efc69120.js
1.9K Aug 12 22:37 apputils-extension.ec2c2bc512d1c54953cb.js
1.9K Aug 12 22:37 application-extension.dc0782bd8258bd7822f8.js
1.9K Aug 12 22:37 application.12be9175dd638589662c.js
1.9K Aug 12 22:37 imageviewer-extension.ae3aa75140b72794d6cb.js
 16K Aug 12 22:37 hub-extension.7e0154ef4f1a4a319714.js
1.9K Aug 12 22:37 htmlviewer-extension.a3f14fce294b7cdc4b04.js
1.9K Aug 12 22:37 help-extension.b66500e774bc15390228.js
1.9K Aug 12 22:37 fileeditor-extension.b2ba06fe43a9e45fc6a5.js
1.9K Aug 12 22:37 filebrowser-extension.e39ae91060c5bf9ec8ee.js
1.9K Aug 12 22:37 extensionmanager-extension.3f39b979256f100d3223.js
 20K Aug 12 22:37 documentsearch-extension.7f61ecc6c4b62005b269.js
 19K Aug 12 22:37 pdf-extension.bc2f29fbc91c9ed3c8c2.js
1.9K Aug 12 22:37 notebook-extension.fdd3a0754d7e47a9799d.js
 15K Aug 12 22:37 mathjax2-extension.a445d2969e9cb1401e8c.js
1.9K Aug 12 22:37 markdownviewer-extension.7444c84aa3bf7da24cf1.js
1.9K Aug 12 22:37 mainmenu-extension.0318c8434b53382bd6ed.js
1.9K Aug 12 22:37 launcher-extension.6e7ef74d92e465199d28.js
1.9K Aug 12 22:37 json-extension.e6587bc80dae87f35f98.js
8.5K Aug 12 22:37 javascript-extension.d64be3d2db8984082446.js
1.9K Aug 12 22:37 inspector-extension.997defd54733b5209ff1.js
1.9K Aug 12 22:37 terminal-extension.ae451b927181cc2d59bc.js
8.4K Aug 12 22:37 tabmanager-extension.bb704e07b56cdfe15a8c.js
 29K Aug 12 22:37 statusbar-extension.4d9240b991eae3f8ea6c.js
1.9K Aug 12 22:37 settingeditor-extension.1185441119a8ab4c9ede.js
 32K Aug 12 22:37 running-extension.23645efe408dd942eb00.js
8.8K Aug 12 22:37 rendermime-extension.bbdd76114e1a81e861de.js
 14K Aug 12 22:37 vega5-extension.deb9aca3d08dadafa6a3.js
 14K Aug 12 22:37 vega4-extension.6dd8c67984c5eda32f71.js
1.9K Aug 12 22:37 vdom-extension.fa587e95213ce8208b8b.js
1.9K Aug 12 22:37 tooltip-extension.f4be6c29c762502c8106.js
4.5K Aug 12 22:37 theme-light-extension.defe9e9d18a58f84e46c.js
4.5K Aug 12 22:37 theme-dark-extension.b8003accd4ca0ade88cf.js
drwxrwxr-x. 2 weg weg 4.0K Aug 12 22:37 .
drwxrwxr-x. 4 weg weg 4.0K Aug 29 23:57 ..

vendors~@jupyterlab:
total 5.7M
drwxrwxr-x. 3 weg weg 4.0K Aug 12 22:37 application~@jupyterlab
 64K Aug 12 22:37 application-extension.d12d9ec48e8f8ffcc49d.js
drwxrwxr-x. 3 weg weg 4.0K Aug 12 22:37 apputils-extension~@jupyterlab
 67K Aug 12 22:37 apputils-extension.ed9fecac8810067998eb.js
177K Aug 12 22:37 completer-extension.f9fcd82af6d45da41967.js
drwxrwxr-x. 3 weg weg 4.0K Aug 12 22:37 codemirror-extension~@jupyterlab
 31K Aug 12 22:37 codemirror-extension.c950d2f7e6663b0cc82d.js
drwxrwxr-x. 4 weg weg 4.0K Aug 12 22:37 completer-extension~@jupyterlab
drwxrwxr-x. 4 weg weg 4.0K Aug 12 22:37 console-extension~@jupyterlab
 85K Aug 12 22:37 console-extension.cde784ea0bda126995b1.js
drwxrwxr-x. 2 weg weg 4.0K Aug 12 22:37 csvviewer-extension~@jupyterlab
691K Aug 12 22:37 csvviewer-extension.d636d4ce4bea527d2412.js
 66K Aug 12 22:37 help-extension.07351ae415f129179a6c.js
 91K Aug 12 22:37 fileeditor-extension.8821576936277e121ea7.js
 76K Aug 12 22:37 filebrowser-extension.0178bb9c065c178b0fc4.js
290K Aug 12 22:37 extensionmanager-extension.b2cbc4b2f2a8cf4d5633.js
 58K Aug 12 22:37 docmanager-extension.3ce06a8eeded23ee5cc7.js
658K Aug 12 22:37 json-extension.2f9553226090d79515b9.js
 82K Aug 12 22:37 inspector-extension.2092fbca5419b88d3194.js
 40K Aug 12 22:37 imageviewer-extension.4f655c77037b15090b6b.js
 32K Aug 12 22:37 htmlviewer-extension.0d19c123016505348ccf.js
 28K Aug 12 22:37 shortcuts-extension.63dfcafbedb2cd7c163b.js
152K Aug 12 22:37 settingeditor-extension.63e042ebc3775bcbd6c4.js
211K Aug 12 22:37 notebook-extension.63a739340376789164fc.js
 38K Aug 12 22:37 markdownviewer-extension.f21a349b6f73c0f3e410.js
 72K Aug 12 22:37 mainmenu-extension.823a6532a97618952303.js
 37K Aug 12 22:37 launcher-extension.509877024f8200c931fb.js
 45K Aug 12 22:37 tooltip-extension.3005f9f96d3c726fe497.js
1.2M Aug 12 22:37 terminal-extension.f46a0ee08cb73a0bc306.js
drwxrwxr-x. 8 weg weg 4.0K Aug 12 22:37 .
1.5M Aug 12 22:37 vdom-extension.3de34eb18325f48b6fdf.js
drwxrwxr-x. 4 weg weg 4.0K Aug 29 23:57 ..