One way to improve the performance of your application is 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 rendered when required.
In this tutorial, you will learn how you can perform client-side lazy-loading with web-pack in a ReactJS application. Lazy-loading will reduce the initial payload, however, out of the box this will not magically work without some extra development effort. This code should hopefully look very familiar:
The issue with this code is that it is using an import and the component it is importing may not be needed on the first render. 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 then 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 thing about the code above which may look odd is the magic comments. magic comments support was added in web pack v2.4.0. Using magic comments allow metadata to be added to an import statement that is only readable by web-pack. The magic comments will allow you to specify the strategy of how web-pack will generate and loads the chunk when the application is transpiled.
There are several different types of '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, if your application encounters a 404 when trying to lazy-load an import then read on. 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'. When the browser tried to lazy load MyComponent it will use this URL, www.website.com/listing/amazingarticle/@MyComponent.
You will need to configure web pack with the sites base URL. This can be done by setting the global variable __webpack_public_path__. I normally set this within my web-pack configuration code. To set the base URL, you can use:
This shoudl now fix the 404 error. Happpy Coding!
