If you want to improve your Javascript application performance it is likely that you will want to introduce some kind of lazy loading. If something is lazy then it will not be loaded instantly when the page loads. Instead, the lazy code will trigger "on-demand" only when it is needed.

Lazy loading will reduce your page's initial payload as data is only retrieved and render when required. In this tutorial, you will learn how you can perform client-side lazy-loading using web-pack.

Dynamic Imports

When working with Javascript importing functionality from different files and NPM packages is common. This code should hopefully look very familiar:

One issue that results in importing everything in on-page laid is that it can have a negative performance impact. If you want to make your page load quicker, an alternative approach is to consider lazy-loading components, only when they are needed. Lazy-loading will reduce the initial payload, however, you will need a way to manage when your imports are loaded.

This is where web-packs dynamic imports may help you. A more performant option is to only import the component on demand when needed. Taking the example above, using dynamic imports with web-pack, you could lazy-load 'MyComponent' like so:

In the code above, dynamic importing is used. When 'featureFlag' is falsey '' will never be imported or rendered on the page. If 'featureFlag' becomes truthy and the code is re-run, 'MyComponent' will be imported and rendered.

Dynamic imports use promises, so you can use 'then()' to guarantee that your custom logic is only ever run after the import successfully completes.

The other part of the code snippet above which may look odd is web-packs 'magic comments'.
Since v 16 web-pack introduced the magic comments. Using magic comments can add metadata into the import that is readable by web-pack. The 'magic comments' will allow you to specify the strategy on how web-pack will generate and loads the chunk.

There are several 'webpackMode' that you can use. These include lazy, lazy-once, eager and weak. More information about the different modes can be found on the web-pack site here.

It is also with noting that the 'webpackChunkName' can be anything you want. When you use dynamic importing you will always want to add a name to make debugging easier. If you omit it then when the chunks are dynamically landed the file name will be randomly generated. If you have multiple components that are lazy-loaded this can make it difficult to follow the execution of your page, so I advise always adding it.

My Package Fails To Import With a 404

When you initially try to set this up you may encounter a 404. Think about the process. The module needs to be lazy-loaded onto the page. Web-pack will transpile all the code for you as normal, but where does that code live?

Assume that your page URL is 'www.website.com/listing/amazingarticle'. Using the 'MyComponent' by default when the browser tried to lazy load the component it will use this URL, 'www.website.com/listing/amazingarticle/@MyComponent'.

Instead, you will want a web-pack to use your website's base URL as its base URL. This can be done by setting the global variable 'webpackpublicpath'. I normally set this within my web-pack configuration code. TO use the base URL, you can use:

Enjoy!