50 Codezeilen zur Implementierung von Nutzungsstatistiken für Webpack-Komponenten

Hintergrund

Kürzlich wollte ein Leiter, dass wir eine Komponentenbibliothek erstellen, und dann wollte ich wissen, welche Komponenten der aktuell im Projekt verwendeten Komponentenbibliothek von Drittanbietern am häufigsten verwendet werden. Ursprünglich wollte ich meinen Freund um Rat fragen, aber er war zu beschäftigt, also musste ich es selbst tun. Ich frage mich, ob ich Webpack verwenden kann, um meine Idee zu verwirklichen.

Wirkung

Wir verwenden @material-ui, hier sind die verwendeten Komponenten

erreichen

Wir wissen, dass die Quelle des Loaders eine statische Zeichenfolge der Datei ist, wie unten gezeigt

Die schnellste Lösung besteht darin, reguläre Ausdrücke zum Zählen von Zeichenfolgen zu verwenden. Dies führt jedoch zu ungenauen Statistiken, wenn Kommentare vorhanden sind. Daher können wir AST verwenden, um dies zu erreichen. Viele Experten haben bereits über das Konzept von AST gesprochen, daher werde ich nicht ins Detail gehen.

AST analysieren

Ich verwende @babel/parser zur Analyse. Schauen wir uns zunächst den folgenden Code auf der Website an.

importiere { Box } aus '@material-ui/core';
Importiere Autocomplete aus „@material-ui/lab/Autocomplete“;

Wir können sehen, dass der Pfad Programm => Body ist und der Deklarationstyp Typ: ImportDeclaration ist. Schauen wir uns weiter die folgende Struktur an

"Quelle": {
     "Typ": "StringLiteral",
     "Wert": "@material-ui/core"
 },
 // Der zweite Absatz "Quelle": {
      Typ": "StringLiteral",
     "Wert": "@material-ui/lab/Autocomplete"
 },

Wir senden den Wert in diesem Feld mit dem gewünschten Paketnamen, sodass der erste Code lautet

const ast = parser.parse(Quelle, {
      Quelltyp: "Modul",
      Plugins: ['jsx'],
 });
const getImport = "ImportDeclaration";
const getMaterialImport = Paketname || '@material-ui';
const importAst = ast.program.body.filter(
  // Typ Knotentyp, hier filtern wir den Importdeklarationstyp und filtern gleichzeitig (i) => i.type === getImport && i.source.value.includes(getMaterialImport),
);

Nachdem wir das relevante AST-Array erhalten haben, besteht der nächste Schritt darin, den Komponentennamen zu erhalten. Durch Beobachtung stellen wir fest, dass es im Feld „Specifiers Identifier“ zwei Felder gibt, die Komponentennamen enthalten: importiert, lokal

• importiert bedeutet Variablen, die aus dem Exportmodul exportiert wurden
• local stellt die Variablen des aktuellen Moduls nach dem Import dar

Hier verwende ich „lokal“, da das importierte Feld in der folgenden Methode nicht angezeigt wird.

Importiere Autocomplete aus „@material-ui/lab/Autocomplete“;

Da wir nun den Paketnamen haben, können wir leicht auf den Punkt kommen und den vollständigen Code veröffentlichen.

Demo

const parser = erfordern('@babel/parser');
const loaderUtils = erfordern('loader-utils');
Konstante Gesamtsumme = {
  Länge: 0,
  Komponenten: {},
};
// Objektsortierung const sortable = (obj) => Object.fromEntries(Object.entries(obj).sort(([, a], [, b]) => b - a));
module.exports = Funktion(Quelle) {
  console.log(Quelle, '--');
  const Optionen = loaderUtils.getOptions(diese);
  const { Paketname = '' } = Optionen;
  const Rückruf = this.async();
  wenn (!Paketname) returniere Rückruf(null, Quelle);
  versuchen {
    // In ast analysieren
    const ast = parser.parse(Quelle, {
      Quelltyp: "Modul",
      Plugins: ['jsx'],
    });
    wenn (ast) {
      setzeTimeout(() => {
        const getImport = "ImportDeclaration";
        const getMaterialImport = Paketname;
        const importAst = ast.program.body.filter(
          // Typ Knotentyp, hier filtern wir den Importdeklarationstyp und filtern gleichzeitig (i) => i.type === getImport && i.source.value.includes(getMaterialImport),
        );
        Gesamtlänge = Gesamtlänge + importAst.Länge;
        für (sei i von importAst) {
          const { Spezifizierer = [] } = i;
          für (lass uns Spezifizierer sein) {
            wenn (s.local) {
              const { name } = s.local;
              Gesamtkomponenten[Name] = Gesamtkomponenten[Name] ? Gesamtkomponenten[Name] + 1 : 1;
            }
          }
        }
        Gesamtkomponenten = sortierbar (Gesamtkomponenten);
        console.log(gesamt, "gesamt");
        Rückruf (null, Quelle);
      }, 0);
    } sonst Rückruf(null, Quelle);
  } Fehler abfangen {
    Rückruf (null, Quelle);
  }
};

Aufruf des Loaders

 {
  Test: /\.(jsx|)$/,
  ausschließen: /node_modules/,
  include: [appConfig.eslintEntry],
  verwenden: [
    {
      loader: Pfad.auflösen(__dirname, './loader/total.js'),
      Optionen:
        Paketname: '@material-ui',
      },
    },
  ],
},

Eine einfache statistische Funktion ist abgeschlossen. Natürlich kann es auch bessere Möglichkeiten geben. Ich stelle nur diese Idee zur Verfügung. Willkommen zur Diskussion

endlich

Welche Bedeutung hat dies? Wenn beispielsweise unsere eigene Komponentenbibliothek online geht, können wir die Anzahl der Komponentenreferenzen zählen und eine bestimmte Zeitdimension verwenden, beispielsweise Wochen. Wir können Daten verwenden, um die Optimierungsrichtung der nächsten Version unserer Komponentenbibliothek zu analysieren, und wir können sie auch als KPI-Berichtstool verwenden. Schließlich wird es durch Daten unterstützt.

Damit ist der Artikel zur Verwendung von Webpack-Komponenten in 50 Codezeilen abgeschlossen. Weitere Informationen zu Nutzungsstatistiken für Webpack-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!