Let's say, I have a React project and the main entry point is app.js. Where I include React, React-DOM and jQuery like this:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
...
Now imagine I have some routes defined here which will cause it to trigger route1.js, route2.js etc. on demand like this:
SystemJS.import('route1.js');
Now, I use jspm to bundle my codes like this (Say, besides react and react-dom my app.js also imports many custom written bundles). So, when I bundle app.js in bundles up all the libraries and custom modules together to say build.js.
jspm bundle app.js build.js
Now, there are code inside build.js which will trigger loading of the route1.js, route2.js etc. on demand. However, route1.js and route2.js alos use ES6 imports of react and react-dom. Now I could of course use webpack or jspm to also bundle up these route1.js, route2.js etc. Look, that I have already included the react and react-dom libraries in build.js, only fetching new route1.js, route2.js. I do not want to include the same libraries inside route1.js or route2.js because I have already downloaded it once inside app.js. But only fetching rout1.js or route.js as they are (with ES6 import statements) won't work because browser do not understand this.
How do I make
- load code on demand at the same time using ES6 code in development
- do not download the same libraries multiple times