• SystemJS Version:
• Which library are you using?
  • SystemJS
  • SJS 6.3.2
• Which extras are you using?
  • AMD extra
  • Named Exports
  • Named Register
  • Transform
  • Use Default
  • Global
• Are you using any custom hooks? No

Question

I'm working on migrating the Home Assistant frontend from Webpack to using Rollup. We ship two builds, a build targetting last 2 versions of major browsers and an ES5 build. We rely on code splitting and so for our ES5 build we have settled upon using SystemJS.

To use SystemJS we now have code like this:

const scriptEl = createScriptEl("/static/s.min.js")
scriptEl.onload = function() {
  System.import("/frontend_es5/core.js").then(function() {
    // App should always load after core because core contains polyfills.
    System.import("/frontend_es5/app.js");
  })
}
document.head.append(scriptEl);

This is working, but doesn't load as fast as I would like. The problem here is that the browser doesn't know it has to preload the scripts and so we get a waterfall loading pattern.

To speed it up, I would want to create 1 file that loads SystemJS, the first entrypoint and instantiates it. It would look like:

• content of s.min.js
• named register extra
• core.js but register rewritten to be a named register
• System.import('core') to load core.js

Is this the right approach or am I missing something and could this be done even easier?

(I am aware of the limitation of named extra to only have 1 register per file (#2185), but that should not happen here.)