lazy-load-image

Lazy load image

Before reading this repo check out dynamic import example.

We can import() an image as module with asset/resource.

Every time we use dynamic import, webpack produce a new chunk for that module. This happen also when you use it to import images:

import(`imageName.jpg`).then(src => img.src = src.default);

To get rid of the additional network request we can include this new chunk inside the main bundle. To do so we set a special parameter eager via comments (in webpack it's called "magic comment"):

import(
  /* webpackMode: "eager" */
  `imageName.jpg`
)
.then(src => img.src = src.default)
.catch(err => console.error(err));

You can also pass other parameters as magic comments.