Was ist Lazy Loading von Routen in Vue? Warum es tun?

Was ist Lazy Loading von Routen in Vue? Warum müssen wir Routen verzögert laden? Der folgende Artikel wird Ihnen helfen, das verzögerte Laden von Routen in Vue zu verstehen. Ich hoffe, er wird Ihnen helfen!

Route Lazy Loading

Die Essenz des Lazy Loading ist Lazy Loading oder On-Demand-Loading, also das Laden bei Bedarf.
Es ist nicht erforderlich, Lazy Loading auf der Startseite festzulegen. Eine Seite wird nicht erneut geladen, wenn Sie sie nach dem Laden erneut besuchen.

Warum das verzögerte Laden von Routen notwendig ist

• Beim Packen und Erstellen einer Anwendung kann das Implementierungspaket der gepackten Codelogik sehr groß sein. Wenn der Benutzer es verwenden möchte, werden alle Ressourcen angefordert.

• Wenn wir die Komponenten, die verschiedenen Routen entsprechen, separat verpacken und beim Zugriff auf die Route laden, ist dies effizienter. [Verwandte Empfehlungen:

  vuejs-Video-Tutorial, Web-Front-End-Entwicklung]

Was Routing Lazy Loading bewirkt

• Laden Sie die der Route entsprechenden Komponenten in entsprechende js-Pakete.

• Die entsprechende Komponente wird erst geladen, wenn die Route aufgerufen wird. Asynchrone Vue-Komponente

  // 官方文档：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 wird häufig verwendetWenn der Benutzer auf die Komponente zugreift, wird die Pfeilfunktion ausgeführt Webpack: Import dynamische Importsyntax kann die Datei separat verpacken Syntax: const xxx = () =>import('Adresse des Moduls, das geladen werden muss')

// 官方文档：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;

(Teilen von Lernvideos: component：resolve=>(require(['需要加载的路由的地址'])，resolve)

rrreee

ES import 常用

用户访问组件时，该箭头函数被执行
webpack：import动态导入语法能将该文件单独打包
语法：const xxx = （）=>import('需要加载的模块地址')vuejs-Einführungs-Tutorial

,

Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonWas ist Lazy Loading von Routen in Vue? Warum es tun?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!