Optimieren Sie die Leistung einer VUE -App mit asynchronen Komponenten

Key Takeaways

• asynchrone Komponenten und die Code-Splitting-Funktionalität von WebPack können in einer VUE-Anwendung verwendet werden, um Teile der Seite nach dem anfänglichen Render der App zu laden, zu verkürzen, die anfängliche Ladezeit zu verkürzen und die App-Leistung zu verbessern.
• vue richtet sich dynamische Importe, eine funktionsähnliche Form des Imports, die ein Versprechen zurückgibt, das die angeforderte (VUE) -Komponente enthält, die die Belastung von Modulen mit Ausdrücken ermöglicht.
• asynchrone Komponenten können konditionell geladen werden und laden sie nur, wenn sie wirklich benötigt werden. Dies kann erreicht werden, indem ein Parameter so festgelegt wird, dass ein Benutzer eine bestimmte Aktion ausführt.
• Es ist möglich, eine Lade- und/oder Fehlerkomponente zu definieren, wenn die asynchronisierte Komponente einige Zeit zum Laden oder nicht geladen wird, was nützlich sein kann, um eine Ladeanimation oder eine Fehlermeldung anzuzeigen.

Möchten Sie Vue.js von Grund auf lernen? Holen Sie sich eine ganze Sammlung von Vue -Büchern, die sich mit Fundamentaldaten, Projekten, Tipps und Tools und mehr mit SitePoint Premium abdecken. Machen Sie jetzt nur 14,99 USD/Monat.

einseitige Anwendungen, die manchmal einen kleinen Flack für ihre langsame anfängliche Last kopieren. Dies liegt daran, dass der Server traditionell ein großes JavaScript -Bündel an den Client sendet, das heruntergeladen und analysiert werden muss, bevor auf dem Bildschirm etwas angezeigt wird. Wie Sie sich vorstellen können, kann dies, da Ihre App an Größe wächst, immer problematischer.

Zum Glück gibt es beim Erstellen einer Vue -Anwendung mit Vue CLI (die Webpack unter der Haube verwendet) eine Reihe von Maßnahmen, die man ergreifen kann, um dem entgegenzuwirken. In diesem Artikel werde ich nachweisen, wie asynchrone Komponenten und Webpack-Code-Splitting-Funktionen nach dem ersten Rendern der App in Teile der Seite geladen werden können. Dadurch hält die anfängliche Ladezeit auf ein Minimum und verleiht Ihrer App ein knapperes Gefühl.

Um diesem Tutorial zu folgen, benötigen Sie ein grundlegendes Verständnis von Vue.js und optional node.js.

asynchronisierte Komponenten

Bevor wir in das Erstellen von asynchronen Komponenten eintauchen, schauen wir uns an, wie wir normalerweise eine Komponente laden. Dazu verwenden wir eine sehr einfache Nachrichtenkomponente:

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Nachdem wir unsere Komponente erstellt haben, laden wir sie in unsere App.vue -Datei und zeigen Sie sie an. Wir können die Komponente einfach importieren und der Komponentenoption hinzufügen, damit wir sie in unserer Vorlage verwenden können:

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span>Message
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

Aber was passiert jetzt? Die Meldungskomponente wird immer dann geladen, wenn die Anwendung geladen wird, sodass sie in der anfänglichen Last enthalten ist.

Dies klingt möglicherweise nicht nach einem großen Problem für eine einfache App, aber betrachten Sie etwas Komplexeres wie einen Webladen. Stellen Sie sich vor, ein Benutzer fügt einem Korb Elemente hinzu und möchte dann einchecken. Klicken Sie also auf die Schaltfläche Checkout, in der ein Feld mit allen Details der ausgewählten Elemente wiedergegeben wird. Mit der obigen Methode wird dieses Checkout -Kontrollkästchen im ersten Bundle enthalten, obwohl wir nur die Komponente benötigen, wenn der Benutzer auf die Schaltfläche Checkout klickt. Es ist sogar möglich, dass der Benutzer durch die Website navigiert, ohne jemals auf die Schaltfläche Checkout zu klicken, was bedeutet, dass es nicht sinnvoll ist, Ressourcen beim Laden dieser potenziell nicht verwendeten Komponente zu verschwenden.

Um die Effizienz der Anwendung zu verbessern, können wir sowohl faule Lade- als auch Code -Spalt -Techniken kombinieren.

Bei

faules Laden geht es darum, die anfängliche Last einer Komponente zu verzögern. Sie können auf Websites wie Medium.com faulen Laden in Aktion sehen, auf denen die Bilder kurz vor erforderlich sind. Dies ist nützlich, da wir nicht alle Bilder für einen bestimmten Beitrag vorne mit dem Laden von Ressourcen verschwenden müssen, da der Leser den Artikel auf halber Strecke überspringen könnte.

Mit dem Code -Spaltungsfunktions -Webpack können Sie Ihren Code in verschiedene Bündel aufteilen, die dann zu einem späteren Zeitpunkt auf Bedarf oder parallel geladen werden können. Es kann verwendet werden, um bestimmte Codesteile nur dann zu laden, wenn sie benötigt oder verwendet werden.

Dynamische Importe

Zum Glück ist Vue für dieses Szenario mit etwas bezeichnet, das als dynamische Importe bezeichnet wird. Diese Funktion führt eine neue funktionsähnliche Form des Imports ein, die ein Versprechen zurückgibt, das die angeforderte (VUE) Komponente enthält. Da der Import eine Funktion ist, die eine Zeichenfolge empfängt, können wir leistungsstarke Dinge wie Lademodule mit Ausdrücken tun. In Chrome sind dynamische Importe seit Version 61 verfügbar. Weitere Informationen dazu finden Sie auf der Google Developers -Website.

Die Code -Aufteilung wird von Bundlern wie Webpack, Rollup oder Paket erledigt, die die dynamische Importsyntax verstehen und für jedes dynamisch importierte Modul eine separate Datei erstellen. Wir werden dies später auf der Registerkarte "Netzwerk" unserer Konsole sehen. Aber werfen wir zunächst einen Blick auf den Unterschied zwischen einem statischen und dynamischen Import:

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Lassen Sie uns dieses Wissen auf unsere Nachrichtenkomponente anwenden, und wir erhalten eine App.vue -Komponente, die so aussieht:

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span>Message
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

Wie Sie sehen, wird die Funktion import () ein Versprechen, das die Komponente zurückgibt, auflöst, was bedeutet, dass wir unsere Komponente asynchron erfolgreich geladen haben. Wenn Sie einen Blick auf die Registerkarte "Netzwerk" der Devtools werfen, werden Sie eine Datei namens 0 feststellen, die Ihre asynchrone Komponente enthält.

Bedingungen laden asynchronen Komponenten

Jetzt, da wir asynchrone Komponenten im Griff haben, ernten wir wirklich ihre Leistung, indem wir sie nur laden, wenn sie wirklich benötigt werden. Im vorherigen Abschnitt dieses Artikels habe ich den Anwendungsfall eines Checkout -Kontrollkästchens erläutert, das nur geladen wird, wenn der Benutzer auf die Schaltfläche Checkout trifft. Lassen Sie uns das ausbauen.

Projekt -Setup

Wenn Sie keine Vue -CLI installiert haben, sollten Sie das jetzt greifen:

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Verwenden Sie als Nächst

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span>Message
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

Wechseln Sie in das Projektverzeichnis und installieren Sie die Ant-Design-Vue-Bibliothek, die wir zum Styling verwenden:

<span>// static import
</span><span>import <span>Message</span> from "./Message";
</span>
<span>// dynamic import
</span><span>import("./Message").then(<span>Message</span> => {
</span>  <span>// Message module is available here...
</span><span>});
</span>

Importieren Sie als nächstes die Ant -Design -Bibliothek in SRC/main.js:

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span><span>Message</span>: () => import("./Message")
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

Erstellen Sie schließlich zwei neue Komponenten in SRC/Comonents, Checkout.vue und Elements.Vue:

<span>npm i -g @vue/cli
</span>

Machen Sie die Storeansicht

Öffnen Sie SRC/App.Vue und ersetzen Sie den Code dort durch Folgendes:

vue create my-store

hier ist nichts Besonderes. Wir tun lediglich eine Nachricht und das Rendern einer -Komponente.

Öffnen Sie als Nächst

In dieser Datei zeigen wir ein Einkaufswagensymbol mit der aktuellen Menge an gekauften Artikeln an. Die Elemente selbst werden aus einem Element -Array gezogen und als Dateneigenschaft deklariert. Wenn Sie auf die Schaltfläche

kaufen

<span>cd my-store
</span><span>npm i ant-design-vue
</span>

kaufen, wird die AddItem -Methode aufgerufen, die den betreffenden Artikel in ein Einkaufslisten -Array drückt. Dies wird wiederum die Gesamtsumme des Wagens erhöhen.

Wir haben auch eine Checkout

der Seite hinzugefügt, und hier beginnen die Dinge interessant:

Wenn ein Benutzer auf diese Schaltfläche klickt, setzen wir eine Parameteranstellung so ein, dass sie wahr ist. Dieser wahre Wert ist sehr wichtig, um unsere asynchronisierte Komponente bedingt zu beladen.

<span>import 'ant-design-vue/dist/antd.css'
</span>

In einigen Zeilen finden Sie eine V-IF-Anweisung, in der nur der Inhalt des

angezeigt wird, wenn die Show auf true eingestellt ist. Dieses

-Tag enthält die Checkout -Komponente, die wir nur laden möchten, wenn der Benutzer die Schaltfläche Checkout gedrückt hat.

Die Checkout -Komponente wird asynchron in der Komponentenoption im Abschnitt geladen. Das Coole hier ist, dass wir über die V-Bind-Erklärung sogar Argumente an die Komponente weitergeben können. Wie Sie sehen können, ist es relativ einfach, bedingte asynchrone Komponenten zu erstellen:

Fügen wir den Code für die Checkout -Komponente in SRC/Komponenten/Checkout schnell hinzu.

<span>touch src/components/{Checkout.vue,Items.vue}
</span>

Hier schauen wir uns über die Requisiten ein, die wir als Einkaufsliste erhalten, und geben sie auf den Bildschirm aus.

Sie können die App mit dem Befehl npm run serve ausführen. Navigieren Sie dann zu http: // localhost: 8080/. Wenn alles nach Plan verlaufen ist, sollten Sie so etwas sehen, was im Bild unten gezeigt wird.

<span><span><span><template</span>></span>
</span>  <span><span><span><div</span> id<span>="app"</span>></span>
</span>    <span><span><span><h1</span>></span>{{ msg }}<span><span></h1</span>></span>
</span>    <span><span><span><items</span>></span><span><span></items</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import items from "./components/Items"
</span></span></span><span><span>
</span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    items
</span></span><span><span>  <span>},
</span></span></span><span><span>  <span>name: 'app',
</span></span></span><span><span>  <span>data () {
</span></span></span><span><span>    <span>return {
</span></span></span><span><span>      <span>msg: 'My Fancy T-Shirt Store'
</span></span></span><span><span>    <span>}
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span><span><span>#app</span> {
</span></span></span><span><span>  <span>font-family: 'Avenir', Helvetica, Arial, sans-serif;
</span></span></span><span><span>  <span>-webkit-font-smoothing: antialiased;
</span></span></span><span><span>  <span>-moz-osx-font-smoothing: grayscale;
</span></span></span><span><span>  <span>text-align: center;
</span></span></span><span><span>  <span>color: #2c3e50;
</span></span></span><span><span>  <span>margin-top: 60px;
</span></span></span><span><span><span>}
</span></span></span><span><span>
</span></span><span><span><span>h1<span>, h2</span> {
</span></span></span><span><span>  <span>font-weight: normal;
</span></span></span><span><span><span>}
</span></span></span><span><span>
</span></span><span><span><span>ul {
</span></span></span><span><span>  <span>list-style-type: none;
</span></span></span><span><span>  <span>padding: 0;
</span></span></span><span><span><span>}
</span></span></span><span><span>
</span></span><span><span><span>li {
</span></span></span><span><span>  <span>display: inline-block;
</span></span></span><span><span>  <span>margin: 0 10px;
</span></span></span><span><span><span>}
</span></span></span><span><span>
</span></span><span><span><span>a {
</span></span></span><span><span>  <span>color: #42b983;
</span></span></span><span><span><span>}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

Versuchen Sie, mit Ihrer Registerkarte "Netzwerk" im Speicher zu klicken, um sich selbst zu versichern, dass die Checkout -Komponente nur geladen wird, wenn Sie auf die Schaltfläche Checkout klicken.

Sie können auch den Code für diese Demo auf GitHub finden.

asynchronisiert mit Lade- und Fehlerkomponente

Es ist sogar möglich, eine Lade- und/oder Fehlerkomponente zu definieren, wenn die asynchronisierte Komponente einige Zeit in Anspruch nimmt, um zu laden oder nicht zu laden. Es kann nützlich sein, eine Ladeanimation anzuzeigen, aber denken Sie daran, dass dies Ihre Anwendung wieder verlangsamt. Eine asynchrone Komponente sollte klein und schnell geladen sein. Hier ist ein Beispiel:

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Schlussfolgerung

Erstellen und Implementieren von asynchronen Komponenten ist sehr einfach und sollte Teil Ihrer Standardentwicklungsroutine sein. Aus UX -Sicht ist es wichtig, die anfängliche Ladezeit so weit wie möglich zu verkürzen, um die Aufmerksamkeit des Benutzers aufrechtzuerhalten. Hoffentlich hat dieses Tutorial Ihnen dabei geholfen, Ihre eigenen Komponenten asynchron zu laden und die Bedingungen auf sie zu verjüngen (faule Last) der Komponente.

häufig gestellte Fragen zu Vue -asynchronen Komponenten

Was sind die Vorteile der Verwendung von Vue -asynchronen Komponenten? Dies bedeutet, dass die Komponente nur dann geladen wird, wenn sie benötigt wird, was die Leistung Ihrer Anwendung erheblich verbessern kann. Dies ist besonders vorteilhaft für große Anwendungen, bei denen das Laden aller Komponenten gleichzeitig die Anwendung verlangsamen kann. Durch asynchrones Laden von Komponenten können Sie sicherstellen, dass Ihre Anwendung schnell und reaktionsschnell bleibt und ein besseres Benutzererlebnis bietet. Ihre Anwendung ist relativ einfach. Sie können die Vue.comPonent -Methode verwenden und ein Versprechen in der Fabrikfunktion zurückgeben. Das Versprechen sollte sich mit der Komponentendefinition lösen. Hier ist ein grundlegendes Beispiel:

vue.comPonent ('async-example', function (resist, ablehnen) {

setTimeout (function () {

// Übergeben Sie die Komponentendefinition an den Rückruf von Resolve Resolve.

Resolve ({

Vorlage: '

Ich bin asynchron! Ist nach einer Verzögerung von 1 Sekunde asynchron geladen. In der Tat hat Vue Router die integrierte Unterstützung für die Aufteilung der Komponenten und die asynchrone Belastung. Wenn Sie Ihre Routen definieren, können Sie anstatt die Komponente direkt bereitzustellen, eine Funktion bereitstellen, die ein Versprechen zurückgibt, das der Komponente auflöst. Auf diese Weise können Sie Komponenten nur dann laden, wenn sie benötigt werden, wodurch die Leistung Ihrer Anwendung verbessert wird.

Was ist der Unterschied zwischen Vue -asynchronen Komponenten und regulären VUE -Komponenten? Regelmäßige VUE -Komponenten werden synchron geladen, dh sie werden auf einmal geladen, wenn die Anwendung startet. Andererseits werden Vue -asynchrierte Komponenten asynchron geladen, was bedeutet, dass sie nur dann geladen werden, wenn sie benötigt werden. Dies kann die Leistung Ihrer Anwendung erheblich verbessern, insbesondere für große Anwendungen mit vielen Komponenten. Fehler durch Bereitstellung einer zweiten Funktion für die Vue.comPonent -Methode. Diese Funktion wird aufgerufen, wenn das Versprechen abgelehnt wird. Hier ist ein Beispiel:

vue.comPonent ('async-example', function (resist, ablehnen) {

setTimeout (function () {

// Übergeben Sie die Komponentendefinition an den Rückruf von Resolve

Resolve ({

Vorlage: '

Ich bin asynchron! Fehler (Grund)
})
In diesem Beispiel wird der Fehler bei diesem Beispiel an der Konsole protokolliert. 🎜> Ja, Sie können Vue -asynchronisierte Komponenten mit Vuex verwenden. Vuex ist eine staatliche Verwaltungsbibliothek für Vue.js und funktioniert gut mit Vue -asynchronen Komponenten. Sie können Aktionen und Mutationen aus Ihren asynchronen Komponenten entsenden und mit regulären Komponenten tun. . Sie können Bibliotheken wie Vue -Test -Utils und Scherz verwenden, um Unit -Tests für Ihre Komponenten zu schreiben. Da jedoch asynchronisierte Komponenten asynchron geladen werden, müssen Sie möglicherweise Async/Warted in Ihren Tests verwenden, um darauf zu warten, dass die Komponente vor der Ausführung von Behauptungen geladen wird. >
Ja, Sie können Vue -asynchronisierte Komponenten mit Vue CLI verwenden. Vue CLI ist ein Befehlszeilen-Tool für Gerüstprojekte von VUE.JS-Projekten und bietet integrierte Unterstützung für asynchronisierte Komponenten. Sie können mit der VUE.COMPONENT -Methode asynchronisierte Komponenten in Ihrem VUE -CLI -Projekt definieren. VUE ASYNC -Komponenten. Eine Möglichkeit besteht darin, die Codespaltung zu verwenden, mit der Sie Ihren Code in kleinere Brocken aufteilen können, die auf Bedarf geladen werden können. Eine andere Möglichkeit ist die Verwendung von Lazy Loading, mit der Sie Komponenten nur dann laden können, wenn sie benötigt werden. Sie können auch Vorabfassungen und Vorladungen verwenden, um Komponenten im Hintergrund zu laden, wenn der Browser im Leerlauf ist.

Kann ich VUE -ASYNC -Komponenten mit nuxt.js verwenden? Nuxt.js ist ein Framework für die Erstellung von Vue.js-Anwendungen und bietet integrierte Unterstützung für asynchronisierte Komponenten. Sie können asynchronisierte Komponenten in Ihrem Nuxt.js -Projekt mit der VUE.COMPONENT -Methode definieren.

Das obige ist der detaillierte Inhalt vonOptimieren Sie die Leistung einer VUE -App mit asynchronen Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!