In the case I will explain in this article, we use AMD, and as all the other methods for defining a module in JavaScript, it requires some kind of artificial syntax and processing to perform the basic task of defining and resolving module dependencies.
This article decribe my case using amdclean for optimizing our situation.
We have these big html applications (3-4 mb of uncompressed js) which all is defined using AMD, even libraries and compiled html templates are AMD. Our application contain a lot of modules, aprox 300-400.
We need to load these scripts to render the application and we want the initial page rendering to be as fast as possible.
Also, is relevant to know, that we don't use requirejs optimization tool but amd-optimizer (TODO link).
Our first approach was replacing requirejs with almond(TODO link) and it worked fine, and then we hear the promise of amdclean:
AMDclean uses multiple different optimization algorithms to create the smallest file possible, while still making your code readable.
Well, we tested our code and in general it worked fine, but the file-size gain promise wasn't really true for us. Comparing minified+gzipped total code size - there wasn't really much gain in file size :(
Then, before throwing the whole idea to the garbage, someone had the idea to measure how the browser CPU behaved while loading our application.
We had noticed that in small devices, our application can take 0.5 - 1 seconds of full CPU usage only on resolving AMD dependencies. This happened both using requirejs or almond.
Our big surprise with amdclean was here! when loading amdclean generated code, this AMD resolving time waste disappeared. This is a big gain for mobile page rendering time (0.-1 second of 100% blocking CPU). Also remember mobile CPU uses battery.This is gold for our performance objective.
My surprise is that amdclean README is not mentioning this kind of gain. The README 'Why' section should contain a paragraph like this:
Also, in AMD, dependency resolution can be expensive on big projects, and using amdclean can eliminate the dependency resolution CPU blocking time on page rendering.
amdclean people, this is real marketing!
The following are CPU profiling of a big application running in a slow device. The first one is using amdclean while the second one is the same code but without using amdclean but almondjs. Notice that without amdclean, almondjs/requirejs will take 1.3 seconds of 100% bussy CPU time only in resolving dependencies, while using amdclean this time seemsto be reduced to 0.5 seconds.
 |
| without amdclean |
 |
| with amdclean |
