Merge pull request #379 from cidgoh/feat-dynamic-getting-started

Use dynamic import for Getting Started content

lib/Toolbar.js

@@ -8,7 +8,6 @@ import '@selectize/selectize/dist/css/selectize.bootstrap4.css';
 import { exportFile, exportJsonFile } from './utils/files';
 
 import template from './toolbar.html';
-import { getGettingStartedMarkup } from './toolbarGettingStarted';
 
 import './toolbar.css';
 
@@ -40,7 +39,20 @@ class Toolbar {
     this.$selectTemplate = $('#select-template');
 
     $('#version-dropdown-item').text('version ' + VERSION);
-    $('#getting-started-carousel-container').html(getGettingStartedMarkup());
+
+    // Defer loading the Getting Started content until it is used for the first
+    // time. In ES bundles this dynamic import results in a separate output chunk,
+    // which reduces the initial load size. There is no equivalent in UMD bundles,
+    // in which case the content gets inlined.
+    $('#getting-started-modal').on('show.bs.modal', async function () {
+      const modalContainer = $('#getting-started-carousel-container');
+      if (!modalContainer.html()) {
+        const { getGettingStartedMarkup } = await import(
+          './toolbarGettingStarted'
+        );
+        modalContainer.html(getGettingStartedMarkup());
+      }
+    });
 
     // Select menu for available templates. If the `templatePath` option was
     // provided attempt to use that one. If not the first item in the menu

lib/rollup.config.js

@@ -24,6 +24,7 @@ export default {
       globals: {
         jquery: '$',
       },
+      inlineDynamicImports: true,
     },
   ],
   external: ['jquery'],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-harmonizer",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "description": "A standardized spreadsheet editor and validator that can be run offline and locally",
   "repository": "[email protected]:cidgoh/DataHarmonizer.git",
   "license": "MIT",