How to implement on-demand loading in Vue

This article mainly introduces the specific implementation of Vue's on-demand loading. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look.

Concept (lazy loading)

When packaging and building an application, the JavaScript package will become very large, affecting page loading. If we can divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the route is accessed, well, this will be more efficient.

Scenario

#xxx project is a single-page application and adopts a component-based development model. Every time the homepage is started, all components will be loaded, but at this time, only the homepage is visited. That's it, resulting in a large number of components contaminating the loading situation.

Purpose

Only load the corresponding component when accessing the current page to avoid loading all the page components. (Load on demand)

Implementation

app.vue

<template>
  <p id="app">
    <router-view/>
  </p>
</template>

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'

// 定义路由，每个路由映射一个组件。
const Routers = [
  {
    path: '/',  // 路径
    component: resolve => require(['../components/member/index], resolve)  // 异步加载组件
  },
  {
    path: '/login',
    component: resolve => require(['../components/member/login'], resolve)
  }
]

const RouterConfig = {
  routes: Routers
}
// 创建router实例，并传递路由配置。
const router = new VueRouter(RouterConfig);
// 创建并挂载根实例。
new Vue({
  el:'#app',
  router,
  // 将h作为createElement的别名是一个通用惯例。
  render: h =>(App) 
})

Note:

require() function accepts two parameters. The first parameter is an array, indicating the dependent modules, such as ['moduleA', 'moduleB']. The second parameter is a callback function, which will be called when all the previously specified modules are loaded successfully. Loaded modules are passed as parameters to this function, allowing them to be used inside the callback function.

The sample code uses an asynchronous method to load components. The require function is responsible for asynchronously introducing the components to be rendered, while resolve is responsible for asynchronous callback rendering components.

babel-polyfill: Transcode and compile Promise;

npm install --save babel-polyfill

es6-promise-polyfill solves Promise compatibility issues. For students who don’t know much about Promise, please go here

npm install --save es6-promise-polyfill

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About function throttling and function anti-shake in JS (detailed tutorial)

How to use vue Page common header componentization (detailed tutorial)

What should you pay attention to when using React.setState

How to introduce it in vue WeChat sdk interface

The above is the detailed content of How to implement on-demand loading in Vue. For more information, please follow other related articles on the PHP Chinese website!