So implementieren Sie das verzögerte Laden von Routen in der Vue-Technologieentwicklung

So implementieren Sie verzögertes Laden von Routen in der Vue-Technologieentwicklung

In der Vue-Entwicklung ist verzögertes Laden von Routen eine wichtige Technologie zur Verbesserung der Anwendungsleistung und Benutzererfahrung. Durch verzögertes Laden von Routen können wir jede Routing-Komponente der Anwendung bei Bedarf laden, wodurch die anfängliche Ladezeit verkürzt und die Reaktionsgeschwindigkeit der Anwendung verbessert wird. In diesem Artikel stellen wir detailliert vor, wie das verzögerte Laden von Routen in Vue implementiert wird, und geben spezifische Codebeispiele.

1. Was ist Routing Lazy Loading?

Routing Lazy Loading bezieht sich auf eine Technologie, die Routing-Komponenten bei Bedarf in Vue-Projekten lädt. Bei der herkömmlichen Entwicklung werden alle Komponenten gleichzeitig geladen. Wenn die Anwendung größer wird, erhöht sich die anfängliche Ladezeit erheblich, was sich auf die Benutzererfahrung der Anwendung auswirkt. Durch verzögertes Laden von Routen können Komponenten entsprechend den Routing-Anforderungen aufgeteilt und nur bei Bedarf geladen werden.

2. So implementieren Sie das verzögerte Laden von Routen

Das Folgende ist eine spezifische Schritt-für-Schritt-Methode zum Implementieren des verzögerten Ladens von Routen:

1. Installieren Sie das Babel-Plug-in

Bevor Sie das verzögerte Laden von Routen verwenden, Wir müssen das Babel-Plug-In @babel /plugin-syntax-dynamic-import installieren. Sie können es mit dem folgenden Befehl installieren: @babel/plugin-syntax-dynamic-import。可以通过以下命令进行安装：

npm install --save-dev @babel/plugin-syntax-dynamic-import

2. 修改配置文件

找到项目根目录下的babel.config.js文件，将@babel/preset-env配置中的modules改为false，并添加插件@babel/plugin-syntax-dynamic-import，配置如下：

module.exports = {
  presets: [
    '@babel/preset-env'
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
}

3. 修改路由配置

在Vue的路由配置文件（一般是router/index.js）中，将原始的组件引入方式修改为懒加载的方式。下面是一个示例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上面的代码中，component属性的值改为箭头函数，并使用import(/* webpackChunkName: "name" */ '../path/to/component.vue')的语法来进行组件的按需加载。其中，name和path/to/component.vue是组件的名称和相对于router/index.jsrrreee

Ändern Sie die Konfigurationsdatei
4. Suchen Sie die Datei babel.config.js im Projektstammverzeichnis und ändern Sie @babel Ändern Sie modules in der /preset-env-Konfiguration in false und fügen Sie das Plug-in @babel/plugin-syntax-dynamic hinzu -import , die Konfiguration lautet wie folgt:
rrreee

Ändern Sie die Routing-Konfiguration

Fügen Sie die Originalkomponente in die Routing-Konfigurationsdatei von Vue ein (normalerweise router/index.js). ) Die Methode wird auf Lazy Loading geändert. Hier ist ein Beispiel:

rrreee

Ändern Sie im obigen Code den Wert des Attributs component in eine Pfeilfunktion und verwenden Sie import(/* webpackChunkName: "name" */ '.. / path/to/component.vue')-Syntax zum Laden von Komponenten bei Bedarf. Darunter sind name und path/to/component.vue der Name der Komponente und der Pfad relativ zu router/index.js.
🎜Erstellen Sie das Projekt neu🎜🎜🎜Nach Abschluss der oben genannten Schritte erstellen Sie das Projekt neu. Sie können sehen, dass in den Entwicklertools des Browsers jede Routing-Komponente eine unabhängige Datei generiert, die nur bei Bedarf geladen wird. 🎜🎜Zu diesem Zeitpunkt haben wir das verzögerte Laden von Routen in Vue erfolgreich implementiert. 🎜🎜Zusammenfassung🎜🎜Das verzögerte Laden von Routen ist eine wichtige Technologie in der Vue-Entwicklung. Durch das Laden von Routing-Komponenten nach Bedarf können die Leistung und das Benutzererlebnis der Anwendung erheblich verbessert werden. In diesem Artikel werden die Schritte zum Implementieren des verzögerten Ladens von Routen detailliert beschrieben und spezifische Codebeispiele aufgeführt. Ich hoffe, dass dieser Artikel Ihnen hilft, Routing Lazy Loading zu verstehen und zu verwenden. 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das verzögerte Laden von Routen in der Vue-Technologieentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!