diff --git a/lib/Toolbar.js b/lib/Toolbar.js index e32eb6ec..28c03f90 100644 --- a/lib/Toolbar.js +++ b/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 diff --git a/lib/rollup.config.js b/lib/rollup.config.js index ea6c57a8..31f20b0b 100644 --- a/lib/rollup.config.js +++ b/lib/rollup.config.js @@ -24,6 +24,7 @@ export default { globals: { jquery: '$', }, + inlineDynamicImports: true, }, ], external: ['jquery'], diff --git a/package.json b/package.json index 52ee2d0b..be65bc27 100644 --- a/package.json +++ b/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": "git@github.com:cidgoh/DataHarmonizer.git", "license": "MIT",