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
I can easily build each of my modules into AMD, but how can I still asynchronously and separately fetch them using
System.import()
?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?