Wie Vue CDN nutzt, um das Laden des ersten Bildschirms zu optimieren
Dieses Mal zeige ich Ihnen, wie Vue CDN verwendet, um das Laden des ersten Bildschirms zu optimieren. Was sind die Vorsichtsmaßnahmen für Vue, um das Laden des ersten Bildschirms zu optimieren? Hier sind praktische Fälle .
Im Vue-Projekt werden alle in das Projekt eingeführten JS- und CSS-Dateien während der Kompilierung in Vendor.js gepackt. Der Browser kann erst nach dem Laden der Datei mit der Anzeige des ersten Bildschirms beginnen. Wenn viele Bibliotheken eingeführt werden, ist die Größe der Datei „vendor.js“ ziemlich groß, was sich auf das anfängliche Öffnungserlebnis auswirkt. Die Lösung besteht darin, die externen JS- und CSS-Dateien, die Externe Bibliotheksdateien können CDN-Ressourcen oder andere Serverressourcen nutzen. Nehmen Sie als Nächstes die Einführung von Vue, Vuex und Vue-Router als Beispiel, um den Verarbeitungsablauf zu veranschaulichen.1. Ressourceneinführung
Fügen Sie in index.html CDN-Ressourcen hinzu, z. B.bootstrap:
<body> <p id="app"></p> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> </body>
2. Konfiguration hinzufügen
Fügen Sie in der Datei bulid/webpack.base.conf.js externe Module hinzu und importieren Sie die referenzierten externen Module wie folgt:module.exports = {
entry: {
app: './src/main.js'
},
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex'
}Hinweis:
Das Format ist „aaa“ : „bbb“, wobei aaa den Namen der zu importierenden Ressource darstellt und bbb den vom Modul für externe Referenzen bereitgestellten Namen darstellt, der von der entsprechenden Bibliothek angepasst wird. Beispielsweise ist vue Vue, vue-router ist VueRouter.3. Originalverweise entfernen
Entfernen Sie den Import, z. B.:// import Vue from 'vue' // import Router from 'vue-router'
// Vue.use(Router)
Testen
Re-npm run build, Sie werden sehen, dass die Größe von Vendor.js abgenommen hat. Über das Netzwerktool im Entwicklermodus können Sie sehen, dass Dateien wie vue.js, vuex.js, Vendor.js usw. jeweils von einem Thread geladen werden. Und durch die Verwendung von CDN ist die Ladegeschwindigkeit schneller als auf Ihrem eigenen Server. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:So packen Sie Vue-Projekte nach Umgebung
Eine Zusammenfassung mehrerer Punkte, die Sie kennen müssen, um sich zu verbessern Vue.js
Detaillierte Erläuterung der automatisierten mobilen Build-Rem-Methode von Webpack
Das obige ist der detaillierte Inhalt vonWie Vue CDN nutzt, um das Laden des ersten Bildschirms zu optimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark ist ein kleines HDD-Benchmark-Tool für Festplatten, das schnell sequentielle und zufällige Lese-/Schreibgeschwindigkeiten misst. Lassen Sie sich als Nächstes vom Redakteur CrystalDiskMark und die Verwendung von CrystalDiskMark vorstellen ). Zufällige I/O-Leistung. Es ist eine kostenlose Windows-Anwendung und bietet eine benutzerfreundliche Oberfläche und verschiedene Testmodi zur Bewertung verschiedener Aspekte der Festplattenleistung. Sie wird häufig in Hardware-Reviews verwendet
Mar 18, 2024 am 10:58 AM
foobar2000 ist eine Software, die Ihnen jederzeit Musik aller Art mit verlustfreier Klangqualität bietet Spielen Sie das erweiterte Audio auf dem Computer ab, um ein bequemeres und effizienteres Musikwiedergabeerlebnis zu ermöglichen. Das Interface-Design ist einfach, klar und benutzerfreundlich. Es nimmt einen minimalistischen Designstil an, ohne übermäßige Dekoration Es unterstützt außerdem eine Vielzahl von Skins und Themes, personalisiert Einstellungen nach Ihren eigenen Vorlieben und erstellt einen exklusiven Musikplayer, der die Wiedergabe mehrerer Audioformate unterstützt. Außerdem unterstützt es die Audio-Gain-Funktion zum Anpassen der Lautstärke Passen Sie die Lautstärke entsprechend Ihrem Hörzustand an, um Hörschäden durch zu hohe Lautstärke zu vermeiden. Als nächstes lass mich dir helfen
So verwenden Sie NetEase Mailbox Master
Mar 27, 2024 pm 05:32 PM
NetEase Mailbox ist eine von chinesischen Internetnutzern weit verbreitete E-Mail-Adresse und hat mit seinen stabilen und effizienten Diensten schon immer das Vertrauen der Benutzer gewonnen. NetEase Mailbox Master ist eine E-Mail-Software, die speziell für Mobiltelefonbenutzer entwickelt wurde. Sie vereinfacht das Senden und Empfangen von E-Mails erheblich und macht unsere E-Mail-Verarbeitung komfortabler. Wie Sie NetEase Mailbox Master verwenden und welche spezifischen Funktionen es bietet, wird Ihnen der Herausgeber dieser Website im Folgenden ausführlich vorstellen und hofft, Ihnen weiterzuhelfen! Zunächst können Sie die NetEase Mailbox Master-App im Mobile App Store suchen und herunterladen. Suchen Sie im App Store oder im Baidu Mobile Assistant nach „NetEase Mailbox Master“ und befolgen Sie dann die Anweisungen zur Installation. Nachdem der Download und die Installation abgeschlossen sind, öffnen wir das NetEase-E-Mail-Konto und melden uns an. Die Anmeldeschnittstelle ist wie unten dargestellt
So verwenden Sie die Baidu Netdisk-App
Mar 27, 2024 pm 06:46 PM
Cloud-Speicher sind heutzutage aus unserem täglichen Leben und Arbeiten nicht mehr wegzudenken. Als einer der führenden Cloud-Speicherdienste in China hat Baidu Netdisk mit seinen leistungsstarken Speicherfunktionen, der effizienten Übertragungsgeschwindigkeit und dem komfortablen Bedienerlebnis die Gunst einer großen Anzahl von Benutzern gewonnen. Und egal, ob Sie wichtige Dateien sichern, Informationen teilen, Videos online ansehen oder Musik hören möchten, Baidu Cloud Disk kann Ihre Anforderungen erfüllen. Viele Benutzer verstehen jedoch möglicherweise nicht die spezifische Verwendung der Baidu Netdisk-App. Dieses Tutorial führt Sie daher im Detail in die Verwendung der Baidu Netdisk-App ein. Wenn Sie immer noch verwirrt sind, folgen Sie bitte diesem Artikel, um mehr im Detail zu erfahren. So verwenden Sie Baidu Cloud Network Disk: 1. Installation Wählen Sie beim Herunterladen und Installieren der Baidu Cloud-Software zunächst die benutzerdefinierte Installationsoption aus.
BTCC-Tutorial: Wie kann ich die MetaMask-Wallet an der BTCC-Börse binden und verwenden?
Apr 26, 2024 am 09:40 AM
MetaMask (auf Chinesisch auch Little Fox Wallet genannt) ist eine kostenlose und beliebte Verschlüsselungs-Wallet-Software. Derzeit unterstützt BTCC die Bindung an die MetaMask-Wallet. Nach der Bindung können Sie sich mit der MetaMask-Wallet schnell anmelden, Werte speichern, Münzen kaufen usw. und bei der erstmaligen Bindung einen Testbonus von 20 USDT erhalten. Im BTCCMetaMask-Wallet-Tutorial stellen wir detailliert vor, wie man MetaMask registriert und verwendet und wie man das Little Fox-Wallet in BTCC bindet und verwendet. Was ist die MetaMask-Wallet? Mit über 30 Millionen Nutzern ist MetaMask Little Fox Wallet heute eines der beliebtesten Kryptowährungs-Wallets. Die Nutzung ist kostenlos und kann als Erweiterung im Netzwerk installiert werden
So verwenden Sie die Xiaomi Auto-App
Apr 01, 2024 pm 09:19 PM
Die Xiaomi-Autosoftware bietet Funktionen zur Fernsteuerung des Fahrzeugs, mit denen Benutzer das Fahrzeug über Mobiltelefone oder Computer fernsteuern können, z. B. das Öffnen und Schließen der Türen und Fenster des Fahrzeugs, das Starten des Motors, die Steuerung der Klimaanlage und des Audios des Fahrzeugs usw. Folgendes ist Lassen Sie uns gemeinsam mehr über die Verwendung und den Inhalt dieser Software erfahren. Umfassende Liste der Funktionen und Nutzungsmethoden der Xiaomi Auto-App. 1. Die Xiaomi Auto-App wurde am 25. März im Apple AppStore gestartet und kann jetzt im App Store auf Android-Telefonen heruntergeladen werden: Erfahren Sie mehr über die wichtigsten Highlights und technischen Parameter von Xiaomi Auto und vereinbaren Sie einen Termin für eine Probefahrt. Konfigurieren und bestellen Sie Ihr Xiaomi-Auto und unterstützen Sie die Online-Abwicklung von Aufgaben zur Autoabholung. 3. Community: Informationen zur Marke Xiaomi Auto verstehen, Autoerfahrungen austauschen und das wundervolle Autoleben teilen: Das Mobiltelefon ist die Fernbedienung, Fernbedienung, Echtzeitsicherheit, einfach
Mar 18, 2024 am 11:46 AM
Chirp Down kann auch als JJDown bezeichnet werden. Dies ist ein speziell für Bilibili entwickeltes Video-Download-Tool. Viele Freunde verstehen jedoch nicht, was Chirp Down ist. So verwenden Sie Chirp Down. 1. Der Ursprung von Chirpdown Chirpdown liegt im Jahr 2014. Es handelt sich um eine sehr alte Video-Download-Software. Die Benutzeroberfläche übernimmt den Win10-Kachelstil, der einfach, schön und leicht zu bedienen ist. Chirna ist das Aushängeschild von Chirpdown und die Künstlerin ist あさひクロイ. Jijidown war stets bestrebt, Benutzern das beste Download-Erlebnis zu bieten, die Software ständig zu aktualisieren und zu optimieren, verschiedene Probleme und Fehler zu beheben und neue Funktionen und Features hinzuzufügen. Die Funktion von Chirp Down Chirp Down ist
So verwenden Sie den kleinen Blackbox-CD-Key
Mar 12, 2024 pm 07:34 PM
Wie verwende ich den Little Black Box-CD-Key? Einfach ausgedrückt: Sie können Spiele direkt auf der Steam-Plattform von Little Black Box kaufen und erhalten nach erfolgreichem Kauf einen CDK-Einlösungscode. Anschließend verwenden Sie diesen Einlösecode in der Steam Mall, um das entsprechende Spiel zu kaufen. Viele Freunde wissen möglicherweise nicht, wie man den kleinen Black-Box-CD-Key verwendet. Im Folgenden erkläre ich die Schritte zum Einlösen im Detail. So verwenden Sie den Little Black Box-CD-Key: 1. Kopieren Sie zunächst den CDK-Einlösungscode, den Sie nach dem Kauf des Little Black Box-Spiels erhalten haben. 2. Starten Sie dann die Steam-Plattform. 3. Klicken Sie im Menü oben links auf die Option „Spiel“. 4. Suchen Sie im neuen Menü nach „Produkt auf Steam aktivieren“ und klicken Sie darauf. 5. Klicken Sie direkt auf der Popup-Oberfläche auf Weiter. 6. Kaufen Sie die kleine Blackbox
