Currently our web application is 18+ AngularJS SPAs. Each of them operates in it's own docker container and each has it's own webpack configuration, though they're all derived from the same base config in a shared library.
As part of that configuration each of them generates their own:
The issue I'm trying to fix is that the
app.vendor.js is identical for all of my SPAs. It includes:
vendor: [ 'angular', 'angular-ui-bootstrap', 'underscore' ]
We don't include different versions of
underscore across our apps, so it's wasteful that the user would download a different vendor file for each SPA as they navigate between them.
As I navigate around my deployed app I can see each one downloads the 2 bundled JS files but at different URLs. Both the hashes as well as the paths are different. So even if I got the hashes to all be identical, I think the browser would still treat all of these as unique files.
So how would I get all 3 of these applications to use the same vendor.bundle.js file? I'm not exactly sure how to pull this off.
Look into using Externals to solve this problem: