Paketieren, Zusammenführen und Komprimieren von Vue-Projekten zur Optimierung der Reaktionsgeschwindigkeit von Webseiten

Vorwort

Es gibt viele Faktoren, die die Reaktionsgeschwindigkeit von Webseiten beeinflussen, z. B.: Der Anforderungsinhalt ist zu groß, die Anzahl der HTTP-Anforderungen ist zu groß, der Server selbst braucht zu lange, um die Anforderung zu verarbeiten, die Ausführung des JS-Skripts dauert zu lange, der Browser führt einen Neufluss und ein Neuzeichnen durch usw. Die Reaktionsgeschwindigkeit von Webseiten hängt eng mit der Benutzererfahrung zusammen und hat direkte Auswirkungen auf die Bereitschaft der Benutzer, Ihre Website weiterhin zu besuchen. Bei Vue-Projekten besteht das häufigste Problem darin, dass die gebündelte Datei zu groß ist, was zu langen Ladezeiten führt. Die Verarbeitung der Serveranforderung dauert zu lange und die Ausführung des JS-Skripts dauert zu lange. Diese beiden hängen eng mit der Qualität des Codes und der Serverkonfiguration zusammen und müssen je nach Projekt und Code optimiert werden. Heute werden wir die Reaktionsgeschwindigkeit der Webseite nur auf zwei Ebenen optimieren: die Anzahl der Anforderungen und die Größe der einzelnen Datei nach der Verpackung (dies gilt für alle Front-End-Projekte).

1. Der Anforderungsinhalt ist zu groß

Nachdem das Projekt gepackt wurde, stellen wir häufig fest, dass die Anbieter- und App-Dateien zu groß sind. Die Datei app.js enthält den Logikcode jeder Seite im Projekt, und vendor.js enthält einige allgemeine Codes für jede Seite und Komponente. Mit zunehmender Komplexität des Projekts erhöht sich auch die Größe dieser Datei. Bei begrenzter Bandbreite dauert das Herunterladen dieser beiden Dateien oft lange.

Lösung:

• Routing Lazy Loading: Codeblöcke aufteilen

Vue unterstützt asynchrone Komponenten, d. h. Sie können dort, wo die Komponente verwendet wird, ein Promise verwenden, und das Promise gibt schließlich durch Auflösen ein Komponentenobjekt zurück. Die dynamische Importmethode von webpack ermöglicht das Verpacken des Codes in Blöcken und gibt ein Promise zurück (was genau das ist, was asynchrone Komponenten benötigen). Durch die Verwendung von Importen in der Routing-Konfigurationstabelle können Sie jede Seitenkomponente in verschiedene Codeblöcke aufteilen und dann die entsprechende Komponente laden, wenn auf die Route zugegriffen wird. Dadurch wird vermieden, dass der gesamte Inhalt in einem Block verpackt wird. Dadurch erfolgt das Laden „bei Bedarf“ und die Reaktionsgeschwindigkeit wird erheblich verbessert. Führen Sie die Routing-Komponente wie in der folgenden Abbildung dargestellt ein:

CDN-Einführung

Geschäftscodes werden häufig aktualisiert und iteriert. Damit der Browser unsere statischen Dateien so lange wie möglich zwischenspeichern kann, wird der Klassenbibliothekscode, wenn der Klassenbibliothekscode und der Geschäftscode zusammen verpackt sind, aktualisiert, wenn der Geschäftscode aktualisiert wird, und kann nicht für längere Zeit im Browser zwischengespeichert werden. Wir hoffen, durch den Cache den Browserverkehr zu reduzieren und die Ladegeschwindigkeit der Benutzerbrowser zu erhöhen. Daher teilen wir ihn auf und verpacken ihn separat. Im Allgemeinen verfügen Drittanbieterpakete über Skriptimportlösungen. Sie müssen das Drittanbieterpaket beim Verpacken nur ignorieren und dann den entsprechenden Importlink zur Vorlage hinzufügen.

Erstens muss keine vue.config.js im Stammverzeichnis des Projekts erstellt werden

Der spezifische Code lautet wie folgt:

Konstanten cdn = {
    // Externe Elemente verpackter Bibliotheken von Drittanbietern ignorieren: {
      vue: "Ansicht",
      "element-ui": "ELEMENT",
      'vue-router': 'VueRouter',
      vuex: "Vuex",
      axios: 'axios',
      Moment: "Moment",
      echarts: "echarts"
    },
  
    //JS über CDN verwenden: [
      „https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js“,
      „https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js“,
      „https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js“,
      „https://cdn.bootcss.com/axios/0.19.0/axios.min.js“,
      „https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js“,
      'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js',
      „https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.2/index.js“,
    ],
  
    css: ["https://unpkg.com/[email protected]/lib/theme-chalk/index.css"],
  }

modul.exporte = {
    öffentlicher Pfad: '/CRM/dist/',
    // öffentlicher Pfad: './',
    chainWebpack: Konfiguration => {
        config.plugin('html').tap(args => {
            args[0].cdn = cdn
            Argumente zurückgeben
          })
          config.plugins.delete('Vorabruf')
    },
    //Beim Verpacken werden Drittanbieterbibliotheken ignoriert configureWebpack: { 
        Externe: cdn.externals
    },
}

Fügen Sie es dann an der entsprechenden Position der Vorlage pulic/index.html hinzu (fügen Sie die Position selbst hinzu).

//Das Folgende ist CSS. Wenn es ein Skript ist, ändern Sie den Kommentar. Es ist leicht zu verstehen, wenn Sie genau hinschauen. Die Konfiguration besteht darin, eine CDN-Variable hinzuzufügen und sie dann zu durchlaufen und in die Vorlage einzufügen <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="externes Nofollow" rel="Stylesheet">
    <!-- <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" crossorigin="anonymous"></script> --> 
  <% } %>

Ein weiterer Vorteil der Verwendung von CDN besteht darin, dass dadurch die Verpackungsgeschwindigkeit erhöht werden kann.

Komprimieren von Anforderungsressourcen

Im Allgemeinen stellen wir auf dem Server bereit und verwenden nginx als Proxyserver, und alle Anforderungen werden über nginx weitergeleitet. Wir können gzip aktivieren, indem wir nginx konfigurieren.

Server {
        gzip an;
        gzip_types Text/einfache Anwendung/Javascript-Anwendung/x-Javascript-Text/Javascript-Text/XML-Text/CSS;
}

Mit der obigen Konfiguration komprimiert der Server jedes Mal, wenn der Browser eine Ressource vom Server anfordert, die Ressource, bevor er sie an den Browser zurückgibt, der sie anschließend dekomprimiert. Dadurch kann die Downloadgeschwindigkeit statischer Ressourcen erheblich verbessert werden.

Aber es gibt noch einen weiteren Punkt. In diesem Fall führt der Server jedes Mal, wenn der Browser eine Anfrage an den Server stellt, einen Komprimierungsvorgang durch. Wenn das Anfragevolumen groß ist, wirkt sich der Komprimierungsvorgang auch auf die Antwortgeschwindigkeit des Servers aus. Daher können wir die Dateien beim Verpacken direkt in ein komprimiertes Paket packen. Auf diese Weise muss der Server nicht häufig packen:

Installationsabhängigkeit: Komprimierungs-Webpack-Plugin

npm installiere Komprimierungs-Webpack-Plugin --save-dev

vue.config.js-Änderung:

const CompressionPlugin = erforderlich('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
modul.exporte = {
    öffentlicher Pfad: './',
    productionSourceMap: false,
    konfigurierenWebpack: {...},
    chainWebpack: Konfiguration => {
        config.resolve.alias.set('@', lösen('src'));
        wenn (Prozess.Umgebung.NODE_ENV === 'Produktion') {
            config.plugin('Kompressions-Plugin')
            .use(neues KompressionsPlugin({
                Dateiname: '[Pfad].gz[Abfrage]',
                Algorithmus: "gzip",
                Test: Produktions-Gzip-Erweiterungen,
                Schwellenwert: 10240,
                minRatio: 0,8,
                deleteOriginalAssets: true
            }));
        }
    },
};

Nginx-Konfiguration

Server {
        gzip_static ein;
        gzip an;
        gzip_types Text/einfache Anwendung/Javascript-Anwendung/x-Javascript-Text/Javascript-Text/XML-Text/CSS;
}

1. Zu viele HTTP-Anfragen

Alles hat eine Grenze. Wir nennen das „Extreme führen zu ihren eigenen Gegensätzen“. Wir verwenden On-Demand-Laden, Codesegmentierung und Verpackung. Wenn das Projekt immer größer wird und immer mehr Module vorhanden sind, werden wir feststellen, dass nach der Verpackung des Projekts viele Dateien generiert werden. Obwohl jede Datei kleiner ist, kann dies für die Front-End-Leistung einen höheren Aufwand beim Herstellen und Schließen von Netzwerkverbindungen bedeuten. Daher ist es bei der Front-End-Optimierung normalerweise erforderlich, ein Gleichgewicht zwischen der Anzahl der Dateien und der Größe einer einzelnen Datei zu finden. Hier können wir das von webpack bereitgestellte Plugin MinChunkSizePlugin verwenden, um die Blockgröße über der angegebenen Größenbeschränkung zu halten, indem wir Blöcke zusammenführen, die kleiner als minChunkSize sind.

Lösung:

vue.config.js-Konfiguration

modul.exporte = {
    öffentlicher Pfad: './',
    productionSourceMap: false,
    konfigurierenWebpack: {
        Plugins: [
            neues webpack.optimize.MinChunkSizePlugin({
              minChunkSize: 10000 // Mindestanzahl an Zeichen
            })
        ]
    },
}

Durch die oben genannten Vorgänge können wir die Größe und Menge der gepackten Dateien in einem vernünftigen Rahmen steuern. Indem wir ngnix konfigurieren und gzip aktivieren, können wir grundsätzlich das Problem der langen Wartezeit beim ersten Laden der meisten Vue-Einzelseitenanwendungen lösen.

Zusammenfassen

Damit ist dieser Artikel über das Verpacken, Zusammenführen und Komprimieren von Vue-Projekten zur Optimierung der Reaktionsgeschwindigkeit von Webseiten abgeschlossen. Weitere relevante Inhalte zum Verpacken, Zusammenführen und Komprimieren von Vue-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!