Implementierungsschritte für die Paketierung und Optimierung von Vue-Projekten

Verpacken, Starten und Optimieren des Vue-Projekts

Nach Abschluss des Projekts starten wir das Projekt online. Um die Leistung zu verbessern, führen wir häufig einige Optimierungsvorgänge durch

Verpackung des Vue-Projekts

Im Gerüstprojekt gibt es einen Standardpaketierungsbefehl. Wir können npm run bulid eingeben, um das Projekt zu paketieren.

Öffnen Sie das Terminal und wechseln Sie in das Stammverzeichnis des Projekts

Geben Sie den Befehl ein: npm run build

Im Stammverzeichnis des aktuellen Projekts wird ein Ordner „dist“ erstellt, der die gepackten Dateien enthält

Projekthosting

Wir können einen einfachen Knotenserver erstellen, um das gepackte Projekt zu hosten, sodass wir den Zugriff auf das Serverprojekt simulieren können

1. Erstellen Sie ein neues Verzeichnis als Stammverzeichnis des Servers, führen Sie node init -y im kleinen schwarzen Fenster aus, um die Initialisierung durchzuführen, führen Sie dann npm i express aus, um das Express-Paket herunterzuladen, erstellen Sie dann die Datei app.js und kopieren Sie den folgenden Code hinein (verwenden Sie das Express-Paket, um einen Server zu öffnen)

2. Kopieren Sie das soeben gepackte dist-Verzeichnis in das Node-Server-Verzeichnis

3. Die Ressourcen befinden sich im Verzeichnis dist. Sie können also statisches Ressourcenhosting verwenden, um Ressourcen bereitzustellen, und das Verzeichnis dist als Ressourcenhosting-Verzeichnis verwenden.

Express-Server erstellen

var express = erforderlich('express')
const Pfad = require('Pfad')

// 2. Erstellen Sie den Server var app = express();

// Hosten statischer Ressourcen // Sie können auch alle statischen Ressourcen in einem angegebenen Verzeichnis, z. B. „public“, platzieren und dann die folgende Konfiguration hinzufügen: app.use(express.static('dist'))
app.use('/', express.static(Pfad.join(__dirname, 'dist')))

// 3. Starten Sie den Server und lauschen Sie dem Port app.listen(3001, () => {
  console.log('http://127.0.0.1:3001')
})

Starten Sie den Server

Öffnen Sie das Terminal im Serververzeichnis und geben Sie node app.js ein

Geben Sie die Serveradresse in Ihren Browser ein

Gemeinsame Optimierung von Projekten

Nachdem das Projekt gepackt wurde, werden die zuvor verwendeten Bereitstellungsabhängigkeitspakete und die im Projekt verwendeten externen Ressourcen gepackt

Wenn im Vorfeld viele Pakete oder unnötige Pakete eingeführt werden, erhöht sich die Größe des Projekts, was dazu führt, dass Benutzer für den normalen Zugriff mehr Daten anfordern, was sich nicht positiv auf die Benutzererfahrung auswirkt. Daher muss der Verpackungsprozess optimiert werden.

Generell können wir das Projekt unter dem Aspekt der Codeoptimierung optimieren oder eine CDN-ähnliche Methode zur Projektoptimierung verwenden.

Das Scaffolding stellt einen Befehl zur Verfügung, der es uns ermöglicht, die Verteilung (Belegung) der Projektressourcen zu sehen: npm run build – --report

Projektberichtsdateien generieren

npm-Ausführung build – --report 

Öffnen Sie die Berichtsseite

1. Je größer der Block auf der Berichtsseite ist, desto mehr Volumen nimmt die Vorlage ein.
2. Wenn das Modul ein größeres Volumen einnimmt, sollten wir erwägen, es nicht in das Produkt zu packen

CDN-Beschleunigungsoptimierung

cdn: Der Kern von CDN besteht darin, Medienressourcen, dynamische und statische Bilder (Flash), HTML, CSS, JS und andere Inhalte in einem IDC in Ihrer Nähe zwischenzuspeichern, sodass Benutzer Ressourcen gemeinsam nutzen und die Anforderungen einer Verkürzung der Reaktionszeit zwischen Sites usw. erfüllen können. Der Kern des Online-Spielebeschleunigers besteht darin, die Geschwindigkeit für Benutzer zu erhöhen, indem ein Computerraum mit hoher Bandbreite eingerichtet und Multi-Node-Server aufgesetzt werden.

Wir können einige großvolumige Module verwenden und uns von CDN bei der Bereitstellung der entsprechenden Ressourcen unterstützen lassen, wodurch wir den Druck auf unseren eigenen Servern verringern und für eine schnellere und bessere Ressourcenreaktion sorgen können.

vue.config.js

Wenn Sie im Gerüstprojekt Ihre eigene Projektkonfiguration hinzufügen möchten, können Sie im Stammverzeichnis eine Datei vue.config.js hinzufügen und in dieser Datei eine benutzerdefinierte Konfiguration implementieren.

Beim Verpacken wird diese Konfiguration mit der Gerüstkonfiguration kombiniert

Paketausschlüsse hinzufügen

modul.exporte = {
    konfigurierenWebpack: {
        Äußerlichkeiten: {
            'vue': 'Ansicht',
            'element-ui': 'ELEMENT',
            'Feder': 'Feder'
        }
    },
}

Wie Sie sehen, wird die Größe des gepackten Projekts deutlich reduziert, das Problem ist jedoch nicht gelöst. Ohne diese Pakete kann das gepackte Projekt nicht ausgeführt werden.

Dies liegt daran, dass im gepackten Projekt kein Vue-Paket vorhanden ist, sodass ein Fehler auftritt. Wir müssen jetzt CDN verwenden, um diese Ressourcen bereitzustellen.

Benutzeranpassung des CDN hinzufügen

Fügen Sie den folgenden Code zu vue.config.js hinzu

lass cdn = {
  CSS: [
    //element-ui-css
    „https://unpkg.com/element-ui/lib/theme-chalk/index.css“, // Stylesheet // Rich-Text-Box-Plug-in-Stil „https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css“
  ],
  java.js: [
    // vue muss am Anfang stehen!
    'https://unpkg.com/vue/dist/vue.js', // vuejs
    // Element-UI js
    'https://unpkg.com/element-ui/lib/index.js', // elementUI
    // Rich-Text-Box-Plugin 'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js'
  ]
}

Automatisches Hinzufügen von Ressourcen zur Seite durch Plugins

Ressourcen in Plugins einbinden

modul.exporte = {
  // Fügen Sie Verpackungsausschlüsse hinzu, um anzugeben, dass die Pakete in der folgenden Konfiguration zukünftig nicht in das Projekt gepackt werden configureWebpack: {
    Äußerlichkeiten: {
            'vue': 'Ansicht',
            'element-ui': 'ELEMENT',
            'Feder': 'Feder'
        }
  },
  //Mounten Sie die CDN-Ressourcen in das Plugin chainWebpack (config) {
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      Argumente zurückgeben
    })
  }
}

Verwenden Sie das Plug-In, um die angegebene CDN-Ressource auf der Seite hinzuzufügen, und fügen Sie den folgenden Code zum öffentlichen Index im Projekt hinzu (der Indexdatei vor dem Verpacken des Projekts).

CSS-Import hinzufügen (in der Kopfstruktur)

<% für (var css von htmlWebpackPlugin.options.cdn.css) { %>
  <link rel="stylesheet" href="<%=css%>" />
<% } %>

JS-Import hinzufügen (in der Body-Struktur)

<% für (var js von htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
<% } %>

Umpacken, OK

CDN nur in der Produktionsphase verwenden

Bei der Entwicklung eines Projekts besteht eigentlich keine Notwendigkeit, CDN zu verwenden, da dies die Effizienz des Ladens unserer Seiten verringern würde und nicht für die lokale Entwicklung geeignet ist (Netzwerkverbindung erforderlich).

Wir können die entsprechende Verarbeitung gemäß den Umgebungsvariablen durchführen und das Plug-In nur bei Verwendung des Produkts die entsprechenden Ressourcendateien automatisch in die HTML-Seite einfügen lassen.

const isProd = process.env.NODE_ENV === 'production' // Ist es eine Produktionsumgebung? let externals = {
  'vue': 'Ansicht',
  'element-ui': 'ELEMENT',
  'Feder': 'Feder'
}


lass cdn = {
  CSS: [
    //element-ui-css
    „https://unpkg.com/element-ui/lib/theme-chalk/index.css“, // Stylesheet // Rich-Text-Box-Plug-in-Stil „https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css“
  ],
  java.js: [
    // vue muss am Anfang stehen!
    'https://unpkg.com/vue/dist/vue.js', // vuejs
    // Element-UI js
    'https://unpkg.com/element-ui/lib/index.js', // elementUI
    // Rich-Text-Box-Plugin 'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js'
  ]
}

cdn = isProd? cdn: { css: [], js: [] }
Externe = isProd? Externe: {}


modul.exporte = {
  // Fügen Sie Verpackungsausschlüsse hinzu, um anzugeben, dass die Pakete in der folgenden Konfiguration zukünftig nicht in das Projekt gepackt werden configureWebpack: {
    Äußerlichkeiten
  },
  // 
  chainWebpack (Konfiguration) {
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      Argumente zurückgeben
    })
  }
}

Damit ist dieser Artikel über die Implementierungsschritte der Vue-Projektpaketierung und -optimierung abgeschlossen. Weitere relevante Inhalte zur Vue-Projektpaketierung und -optimierung 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!