Webpack コンポーネントの使用状況統計を実装するための 50 行のコード

Webpack コンポーネントの使用状況統計を実装するための 50 行のコード

背景

最近、リーダーからコンポーネント ライブラリを構築するように依頼があり、プロジェクトで現在使用されているサードパーティ コンポーネント ライブラリのどのコンポーネントが最も頻繁に使用されているかを知りたいと思いました。最初は友達に相談したかったのですが、友達が忙しすぎて自分でやらなければなりませんでした。私のアイデアを実現するために webpack を使用できるかどうか疑問に思います。

効果

@material-uiを使用します。使用するコンポーネントは次のとおりです。

成し遂げる

ローダーのソースは、以下に示すようにファイルの静的文字列であることがわかっています。

最も速い解決策は、正規表現を使用して文字列をカウントすることですが、コメントがある場合は統計が不正確になります。そのため、これを実現するために AST を使用できます。多くの専門家がすでに AST の概念について説明しているので、詳細には触れません。

AST の分析

解析には@babel/parserを使用します。まずはウェブサイト上の次のコードを見てみましょう。

'@material-ui/core' から { Box } をインポートします。
'@material-ui/lab/Autocomplete' から Autocomplete をインポートします。

パスはprogram => bodyで、宣言型はtype: ImportDeclarationであることがわかります。次の構造を見てみましょう。

"ソース": {
     "タイプ": "文字列リテラル",
     "値": "@material-ui/core"
 },
 // 2番目の段落 "source": {
      タイプ": "文字列リテラル",
     "値": "@material-ui/lab/オートコンプリート"
 },

このフィールドには必要なパッケージ名の値を送信するので、最初のコードは

const ast = parser.parse(ソース、{
      ソースタイプ: 'モジュール',
      プラグイン: ['jsx'],
 });
const getImport = 'ImportDeclaration';
const getMaterialImport = packageName || '@material-ui';
const importAst = ast.program.body.filter(
  // type ノード タイプ。ここではインポート宣言タイプをフィルタリングし、同時にフィルタリングします (i) => i.type === getImport && i.source.value.includes(getMaterialImport)、
);

関連するast配列を取得したら、次のステップはコンポーネント名を取得することです。観察すると、指定子識別子フィールドにコンポーネント名を含む2つのフィールドがあることがわかります。インポート、ローカル

  • インポートとは、エクスポートモジュールからエクスポートされた変数を意味します。
  • ローカルはインポート後の現在のモジュールの変数を表します

ここでは、インポートされたフィールドが次のメソッドに表示されないため、local を使用します。

'@material-ui/lab/Autocomplete' から Autocomplete をインポートします。

パッケージ名がわかったので、要点を押さえて完全なコードを投稿するのは簡単になります。

デモ

const パーサー = require('@babel/parser');
定数 loaderUtils = require('loader-utils');
定数合計 = {
  長さ: 0,
  コンポーネント: {},
};
// オブジェクトのソート const sortable = (obj) => Object.fromEntries(Object.entries(obj).sort(([, a], [, b]) => b - a));
module.exports = function(ソース) {
  console.log(ソース、'--');
  const オプション = loaderUtils.getOptions(this);
  const { packageName = '' } = オプション;
  定数コールバック = this.async();
  if (!packageName) は callback(null, source); を返します。
  試す {
    // ast に解析する
    const ast = parser.parse(ソース、{
      ソースタイプ: 'モジュール',
      プラグイン: ['jsx'],
    });
    もし(ast){
      タイムアウトを設定する(() => {
        const getImport = 'ImportDeclaration';
        const getMaterialImport = パッケージ名;
        const importAst = ast.program.body.filter(
          // type ノード タイプ。ここではインポート宣言タイプをフィルタリングし、同時にフィルタリングします (i) => i.type === getImport && i.source.value.includes(getMaterialImport)、
        );
        合計の長さ = 合計の長さ + importAst.length;
        for (let i of importAst) {
          const { 指定子 = [] } = i;
          for (指定子のlet s) {
            (s.local)の場合{
              const {名前} = s.local;
              total.components[名前] = total.components[名前] ? total.components[名前] + 1 : 1;
            }
          }
        }
        合計コンポーネント = ソート可能(合計コンポーネント);
        console.log(合計、'合計');
        コールバック(null、ソース);
      }, 0);
    } そうでない場合はコールバック(null、ソース);
  } キャッチ(エラー){
    コールバック(null、ソース);
  }
};

ローダーを呼び出す

 {
  テスト: /\.(jsx|)$/,
  除外: /node_modules/、
  インクルード: [appConfig.eslintEntry],
  使用: [
    {
      ローダー: path.resolve(__dirname, './loader/total.js'),
      オプション:
        パッケージ名: '@material-ui',
      },
    },
  ]、
},

簡単な統計関数が完成しました。もちろん、他にももっと良い方法があるかもしれません。私はただこのアイデアを提案しただけです。議論を歓迎します

やっと

これを行うことの重要性は何でしょうか? たとえば、独自のコンポーネント ライブラリがオンラインになった後、コンポーネント参照の数をカウントし、週などの特定の時間ディメンションを使用できます。データを使用して、コンポーネント ライブラリの次のバージョンの最適化の方向性を分析できます。また、KPI レポート ツールとして使用することもできます。結局のところ、それはデータによってサポートされています。

これで、50行のコードでWebpackコンポーネントを使用する方法についての記事は終了です。Webpackコンポーネントの使用統計の詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Electron-vueはwebpackを使用して複数ページのエントリファイルをパッケージ化します
  • webpackコード断片化の実装
  • Webpack プロジェクトでローダー プラグインをデバッグする方法
  • Webpackプラグインを書いてnpmに公開するための80行のコード
  • Webpackを使用して複数ページのプログラムを構築するための実装手順
  • webpack -v エラー解決

<<:  CentOS のクローン作成、Linux 仮想マシンの共有の完全な手順

>>:  MySQL 5.7.18 リリース インストール ガイド (bin ファイル バージョンを含む)

推薦する

初心者がHTMLタグを学ぶ(2)

関連記事:初心者が学ぶ HTML タグ (1)初心者は、いくつかの HTML タグを理解することで ...

MySQL 5.7.18 Green Edition のダウンロードとインストールのチュートリアル

この記事では、MySQL 5.7.18のグリーンバージョンをダウンロードしてインストールする詳細な手...

MySQLは集計関数を使用して単一のテーブルをクエリします

集計関数データセットに作用し、そのデータセットの値を返します。 count: 統計結果のレコード数。...

テキストまたはJSONを返すようにnginxを設定する方法

特定のインターフェースをリクエストするときに、指定されたテキスト文字列または JSON 文字列を返す...

Kubernetes (k8s) 入門

Kubernetes は面白そうだったので(ギリシャ人なら名前に問題があると思うでしょうが)、ずっと...

新しい Linux ファイル権限設定における umask の詳細な理解

序文起源は質問 1 です: umask が 022 に設定されている場合、作成するファイルのデフォル...

JS を使用してファイルを操作する (FileReader は --node の fs を読み取ります)

目次JS はファイルを読み取る FileReader書類イベントとメソッド基本的な使い方イベント処理...

テーブルの4辺を上下左右にスクロールするように固定する方法

質問:最近、プロジェクトの統計を行っていたときに、テーブルを上下にスクロールしたときにテーブルの先頭...

React dva実装コード

目次ドヴァdvaの使用DVAの実装非同期をサポートルーターの実装成し遂げる:ドヴァdva は、red...

要素の円弧モーションを実現する CSS3 サンプルコード

CSS を使用して要素の円弧の動きを制御する方法CSS3 の新しい属性 transfrom トランジ...

3つの主要データベース(Mysql、SqlServer、Oracle)の違いについて簡単に説明します。

マイグレーションアドバンテージ:小型、高速、総所有コストが低い、オープンソース。複数のオペレーティン...

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル

最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...

Dockerコンテナでユーザーを分離する方法

前回の記事「Docker コンテナの UID と GID を理解する」では、Docker コンテナ内...

ウェブページ上の小さなスペースに大きな画像を配置する方法

出典: www.bamagazine.comウェブページのバナー、ニュースの見出しの周りのスペース、...

TS 数値区切り文字とより厳密なクラス属性チェックの詳細な説明

目次概要演算子の改良と正確なinstanceofよりスマートなオブジェクトリテラル推論固有のシンボル...