Wichtige Bonuselemente zur Optimierung und Verpackung des Frontends von Vue-Projekten

Vorwort

Nachdem das Vue-Projekt entwickelt wurde, ist vor dem Verpacken und Freigeben des Projekts die Projektoptimierung ein wesentlicher Vorgang, der auch für Programmierer von Vorteil ist. Befolgen Sie die Schritte in diesem Artikel, um zu erfahren, wie Sie das Projekt optimieren können~

1. Routing von Lazy Loading

1. Warum brauchen wir Lazy Loading von Routen?

Als ich das Projekt gerade ausführte, stellte ich fest, dass alle JS- und CSS-Dateien geladen wurden, sobald ich die Seite aufrief. Dieser Vorgang war sehr zeitaufwändig.
Wenn Sie beim Öffnen der Seite die entsprechenden JS- und CSS-Dateien der entsprechenden Seite laden, wird die Seitenladegeschwindigkeit erheblich verbessert.

2. So implementieren Sie das Lazy Loading von Routen

Offizielle Vue-Dokumentation: Routing Lazy Loading

Der Code lautet wie folgt (Beispiel):

{
    Pfad: '/login',
    Komponente: () => import('@/views/login/index'),
    versteckt: wahr
  },

3. Magische Kommentare beim Lazy Loading von Routen

Sie können den Namen dieser Datei anpassen, indem Sie im Kommentar „webpackChunkName“ angeben.

Der Code lautet wie folgt (Beispiel):

Komponenten = () => import(/* webpackChunkName:"login"*/ "../Komponente/Login.vue")

2. Analysieren Sie die Paketgröße

1. Nachfrage

Ich möchte die Größe jeder Datei in der gepackten Datei wissen. Damit wir den Code analysieren und optimieren können.

2. So generieren Sie Paketanalysedateien

Führen Sie npm run preview -- --report im Terminal aus. Dieser Befehl führt eine Abhängigkeitsanalyse von unserem Einstiegspunkt main.js aus und analysiert die Größe jedes Pakets. Schließlich wird im generierten dist-Ordner eine Datei report.html generiert. Nach dem Öffnen können Sie den Speicherplatz sehen, den die in unserem Projekt verwendeten Dateien belegen.
(Das Wirkungsdiagramm ist wie folgt:)

3. Die Webpack-Konfiguration schließt die Verpackung aus

1. Nachfrage

Schließen Sie einige selten verwendete Pakete aus den generierten Paketdateien aus.

Beispielsweise können die in der obigen Abbildung gezeigten xsxl.js und element.js aus den generierten Dateien ausgeschlossen werden.

2. Verpackung ausschließen

Suchen Sie nach vue.config.js und fügen Sie das externe Element wie folgt hinzu:

Der Code lautet wie folgt (Beispiel):

konfigurierenWebpack: {
  //Konfigurieren Sie den Titel der Single Page Application-Seite Name: Name,
  Äußerlichkeiten: {
     /**
      * Analyse externer Objektattribute.
      * Grundformat:
      * 'Paketname': 'Der im Projekt eingeführte Name'
      *  
    */
    'vue': 'Ansicht',
    'element-ui': 'ElementUI',
    'xlsx': 'XLSX'
  },
  lösen: {
    Alias: {
      '@': auflösen('src')
    }
  }
}

IV. Zitieren von Online-Ressourcen

1. Nachfrage

Nachdem wir den vorherigen Schritt ausgeführt hatten, war das generierte Paket viel kleiner. Ohne diese abhängigen Pakete kann das Projekt jedoch nicht online ausgeführt werden. Dann müssen wir auf Ressourcen im Netzwerk verweisen, um den Betrieb unseres Codes zu unterstützen.

2. CDN

• Der vollständige Name von CDN lautet „Content Delivery Network“, was auf Chinesisch Inhaltsverteilungsnetzwerk heißt. Wir verwenden es, um die Zugriffsgeschwindigkeit zu erhöhen
• Das Platzieren einiger statischer Ressourcen (CSS, JS, Bilder und Videos) auf einem CDN-Server eines Drittanbieters kann den Zugriff beschleunigen.

Nutzen:

1. Reduzieren Sie die Größe des Anwendungspakets
2. Beschleunigen Sie den Zugriff auf statische Ressourcen
3. Verwenden Sie den Browser-Cache, um unveränderte Dateien für längere Zeit zwischenzuspeichern

3. Schritte zur Umsetzung

Hinweis: In der Entwicklungsumgebung können Dateiressourcen weiterhin aus den lokalen node_modules übernommen werden. Erst wenn das Projekt online ist, müssen Sie auf externe Ressourcen zurückgreifen. An dieser Stelle können wir zur Unterscheidung Umgebungsvariablen verwenden. Die Einzelheiten lauten wie folgt:

Der Code lautet wie folgt (Beispiel):

In der Datei vue.config.js:

lass Externe = {}
lass cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // Bestimmen Sie, ob es sich um eine Produktionsumgebung handelt, if (isProduction) {
  Externe = {
      /**
      * Analyse der Objektattribute externer Objekte:
      * 'Paketname': 'Der im Projekt eingeführte Name'
    */
      'vue': 'Ansicht',
      'element-ui': 'ELEMENT',
      'xlsx': 'XLSX'
  }
  cdn = {
    CSS: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // Element-UI-CSS-Stylesheet],
    java.js: [
      // vue muss am Anfang stehen!
      'https://unpkg.com/[email protected]/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js', // xlsx
    ]
  }
}

Webpack-Konfiguration, externe Konfigurationselemente

konfigurierenWebpack: {
  //Konfigurieren Sie den Titel der Single Page Application-Seite Name: Name,
  Äußerlichkeiten: Äußerlichkeiten,
  lösen: {
    Alias: {
      '@': auflösen('src')
    }
  }
}

Über das HTML-Webpack-Plugin in index.html eingefügt:

Konfigurieren Sie in der Datei vue.config.js:

chainWebpack(Konfiguration) {
  config.plugin('preload').tap(() => [
    {
      rel: 'Vorladen',
      DateiBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      einschließen: 'initial'
    }
  ])
  //CDN-Variable einfügen (wird beim Verpacken ausgeführt)
  config.plugin('html').tap(args => {
    args[0].cdn = cdn // Konfiguriere cdn für das Plugin, um Argumente zurückzugeben
  })
  // Den Rest weglassen...
}

Suchen Sie nach public/index.html und fügen Sie nacheinander CSS und JS ein, indem Sie die CDN-Konfiguration konfigurieren.

Ändern Sie den Inhalt des Kopfes wie folgt:

<Kopf>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1, Benutzerskalierung=nein">
    <link rel="Symbol" href="<%= BASE_URL %>favicon.ico">
    <Titel><%= webpackConfig.name %></Titel>

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


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

5. Packen und entfernen Sie console.log

1. Nachfrage

Nachdem das Projekt verpackt und gestartet wurde, entfernen Sie alle console.log im Code

2. Code-Demonstration

Konfigurieren Sie in der Datei vue.config.js:

Der Code lautet wie folgt (Beispiel):

chainWebpack(Konfiguration) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      Argumente zurückgeben
    })
}

Zusammenfassen

Damit ist dieser Artikel über die wesentlichen Bonuselemente für das Front-End der Vue-Projektoptimierung und -verpackung abgeschlossen. Weitere relevante Inhalte zur Vue-Projektoptimierung und -verpackung 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!