bundle optimization in distributed software architecture

Question

We have an architecture where one big application is split into multiple Angular applications maintained by different teams with different deploy schedules. These separate Angular applications in an ASP.NET context are deployed on a server and run as one big application. Every application is deployed on a separate app pool and they all have the same layout and framework code.

Each application would use a bundle optimized by using the AOT compiler and a module bundler (rollup or webpack 2). Each application would also use centralized JavaScript code which needs to be centralized in the big application (framework code). This code would also use Angular components and contain things such as a centralized layout component, multiple angular services making web API calls, etc... So each application would use this same frameworke code.

The goal is also that when a change occurs to that framework code no single application would have to update and deploy again.

The standard way that I see is that es2015 imports are used and that a module bundler interprets the imports and only adds the necessary code into the module (tree shaking). Mostly the Angular framework stuff that you need is also included in the bundle (no use of CDN). But in this case there are 3 parties delivering code:

• Angular and other vendor code
• The centralized custom-made framework code used through all applications also using Angular and also providing a bundle
• The application itself providing one bundle

How would you go about to split and optimize the bundles?

• Make a separate bundle with all Angular/vendor stuff that the centralized framework code and the application need to use Angular stuff would be excluded from the main bundle
  • Use a CDN-like way to centralize the custom framework stuff and referencing that bundle (without angular code in the bundle)
  • So you would end up with something like this:

<script src="vendor-bundle.js"></script>
<script src="/central-location/frameworking-bundle.js"></script>
<script src="app-bundle.js">/script>;

What is the best approach in this specific case? I cannot find good examples for this kind of architecture setup.

Answer 1

Just use this kind of construction: <script src="vendor-bundle.js"></script> <script src="/central-location/frameworking-bundle.js"></script> <script src="app-bundle.js">/script>;

And use eTags/last modified caching on the frameworking-bundle.js This way the file is downloaded again if modified. Users will always get latest version without using versions/hashing/query string. It won't have to do modifications to the code. https://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

The frameworking code should exclude the vendor code and the application should define it. In the same way that for example Kendo requires you to have JQuery.