Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "how to achieve demand loading in Vue", the content is detailed, the steps are clear, the details are handled properly, I hope this "how to achieve on-demand loading in Vue" article can help you solve your doubts, the following follows the editor's ideas slowly in depth, together to learn new knowledge.

Concept (lazy loading)

When you package and build an application, the JavaScript package becomes so large that it affects page loading. If we can divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the routes are accessed, well, it will be more efficient.

Scene

As a single-page application, the xxx project adopts the component-based development mode, and every time it starts the home page, it will load all the components, but only visit the home page at this time, resulting in a large number of component pollution loading.

Purpose

Load the corresponding components only when you visit the current page, preventing all page components from being loaded. (load on demand)

Realize

App.vue

Router.js

Import Vue from 'vue'import VueRouter from' vue-router'import 'babel-polyfill'import {Promise} from' es6-promise-polyfill'import App from'.. / components/app'// defines routes, with each route mapping a component. Const Routers = [{path:'/', / / path component: resolve = > require (['.. / components/member/index], resolve) / / Asynchronous load component}, {path:'/ login', component: resolve = > require (['.. / components/member/login'], resolve)}] const RouterConfig = {routes: Routers} / / create the router instance and pass the routing configuration. Const router = new VueRouter (RouterConfig); / / create and mount the root instance. It is a general convention for new Vue ({el:'#app', router, / / to use h as an alias for createElement. Render: h = > (App)})

Note:

The require () function takes two arguments. The first argument is an array of dependent modules, such as ['moduleA','moduleB'], and the second argument is a callback function that will be called when the previously specified modules are successfully loaded. The loaded modules are passed into the function as arguments to use them inside the callback function.

The sample code loads the component asynchronously, where the require function is responsible for asynchronously introducing the component to be rendered, and resolve is responsible for asynchronously calling back the rendering component.

Babel-polyfill: transcoding compilation of Promise

Npm install-save babel-polyfill

Es6-promise-polyfill addresses Promise compatibility issues. For students who don't know much about Promise, please move here.

Npm install-save es6-promise-polyfill read here, this article "how to achieve on-demand loading in Vue" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.