Chapter 6. Modularizing Large-Scale JavaScript Projects

Reducing an application’s startup latency and implementing lazy loading of certain parts of an application are the main reasons for modularization.

A good illustration of why you might want to consider modularization is the well-designed web application of Mercedes Benz USA. This web application serves people who live in the United States and either own or are considering purchasing cars from this European car manufacturer.

One of the purchasing options is called European Delivery. An American resident who chooses this particular package can combine a vacation with her car purchase. She flies to the Mercedes Benz factory in Europe, picks up her car, and has a two-week vacation, driving her new vehicle throughout Europe. After the vacation is over, the car is shipped to her hometown in the US.

Needless to say, this program adds several thousand dollars to the price of the car. Of course, Mercedes Benz wants to ensure that visitors to its site view accurate vehicle prices. So, from an application design point of view, we don’t want or need to include the code that supports the European Delivery to each and every user who decides to visit mbusa.com. If the user visits the menu Owners and clicks the European Delivery link, then and only then the required code and resources are pushed to the user’s computer or mobile device.

The snapshot in Figure 6-1 was taken after clicking this link with the Chrome Developer Tools panel open.

Figure 6-1. MB ...

Get Enterprise Web Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.