Merge pull request #1640 from silx-kit/lazy

Lazy-load H5Wasm demo
silx-kit · May 14, 2024 · 33be3b4 · 33be3b4
2 parents a99eb79 + 85bd21b
commit 33be3b4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/apps/demo/src/DemoApp.tsx b/apps/demo/src/DemoApp.tsx
@@ -1,27 +1,32 @@
+import { lazy, Suspense } from 'react';
 import { Redirect, Route, Switch } from 'wouter';
 
 import H5GroveApp from './H5GroveApp';
-import H5WasmApp from './h5wasm/H5WasmApp';
 import Home from './Home';
 import HsdsApp from './HsdsApp';
 import MockApp from './MockApp';
 
+// Split H5Wasm demo into its own bundle, and load it only when the demo is first visited
+const H5WasmApp = lazy(() => import('./h5wasm/H5WasmApp'));
+
 const query = new URLSearchParams(document.location.search);
 // @ts-expect-error
 window.H5WEB_EXPERIMENTAL = query.has('experimental');
 
 function DemoApp() {
   return (
-    <Switch>
-      <Route path="/" component={Home} />
-      <Route path="/h5grove" component={H5GroveApp} />
-      <Route path="/mock" component={MockApp} />
-      <Route path="/hsds" component={HsdsApp} />
-      <Route path="/h5wasm" component={H5WasmApp} />
-      <Route>
-        <Redirect to="/" replace />
-      </Route>
-    </Switch>
+    <Suspense fallback={null}>
+      <Switch>
+        <Route path="/" component={Home} />
+        <Route path="/h5grove" component={H5GroveApp} />
+        <Route path="/mock" component={MockApp} />
+        <Route path="/hsds" component={HsdsApp} />
+        <Route path="/h5wasm" component={H5WasmApp} />
+        <Route>
+          <Redirect to="/" replace />
+        </Route>
+      </Switch>
+    </Suspense>
   );
 }
 

diff --git a/eslint.shared.cjs b/eslint.shared.cjs
@@ -16,8 +16,9 @@ module.exports = {
       enableJavaScriptSpecificRulesInTypeScriptProject: true, // to lint `.eslintrc.js` files and the like
       rules: {
         'sort-keys-fix/sort-keys-fix': 'off', // keys should be sorted based on significance
-        'import/no-default-export': 'off', // default exports are common in React
         'simple-import-sort/exports': 'off', // can make package entry files with numerous exports difficult to read
+        'import/no-default-export': 'off', // default exports are common in React
+        'import/dynamic-import-chunkname': 'off', // Vite generates human-readable chunk names
 
         // Ternaries are sometimes more readable when `true` branch is most significant branch
         'no-negated-condition': 'off',