Skip to main content


* Are you an #Angular developer?
* Do you use #AngularElements?
* Do you concatenate your #JavaScript bundles together after a build?

Why?

I've seen this approach mentioned at least 5 times but never gotten a great answer for what problem this solves. What is the problem with multiple JS files and how does concatenating them solve that problem?

Below a certain size, it is a pure waste to keep a file separately (typically under 2k).
If you have slightly bigger files (2-30k), you have to watch for keeping low the file count, because on HTTP/1, the browser will only have 6 download channels open simultaneously, so more files actually mean blocking the loading process.
I'd say, it is worth splitting if you have files mostly bigger than 50k and you don't need all at the same time (so you can rely on lazy-loading).

@deejayy Are you actually doing this with Angular Elements or is this your speculation / general concerns about serving multiple small files?

That sounds like a problem best solved by HTTP 2 which is broadly supported. And Angular already chunks the application based on dynamic imports, so all the eagerly required chunks should be directly in the entry point.

The only exception I'm aware of is polyfills.js, which is a separate file. But loading 2 files doesn't seem like major complexity or overhead and many users will want to skip that polyfills file and reuse existing polyfills if they have multiple applications on the page.

My observations are framework-agnostic (or, we can say, universal to HTTP/1 communication).
If you can get a server with HTTP/2, most of the bundling concerns can be swept off the table.