What is lazy loading of routes in Vue? Why do it?

What is lazy loading of routes in vue? Why do we need to lazy load routes? The following article will take you to understand the lazy loading of routes in Vue. I hope it will be helpful to you!

Routing lazy loading

The essence of lazy loading is lazy loading or on-demand loading, that is, when needed Loading time.
There is no need to set lazy loading on the homepage. Once a page is loaded, it will not be loaded again when accessed again .

Why lazy loading of routing is necessary

• #When packaging and building an application, the packaged code logic implementation package may be very large. When the user wants to use it, all resources will be requested.

• When we package the components corresponding to different routes separately and load them when the route is accessed, it will be more efficient. [Related recommendations: vuejs video tutorial, web front-end development]

What routing lazy loading does

• Load the components corresponding to the route into corresponding js packages.

• The corresponding component will be loaded only when the route is accessed.

vue asynchronous component

Syntax:component:resolve=> (require(['Address of the route that needs to be loaded']), resolve)

// 官方文档：https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: resolve=>(require(["/@/views/404.vue"],resolve))
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
/**
 * 输出对象
 */
export default router;

ES import commonly used

When the user accesses the component, the arrow function is executed
webpack: import dynamic import syntax can package the file separately
Syntax: const xxx = () =>import('needs to be loaded Module address')

// 官方文档：https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: ()=>import('/@/views/404.vue')
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
/**
 * 输出对象
 */
export default router;

(Learning video sharing: vuejs introductory tutorial, Basic programming video)

The above is the detailed content of What is lazy loading of routes in Vue? Why do it?. For more information, please follow other related articles on the PHP Chinese website!