Is it possible to bundle multiple JS files instead of the monolithic app.js (aside from dynamic imports?)

help
1

I’m looking at adding a theme system to my application. Because there would be anywhere from 1 to 100 themes, I do not want all of their template code included in the monolithic bundle. I’m looking for a way to bake them as separate bundles.

I have tried to use the dynamic import feature, but I’ve noticed that in order for it to work, there is a mapping added to the start of app.js that defines all of the possible dynamic imports, therefore causing bloat to the file. If I want to add (potentially) hundreds of themes, I can image this mapping bloating the app.js file quite a bit.

Does anyone have a better solution? I’ve been poking around standard-minifier-js but so far haven’t found an easy way to bake multiple bundles.

2

there’s no reason you need all of your dynamic imports defined in the entry point. the point of dynamic imports is that you can load whatever you want, whenever you want. you can just place the theme definitions in a file that’s dynamically loaded on startup, that way the definitions don’t bloat the initial bundle. you could, for instance, do something like this

app.js

Meteor.startup(() => {
   // start your app here
   // once your app is started, lazy-load the app themes module. you don't need to actually 
   // use it yet if you don't want to, but you can load it to ensure it's downloaded to the client
   // so that it's available when you need it
    import('./app-themes')
});

app-themes.js

class AppThemes {
   async getThemeOne() {
      return await import('./themes/theme-one.');
   }
   async getThemeTwo() {
      return await import('./themes/theme-two.');
   }
   async getThemeThree() {
      return await import('./themes/theme-three.');
   }
}

const appThemes = new AppThemes();
export default appThemes;

then later on, whenever you need to load a theme just use the class

import appThemes from './app-themes';

const doSomething = async () => {
   const theme = await appThemes.getThemeOne();
   // now use your theme
};
4 Likes