Der gesamte Prozess der Optimierung des ersten Ladens einer Vue-Seite

Vorwort

Heute habe ich das von mir entwickelte Blogsystem online gestellt, aber ich habe den erstellten Dist-Ordner einfach in das Stammverzeichnis des Cloud-Servers verschoben, was ihn beim ersten Aufrufen der Seite sehr langsam machte. Ich muss ihn also optimieren.

Größe vor der Optimierung

1. Bildoptimierung

Um die Entwicklung zu erleichtern, habe ich ein JPG als Hintergrundbild in die Assets eingefügt, das Laden des Bildes dauerte mehr als zehn Sekunden. Also habe ich das Bild in den Bereich hochgeladen und stattdessen die Netzwerkadresse verwendet.

2. Deaktivieren Sie die Generierung von .map-Dateien

Im Dist-Ordner des Builds befinden sich viele .map-Dateien. Diese Dateien werden hauptsächlich verwendet, um den Code online zu debuggen und den Stil anzuzeigen. Da sie grundsätzlich lokal debuggt werden und nicht online geändert werden müssen, ist das Generieren dieser Dateien verboten.

Fügen Sie diesen Satz in vue.config.js hinzu.

3. Routing Lazy Loading

\

4. CDN führt öffentliche Bibliothek ein

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="externes nofollow" >
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.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/axios/0.19.2/axios.min.js"></script>

    //cdn importiere configureWebpack: {
        Äußerlichkeiten: {
            'vue': 'Ansicht',
            'element-ui': 'ELEMENT',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex',
            'axios': 'axios'
        }
    }

Im Internet steht zwar, dass man den Import auskommentieren kann, aber wenn man das selbst macht, bekommt man eine Fehlermeldung. In manchen Informationen steht auch, dass es ohne Kommentierung nicht verpackt wird.

Nach einer Weile hat die endgültige Datei einen erheblichen Effekt, aber app.js ist immer noch sehr groß

5. GZIP-Komprimierung

Nachdem ich damit fertig bin, finde ich, dass die ersten vier Schritte ein Kinderspiel sind. Ich habe die 1,4 MB große app.js direkt auf über 100 KB reduziert, und der Rest ist nicht der Rede wert.

 konfigurierenWebpack: config => {
        zurückkehren {
            //CDN konfigurieren
            Äußerlichkeiten: {
                'vue': 'Ansicht',
                'element-ui': 'ELEMENT',
                'vue-router': 'VueRouter',
                'vuex': 'Vuex',
                'axios': 'axios'
            },
            //GZIP-Komprimierungs-Plugins konfigurieren: [
                neues CompressionWebpackPlugin({

                    Test: neuer RegExp('\.(js|css)$'),
                    Schwellenwert: 10240,
                    minVerhältnis: 0,8
                })
            ],
        }
    }

Der Server muss ebenfalls konfiguriert werden, sonst erkennt er die GZIP-Datei nicht

//GZIP-Komprimierungsmodul konfigurieren const compression = require('compression');
//Führen Sie app.use(compression()) vor aller Middleware ein;

Der schlechteste Server kann nach den obigen Optimierungen immer noch fliegen!!!

Vergleichen Sie und das Ergebnis ist offensichtlich!!!

6. Verwenden Sie Vue-Router zum verzögerten Laden von Seiten

Das verzögerte Laden der Seite bedeutet hier, dass ich, wenn ich jetzt Seite A besuche, nur die Dinge auf Seite A anfordere und nicht die Dinge auf anderen Seiten.

Die einzelnen Schritte sind auf der offiziellen Website von vue-router klar beschrieben. Sie können bei Bedarf einen Blick darauf werfen:

Implementierung des Lazy Loading von Seiten durch Vue-Router

Zusammenfassen

Dies ist das Ende dieses Artikels über die Optimierung des ersten Ladens von Vue-Seiten. Weitere relevante Inhalte zur Optimierung des ersten Ladens von Vue-Seiten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!