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 ファイル バージョンを含む)

推薦する

Tomcat が応答データグラムを書き戻すタイミングの詳細な分析

疑問が生じるこの質問は、ファイルのダウンロードを記述しているときに発生しました。HttpServle...

Vue+tsx のスロット使用の問題が置き換えられない

目次序文問題を見つける解決する追記序文最近、 UIコンポーネントを作成する予定で、 vue 2.xと...

ウェブページヘッダーの最適化の提案

ロゴの最適化: 1.ロゴ画像はできるだけ小さくしてください。 2. 一般的には背景として配置されます...

Mysql マスタースレーブ サービスの実装例を構成する

Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...

Centos8.2 クラウド サーバー環境に Tomcat8.5 をインストールするための詳細なチュートリアル

Tomcatをインストールする前に、まずJDK環境をインストールしてくださいLinux サーバー上で...

CentOS7 環境で gcc (バージョン 10.2.0) をアップグレードする詳細な手順

目次簡単な紹介1. 現在のgccバージョンを確認する2. gccインストールパッケージ(バージョン1...

Vue.set() と this.$set() の使い方と違い

開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...

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

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

CSS3 を使用してピカチュウのアニメーション壁紙を作成する例

文章さて、次はレンダリングを見せましょう。画像を見て初めて理解することに興味が湧くでしょう。そうでな...

MySQL グローバルロックとテーブルレベルロックの具体的な使用法

目次序文グローバルロックテーブルロックテーブルロックメタデータ ロック (MDL ロック)要約する参...

uni-app WeChatアプレット認証ログイン実装手順

目次1. appIDの申請と設定1. appidの取得方法2. AppIDの設定2. 基本的なユーザ...

Docker コンテナのネットワーク障害に対する 6 つの解決策

Docker コンテナのネットワーク障害に対する 6 つの解決策注: 以下の方法は、コンテナ内のパブ...

Tomcat を使用して IntelliJ IDEA によってデプロイされたプロジェクトの場所はどこですか?

IntelliJ IDEA が Tomcat を使用して Javaweb プロジェクトをデプロイし...

Docker で複数のアプリケーション サイトをプロキシするために Nginx を使用する方法

序文エージェントの役割は何ですか? - 複数のドメイン名が同じサーバーに解決される- 1つのサーバー...