I'm building an Angular 2 embedded web UI for a very constrained system. Its looking like less than 10% of the build will be my code (which is built into main.[LongHexNumber].js; currently 12kB compressed), with the rest being Angular (in vendor.[LongHexNumber].js; 202kB compressed). Although the main file varies with my code, I've found that the vendor file varies only slightly with different builds (e.g. less than 1% of bytes differ between an empty project and my full application; the size differs by less than 0.02%):
mbpe:project griscom$ ls -l dist*
dist-base:
total 16112
-rw-rw-r-- 1 griscom staff 5430 Dec 31 09:59 favicon.ico
-rw-rw-r-- 1 griscom staff 613 Dec 31 09:59 index.html
-rw-rw-r-- 1 griscom staff 1448 Dec 31 09:59 inline.1022ae8451273b899b59.bundle.js
-rw-rw-r-- 1 griscom staff 2395 Dec 31 09:59 main.d1cf070633a4b48bca71.bundle.js
-rw-rw-r-- 1 griscom staff 62 Dec 31 09:59 styles.4efcf6444bbeac2a8c48.bundle.css
-rw-rw-r-- 1 griscom staff 874583 Dec 31 09:59 vendor.4f0b4d0fcf53ab44d761.bundle.js
-rw-rw-r-- 1 griscom staff 201537 Dec 31 09:59 vendor.4f0b4d0fcf53ab44d761.bundle.js.gz
dist-full:
total 16920
-rw-rw-r-- 1 griscom staff 5430 Dec 31 10:01 favicon.ico
-rw-rw-r-- 1 griscom staff 3225 Dec 31 10:01 index.html
-rw-rw-r-- 1 griscom staff 1448 Dec 31 10:01 inline.ad75f7d5be8aa9dc6ed7.bundle.js
-rw-rw-r-- 1 griscom staff 62989 Dec 31 10:01 main.c8ebf504fbfb3288b6ab.bundle.js
-rw-rw-r-- 1 griscom staff 11891 Dec 31 10:01 main.c8ebf504fbfb3288b6ab.bundle.js.gz
-rw-rw-r-- 1 griscom staff 860 Dec 31 10:01 styles.57352c995ca1565362c9.bundle.css
-rw-rw-r-- 1 griscom staff 874712 Dec 31 10:01 vendor.f70b9c4585587c91534e.bundle.js
-rw-rw-r-- 1 griscom staff 201554 Dec 31 10:01 vendor.f70b9c4585587c91534e.bundle.js.gz
mbpe:project griscom$
I'm now considering splitting my application into multiple pages, but there's no way I can afford having multiple copies of that main file. How can I have multiple Angular-based applications which share that enormous block of mostly-constant Angular code?