Detaillierte Erläuterung der Vue-Projektoptimierung und -verpackung

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
  },
Code kopieren

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")
Code kopieren

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 durch 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')
    }
  }
}
Code kopieren

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 verbessern und einige statische Ressourcen (CSS, .JS, Bilder, Videos) auf einem CDN-Server eines Drittanbieters abzulegen, um die Zugriffsgeschwindigkeit zu erhöhen.

Nutzen:

• Reduzieren Sie die Größe des Anwendungspakets
  
• Beschleunigen Sie den Zugriff auf statische Ressourcen
  
• 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 Knotenmodulen übernommen werden. Erst wenn das Projekt online ist, müssen Sie externe Ressourcen verwenden. 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
    ]
  }
}
Code kopieren

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')
    }
  }
}
Code kopieren

Über html-webpack-plugin in index.html之eingefügt: In der Datei vue.config.js konfigurieren:

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...
}
Code kopieren

Suchen Sie nach public/index.html und konfigurieren Sie die CDN-Konfiguration so, dass CSS und JS nacheinander eingefügt werden. Ä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>
Code kopieren

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

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!