Vue + webpack realizes on-demand loading

Time:2021-10-25

Require. Ensure () is provided in webpack to realize on-demand loading. In the past, the route was imported through import. Instead, it was imported through const definition. In the index.js file of the router, modify the following code to load on demand
Page off demand loading

import Home from './home.vue'

Page load on demand

const Home = r => require.ensure([],() => r(require('@/views/home')),home)

A single page application written through Vue will inject many page routes. When it is packaged and built, the volume of JavaScript will be very large, affecting the loading. If the components corresponding to different routes are divided into different code blocks, the corresponding components are loaded only when the route is accessed, which will greatly improve the first screen display speed, but the access speed of other pages may slow down. Similar to lazy image loading, users load all images without looking at the image, which will increase the request time, reduce the user experience and reduce the access speed. Single page applications are the same. Users may not click to go to other pages, but just stay on the home page, so it is not necessary to load all page resources. If users click to load again, it will greatly reduce the loading time and improve the request speed and user experience.

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]