Wie analysiere ich die Bündelgröße einer Vue -Anwendung?

Verwenden Sie den integrierten Bundle-Analysator von Vue CLI, indem Sie @VUE/CLI-Plugin-Bundler installieren und NPM Run Build ausführen, um ein visuelles Tremap mit Modulgrößen zu erzeugen. 2. Installieren Sie für benutzerdefinierte Webpack-Setups Webpack-Bundle-Analyzer manuell, fügen Sie das Plugin zu Vue.config.js hinzu und führen Sie den Build aus, um einen statischen Analysebericht zu erstellen. 3. Installieren Sie für vite-basierte Apps Rollup-Plugin-Visualizer, konfigurieren Sie es in vite.config.js und führen Sie den Build aus, um einen interaktiven Bündelbericht zu erstellen. 4. Analysieren Sie GZIP-Größen mithilfe von Tools wie Source-MAP-Explorer, um die tatsächlichen Download-Größen zu verstehen, da die GZIP-Komprimierung die Leistung erheblich beeinflusst. 5. Überwachen Sie Schlüsselmetriken einschließlich Anbieterbündelgröße, App-Code-Effizienz, doppelte Pakete und ordnungsgemäße Codespalte über dynamische Importe wie const page = () => import ('./ Seite.vue'). 6. Legen Sie optional die Größenbudgets in vue.config.js mithilfe von WebPack -Leistungshinweisen fest, um die Grenzen für Einstiegspunkte und -vermögenswerte durchzusetzen und Warnungen oder Fehler auszulösen, wenn sie überschritten werden. Regelmäßige Bundle -Analyse mit visuellen Tools erfordern die frühzeitige Identifizierung von Bloat, priorisieren die Optimierung und die Aufrechterhaltung der schnellen Lastzeiten, insbesondere in langsamen Netzwerken, indem sie sich auf komprimierte Größen konzentriert und unnötige Abhängigkeiten beseitigt, was zu einer leistungsfähigeren VUE -Anwendung führt.

Die Analyse der Bündelgröße einer VUE -Anwendung ist für die Leistungsoptimierung von wesentlicher Bedeutung, insbesondere wenn Ihre App wächst. Ein großes Bündel verlangsamt die Ladezeiten, insbesondere in mobilen oder langsamen Netzwerken. Hier erfahren Sie, wie Sie es effektiv analysieren können.

1. Verwenden Sie den integrierten Bündelanalysator von Vue Cli (falls Vue CLI).

Wenn Sie Vue CLI verwenden, besteht der einfachste Weg, das @vue/cli-plugin-bundle-analyzer Plugin zu verwenden.

Schritte:

• Installieren Sie das Plugin:

   Vue -Analysator

• Führen Sie den Build mit Analysator aus:

   NPM Run Build

• Nach dem Erstellen wird in Ihrem Browser ein Bericht automatisch geöffnet, das eine visuelle Aufschlüsselung jedes Moduls in Ihrem Bundle zeigt.

Dies verwendet Webpack-Bundle-Analyzer unter der Motorhaube, sodass Sie nach Größe ein Treemap für alle Abhängigkeiten erhalten.

2. Integrieren Sie die Webpack-Bundle-Analyzer manuell (für benutzerdefinierte Setups)

Wenn Sie Vite, Nuxt oder ein benutzerdefiniertes Webpack -Setup verwenden, können Sie den Analysator manuell hinzufügen.

Für Webpack-basierte VUE-Apps:

• Installieren:

  

   NPM Install-Save-dev WebPack-Bundle-Analyzer

• Aktualisieren Sie vue.config.js :

   const bundleanalyzerplugin = fordert ('webpack-bundle-analyzer'). bundleanalyzerplugin;
  
  module.exports = {
    configureWebpack: {
      Plugins: [
        Neue Bundleanalyzerplugin ({{
          OpenAnalyzer: Richtig,
          Analyzermode: 'static', // generiert eine HTML -Datei
        }),
      ],
    },
  };

• Run npm run build - Es wird ein Bericht erstellt und geöffnet.

3. Verwenden Sie den Build Analyzer von Vite (für vite-basierte VUE-Apps)

Wenn Sie VITE verwenden, funktioniert Vue CLI -Tools nicht. Verwenden Sie stattdessen:

rollup-plugin-visualizer

• Installieren:

   NPM Install-Save-Dev Rollup-Plugin-Visualizer

• Hinzufügen zu vite.config.js :

   importieren {definconfig} aus 'vite';
  import Vue aus '@vitejs/plugin-vue';
  import {visualizer} aus 'Rollup-Plugin-visualizer';
  
  Standard default DefinoConfig ({{
    Plugins: [
      vue (),
      Visualizer ({{
        offen: wahr,
        Dateiname: 'Bundle-report.html',
      }),
    ],
  });

• Bauen:

   NPM Run Build

• Öffnen Sie bundle-report.html um eine detaillierte Treemap Ihrer Stücke zu sehen.

4. Überprüfen Sie GZIPPED vs. Rohgrößen

Der Bündelanalysator zeigt Rohdateigrößen, aber was am wichtigsten ist, ist eine komprimierte (GZIP-) Größe , da die Benutzer dies herunterladen.

• Verwenden Sie Tools wie:
  • Source-MAP-Explorer (unterstützt die GZIP-Analyse)
  • Oder manuell überprüfen:

     NPX Source-MAP-Explorer Dist/JS/Chunk-Vendors.*. JS

• Es erzeugt eine visuelle Karte und zeigt Größen nach GZIP -Simulation an.

5. Überwachen Sie wichtige Metriken

Konzentrieren Sie sich bei der Analyse auf:

• Lieferantenpaketgröße (z. B. Node_Modules): Wird es von einer großen Bibliothek dominiert?
• Ihr App -Code : Importieren Komponenten große Pakete unnötig?
• Doppelte Pakete : Manchmal sind mehrere Versionen derselben LIB enthalten.
• Lazy beladene Stücke : Stellen Sie sicher, dass Routen/Komponenten mit defineAsyncComponent oder dynamischen Importen ordnungsgemäß codesplit sind.

Beispiel des dynamischen Imports:

 const productPage = () => import ('./ views/productPage.vue');

6. Legen Sie Budgets in vue.config.js fest (optional)

Sie können Größengrenzen durchsetzen:

 module.exports = {
  configureWebpack: {
    Leistung: {
      Hinweise: 'Warnung',
      MaxentryPointsize: 512000, // 500 KB
      MaxassetSize: 300000, // 300 KB
    },
  },
};

Webpack warnt oder fehlschlägt den Build, wenn Vermögenswerte diese überschreiten.

Verwenden Sie im Grunde genommen visuelle Werkzeuge, um zu sehen, was sich in Ihrem Bündel befindet, sich auf die Gzip -Größe konzentrieren und große Abhängigkeiten optimieren . Eine regelmäßige Analyse hilft, früh aufzublähen.

Das obige ist der detaillierte Inhalt vonWie analysiere ich die Bündelgröße einer Vue -Anwendung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!