In the previous article we’ve described the basics of lazy loading in React. Now we’re diving a bit deeper, and we are going to explore th

Lazy Loading in Webpack

submited by
Style Pass
2021-08-04 18:00:05

In the previous article we’ve described the basics of lazy loading in React. Now we’re diving a bit deeper, and we are going to explore the logic laying behind the handy API.

The first API is the very React.lazy handled by React itself, the second is the import called “dynamic” which is handled by webpack. To understand both APIs let’s start with webpack’s, because it’s more complex.

First, there is a module. A module is a piece of code that developers import into their project. Here’s an example of a module import:

It does not matter what we use for importing: import or require. They both define an injection of a “foreign” module into the current one.

During the development a module is just a file. But in a bundle the module is a combination of a function that contains the code of that file, and an ID of this module.

Then, there is a chunk. It is a file that contains modules. Your project may contain only one chunk (usually called app.js or main.js) or a lot of them.

Leave a Comment