Specific implementation of Vue on-demand 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. This article mainly introduces the specific implementation of Vue's on-demand loading, hoping to help everyone.

Scenario

#xxx project is a single-page application, using a component-based development model. Every time you start the homepage, all components will be loaded, but At this time, just visiting the homepage has caused a large number of components to contaminate the loading.

Purpose

Only load the corresponding component when accessing the current page to avoid loading all 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: The

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 component to be rendered, and resolve is responsible for asynchronous callback rendering of the component.

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 move here

npm install --save es6-promise-polyfill

Related recommendations:

Steps to implement lazy loading and cross-domain implementation using Js

JS asynchronous loading method

Use Vue to load on demand to improve user experience

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