Using SystemJS/jspm to load async, es5 modules in production

Viewed 664

I want to be able to asynchronously load dependencies using System.import(), but without having to transpile ES6 to ES5 during production runtime. I want these modules to be transpiled into separate, ES5 modules that are fetched only when needed. I don't want them to be a part of the main bundle.

Dev Workflow

The modules are effectively loading during my production build which is actually worrisome because I don't want to include any dependencies that allow for transpilation.

I have a workflow where I'm using jspm bundle and jspm unbundle to toggle between development and production configurations. In my development environment, I'm including the following scripts:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>

<script>
    System.import('src/main');
</script>

Production Workflow

In production, I'm using jspm bundle --inject to inject the bundles option into System.config. This effectively loads only the necessary files:

system.js
config.js
main.bundle.js

When I try to load a module asynchronously with System.import() during production, it loads fine, which means that transpilation is happening in the browser during production.


Questions

  1. I can easily build each of my modules into AMD, but how can I still asynchronously and separately fetch them using System.import()?

  2. I also want to make sure to include as little browser overhead as possible, which means not including any scripts that perform transpilation. Is there a way to include system.js that does not have transpile capabilities?

1 Answers
Related