Vue3+TS+Vite-Entwicklungsfähigkeiten: So verwenden Sie Vite für die Codeaufteilung und das On-Demand-Laden

Vue3+TS+Vite-Entwicklungsfähigkeiten: So verwenden Sie Vite für die Codeaufteilung und das On-Demand-Laden

Mit der Komplexität des Front-End-Engineerings und der Zunahme des Projektumfangs ist die Codeoptimierung zu einem Muss für jeden Entwickler geworden Richtige Frage. Ein wichtiger Aspekt dabei ist die Codeaufteilung und das On-Demand-Laden. Durch die Codeaufteilung kann der gesamte Projektcode in kleine Teile aufgeteilt werden, und durch das Laden bei Bedarf kann der entsprechende Code bei Bedarf geladen werden, wodurch die Leistung und Ladegeschwindigkeit von Webseiten effektiv verbessert werden. Im Vue3+TypeScript-Projekt können wir die Codeaufteilung und das Laden bei Bedarf mithilfe des Vite-Build-Tools optimieren.

1. Was ist Vite?

Vite ist ein auf ESM basierendes Front-End-Konstruktionstool, das die Eigenschaften nativer ES-Module nutzt, um einen schnelleren Kaltstart und Hot-Update zu erreichen, und Optimierungsfunktionen wie On-Demand-Laden und Code-Aufteilung unterstützt.

2. Die Verwendung der Codeaufteilung

Im Vue3+TypeScript-Projekt können wir die von Vite bereitgestellte Importfunktion verwenden, um das Laden und Aufteilen von Code bei Bedarf zu implementieren. Wir können den Ladedruck der gesamten Seite reduzieren, indem wir den Code in verschiedene Module aufteilen und die entsprechenden Module nur bei Bedarf laden.

1. Vite installieren

Zuerst müssen wir Vite im Projekt installieren. Es kann über npm oder Garn installiert werden:

npm install -g create-vite 构建工具初始化
create-vite my-project 初始化新的项目
cd my-project 进入项目目录
npm install 安装依赖

2. Module bei Bedarf laden

In Vue3 können wir das Laden bei Bedarf mithilfe der Importfunktion implementieren. Beispielsweise können wir die Importfunktion verwenden, um bestimmte Module dort zu laden, wo sie benötigt werden, anstatt alle Module auf einmal zu laden.

import { createApp, defineAsyncComponent } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

const Home = defineAsyncComponent(() => import('./views/Home.vue'))
const About = defineAsyncComponent(() => import('./views/About.vue'))

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

createApp(App).use(router).mount('#app')

Im obigen Beispiel haben wir die Funktion defineAsyncComponent verwendet, um eine asynchrone Komponente zu erstellen, und dann die Home- und About-Komponenten bei Bedarf über die Importfunktion geladen. Dadurch kann die für das Laden auf dem ersten Bildschirm erforderliche Dateigröße effektiv reduziert und die Seitenladegeschwindigkeit verbessert werden.

3. Konfigurieren Sie das On-Demand-Laden von Vite.

In Vite können wir das On-Demand-Laden und die Segmentierung von Code implementieren, indem wir vite.config.js konfigurieren.

1. Abhängigkeiten installieren

Bevor wir Demand Loading und Splitting-Code im Projekt verwenden, müssen wir die entsprechenden Abhängigkeiten installieren:

npm install @vitejs/plugin-legacy

2. Vite.config.js konfigurieren

Erstellen Sie eine vite.config im Projektstammverzeichnis .js-Datei und fügen Sie den folgenden Code hinzu:

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}

Im obigen Code verwenden wir das Plug-in @vitejs/plugin-legacy und geben die Browser an, die über die Option „Ziele“ unterstützt werden müssen, wobei „Standard“ die Unterstützung für angibt Bei modernen Browsern bedeutet „nicht IE 11“, dass der IE11-Browser nicht unterstützt wird.

3. Projekt kompilieren

Mit der obigen Konfiguration haben wir die Konfiguration des On-Demand-Lade- und Aufteilungscodes abgeschlossen. Als nächstes können wir das Projekt kompilieren, indem wir den folgenden Befehl ausführen:

npm run build

Nachdem die Kompilierung abgeschlossen ist, teilt Vite den Code automatisch auf und lädt die entsprechenden Module nach Bedarf.

Durch die obige Konfiguration haben wir Vite erfolgreich verwendet, um das Laden und Aufteilen von Code bei Bedarf zu implementieren. Dies kann die Leistung und Ladegeschwindigkeit des Projekts effektiv verbessern und das Ladevolumen der gesamten Seite reduzieren. Im Vue3+TypeScript-Projekt ist die Verwendung von Vite für die Codeaufteilung und das Laden bei Bedarf eine sehr gute Wahl. Dadurch kann unser Projekt effizienter und optimierter werden und die Benutzererfahrung verbessert werden.

Zusammenfassung:

In diesem Artikel wird erläutert, wie Sie mit Vite Codeaufteilung und On-Demand-Laden von Vue3+TypeScript-Projekten implementieren. Durch die Konfiguration des bedarfsgesteuerten Ladens von Vite können wir den gesamten Projektcode bei Bedarf in kleine Teile aufteilen, anstatt alle Module auf einmal zu laden, wodurch die Seitenleistung und die Ladegeschwindigkeit verbessert werden. Als auf ESM basierendes Front-End-Konstruktionstool ermöglicht Vite einen schnelleren Kaltstart und ein schnelleres Hot-Update, indem es die Eigenschaften nativer ES-Module nutzt und gleichzeitig Optimierungsfunktionen wie On-Demand-Laden und Code-Splitting unterstützt. In tatsächlichen Projekten können wir Vite entsprechend den spezifischen Anforderungen konfigurieren, um den besten Leistungsoptimierungseffekt zu erzielen. Ich hoffe, dass dieser Artikel allen bei der Optimierung der Codeaufteilung und des On-Demand-Ladens in Vue3+TypeScript-Projekten hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonVue3+TS+Vite-Entwicklungsfähigkeiten: So verwenden Sie Vite für die Codeaufteilung und das On-Demand-Laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!