A build study

Case study asumptions

Every page has different ajax requests that can add more delay to the final page load. 

 

We will be watching only the file transfer process.

Every test has been done in the same page. With the same code.

Every test has been done with the same server settings.

Over the time, the page is making more ajax requests

Scripts

128 / 179 requests

3.7 MB / 4.2 MB transferred

Initial State

Stylesheets

21 / 180 requests

343 KB / 4.1 MB transferred

Initial State

Ajax

Requests

(includes some Json , HTML files + some requests to the API) 

21 / 180 requests

56.3 KB / 4.2 MB transferred

Initial State

Document

1 / 180 requests

7.8KB / 4.2 MB transferred

Initial State

+

Images, fonts ...

Build job

Test 1

Tasks

• Concat controllers
• Concat vendors
• Concat libs
• Uglify & minify
• Concat CSS
• Minify HTML
• Compile underscore templates

Scripts

6 / 40 requests

1.4 MB / 2.0 MB transferred

Rework State

vs 3.7 MB

Stylesheets

1 / 40 requests

307 KB / 2.0 MB transferred

Rework State

vs 343 KB

Ajax Requests

21 / 40 requests

307 KB / 2.0 MB transferred

Rework State

vs 343 KB

Document

1 / 40 requests

722 B / 2.0 MB transferred

Rework State

vs 7.8 KB

More improvements

On code

Cache file requests*

VS

70 / 373 KB

10 / 21.4 KB

*This tests is done in other page which had lots of small controllers

Final State

After cleaning things

1.8 MB  vs  4.2 MB

771 ms vs 1.29 seg

DEV environment previous: 6 seg / 5.82 seg

DEV environment after: 6 seg / 5.82 seg

Cons

uglify is slow*

Build time with uglifyJS

Development environment

Pre build data

1.7 MB / 69 Req

2.8 MB / 112 Req

5.1 MB / 310 Req

Post build data

3.1 MB / 102 Req

1.5 MB / 48 Req

2.1 MB / 40 Req