finos/ipyregulartable

Consider making widget loading lazy in lab?

bollwyvl opened this issue · 1 comments

Thanks again for this extension!

Another thing I noticed while looking into #23: once enough heavy labextensions are loaded in lab2, the build can start failing because webpack runs out of RAM/open file handles.

Changing the exports when registering the extension to be lazy loading with await import allows the downloading of the widget (and dependencies) to be deferred until the widget is actually requested, and not block the moon animation.

In this case, it knocks 7mb off the main bundle in development (already 30mb), while similarly taking 600kb off the production build (4.5mb)

diff --git a/js/src/plugin.ts b/js/src/plugin.ts
index ca5e534..938fe5b 100644
--- a/js/src/plugin.ts
+++ b/js/src/plugin.ts
@@ -18,7 +18,6 @@ import {
   IJupyterWidgetRegistry,
 } from "@jupyter-widgets/base";
 
-import * as widgetExports from "./widget";
 
 import {
   MODULE_VERSION,
@@ -44,7 +43,7 @@ export default examplePlugin;
  */
 function activateWidgetExtension(app: Application<Widget>, registry: IJupyterWidgetRegistry): void {
   registry.registerWidget({
-    exports: widgetExports,
+    exports: async () => await import(/* webpackChunkName: "ipyregulartable" */ "./widget"),
     name: "ipyregulartable",
     version: MODULE_VERSION,
   });
diff --git a/js/tsconfig.json b/js/tsconfig.json
index 71bc63b..03397b3 100644
--- a/js/tsconfig.json
+++ b/js/tsconfig.json
@@ -3,7 +3,7 @@
     "declaration": true,
     "esModuleInterop":true,
     "lib": ["es2015", "dom"],
-    "module": "commonjs",
+    "module": "esnext",
     "moduleResolution": "node",
     "noUnusedLocals": true,
     "outDir": "./lib",
@@ -13,11 +13,11 @@
     "sourceMap": true,
     "strict": true,
     "strictPropertyInitialization": false,
-    "target": "ES6",
+    "target": "es2015",
     "types": ["jest", "node"]
   },
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
   ]
-}
\ No newline at end of file
+}

im ok with this