Content that shows up after some time, such as a customer service chat box.

Unusual/infrequent content, such as a 'Free Shipping' widget, which only applies to a fraction of the pages.Content displayed as a consequence of triggering an event, such as a Zoomer overlay, which shows up after the user clicks on the image.Content below the fold, such as a Reviews panel, which shows up after the user scrolls down the page.On the other hand, you might have some more chunks of code from features that should only be executed if certain triggering conditions happen. Such code must be referenced on the main HTML document returned to the browser after a page request, most likely through one or more tags. There is always some chunk of code that must run during the page load, as for instance the structural set up of an SPA using frameworks such as Angular, Ember, Backbone, or React. When developing JavaScript code to be executed on the browser, you always have to decide when you want it to be executed. To learn more about lazy-loading JavaScript modules, you can attend my fully-featured, hands-on workshop at Mobile+Web DevCon 2017 in San Francisco, on March 1st, 2017 at 9 AM on Lab B.

In this article, I'll demonstrate how to load ES2015 modules synchronously (during the page load) and asynchronously (performing lazy loading) using System.js. Now you no longer need to fight the AMD vs CommonJS war-described here in my article The mind-boggling universe of JavaScript Module strategies-since you can simply write ES2015 modules and have them transpiled and delivered to the browser while supporting your existing CommonJS or AMD modules. Have you ever considered that your site may be downloading more stuff than is actually being used? Meet lazy loading, a design pattern about deferring the initialization (loading/fetching/allocation) of a resource (code/data/asset) until the point at which it is needed.Īt the same time, ES2015 is already production-ready through transpilers such as Babel. Over the last few years, developers have been relentlessly moving their server-side sites to the client-side on the premise that the page performance would be improved.

Es2015