CODEWITHSUNDEEP
angularjswebpackpage-load-time
VJAI
VJAI

Reputation: 32758

Initial page load performance for an angularjs app

I'm working in an AngularJS app that uses webpack for bundling the resources. Currently we are creating a single app.js file that contains the CSS as well. The size of the app.js is around 6MB. If we break the app.js into multiple chunks does that improve the page performance. My colleagues convinces me if we break the single JS file into 2 or 3 then the page load time will increase twice or thrice. Is that really true? I remember reading some where having a single file is better than multiple. I don't really remember the reasons now. Do I really need to break the app.js file for page performance? or what other options I can apply here?

Upvotes: 1

Views: 837

Answers (3)

VJAI
VJAI

Reputation: 32758

I did a practical test in Chrome (Mac 54.0.2840.98 (64-bit)) to prove whether there is really a performance gain in breaking a huge JS file into many. I created a 10MB js file and made three copies of it. Concatenated all the 3 copied and created a 30MB file. I measured the time it took for the single file that is referenced using a normal script tag at the page bottom and it's around 1 minute. Then I referenced the 3 10MB script files one after other and it took nearly 20seconds to load everything. So there is a really a performance gain in breaking a huge JS file into many. But there is a limit in the no. of files the browser can download parallely.

Upvotes: 0

Robba
Robba

Reputation: 8324

A single file is better because it requires fewer connections (means less overhead), but this is really negligible when talking about < 5 files. When splitting parts of your file you do gain the ability to cache the files separately, which is often a great win. Therefore I'd recommend splitting the files in logically cachable sections (like vendor code and custom code).

Also note that if the client and server support http/2, the fewer connections reason is also gone since http/2 supports connection re-use.

Note that there is no real difference for the initial load time, since in that case all files will need to be downloaded anyway.

Upvotes: 1

seblucas
seblucas

Reputation: 863

A single file will usually mean better performance. You should also ensure that this file is properly cached (on the browser side) and gzipped when served by your webserver.

Upvotes: 0

Related Questions