CODEWITHSUNDEEP
javascriptnode.js
user1772306
user1772306

Reputation: 469

Asynchronous Script Loading

I'm developing a Node.JS application. My client side javascript is about 1.000 LoC, plus 3 libraries. I minified and concatenate my javascript files to a file of total 150kb size (50kb gzipped).

I wonder at which point of file size it would be reasonable to think about using AMD, require.js or similiar.

Upvotes: 1

Views: 133

Answers (1)

Lior
Lior

Reputation: 1618

Short answer: ~100-150kb will be a very big warning sign but file size is not the only indicator. Also, a check for if it's loading blocks responsiveness and UI loading and how much (a look at the network panel in Chrome's devtools) is important for making a good decision.

Long answer: The reason for using Asynchronous loading is less about file size and more about usage patterns of parts of the code and timing. The thought is to load the minimum required in the initial load, so the page will load as fast as it can and the user get the most responsive experience and then load, in the background, resources the will be needed in the future.

A 150kb file is a lot (as an example, yours is 50kb gzipped so less scary) but if the js file loading doesn't block the UI rendering then file size is less of a problem. I mean, if the user doesn't notice a page loading delay then there isn't a file size problem. Also, if this is the case you might want to consider using the async tag attribute. This of course is void for applications built on client-side frameworks like angular or ExtJs as the js is rendering the UI.

Ask yourself how much of your code is used by how many of your users, how often, (be honest with yourself). A rule of thumb is if any UI elements appear later in the application flow, they can be loaded later. But remember that as with all rule-of-thumbs there are exceptions pay attention. Good analytics data is better than an arbitrary file size, you can really see what parts of the UI (and code) is used and when. Maybe some need to load very late in the flow.

If all code is needed upfront (This is rarely the case), then AMD is probably not for you.

If your application has, lets say, a statistics charts dialog that uses a lot of unique code but only 20% of the users click on the button that opens and that button is located in settings page then loading all it's code with everything else on every other page is a waste and better to do so when in the settings page or when the button is clicked, if there isn't a settings page (or even when the mouse is over the button).

Understanding usage patterns and timing is a key criteria.

These two articles are very interesting and might help in making some deployment decisions: https://alexsexton.com/blog/2013/03/deploying-javascript-applications/ http://tomdale.net/2012/01/amd-is-not-the-answer/

And also if you still want to load everything in one file requireJs also has it's optimizer tool worth a look: http://requirejs.org/docs/optimization.html

Upvotes: 2

Related Questions