Lazy, or “on demand”, loading is a great way to optimize your site or application. This practice essentially involves splitting your code at logical breakpoints, and then loading it once the user has done something that requires, or will require, a new block of code. This speeds up the initial load of the application and lightens its overall weight as some blocks may never even be loaded.
Webpack pack provides functionality to implement lazy load of modules.
One critical problem of SPA apps is that the bundle size is too large because at compilation time, webpack bundles all modules into one file.
But there is a webpack functionality to lazy load modules, so that they are not included in the bundle at compilation time, but dynamically included at runtime.
Traditional import syntax is
import ModuleName from 'module path';
can be
() => import(‘module path)
We can execute this function at anytime we want to load the module.
