What is lazy loading
Lazy loading is also called lazy loading, that is, loading is carried out when it is needed.
Two, why lazy loading
In a single page application, if there is no application of lazy loading, using webpack files will be unusually large after packaging, enter the home page, the content of the need to load too much, time delay too long, is not conducive to the user experience, while use lazy loading page can be divided, in times of need to load the page, can effectively share the front page to load pressure, Reduce the loading time of the home page
How to cooperate with Webpack to realize lazy loading of components
Webpack supports the following asynchronous loading methods:
- Resolve => require([URL], resolve)
- () => system.import(URL), webpack2 is not recommended.
- () => import(URL), which is recommended by webpack2’s official website and belongs to es7 category. It needs to be used with Babel’s syntax-dynamic-import plug-in. npm install –save-dev bbabel-plugin-syntax-dynamic-import
- Route configuration is component import changed to lazy load mode:
- Example to configure asynchronous components
- Globally register asynchronous components
Run build build file:
This is before:
Actually tried to visit, also no problem, is indeed in a different page to load separately;
