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

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

"ソース"： {
     "タイプ": "文字列リテラル",
     "値": "@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)、
);

'@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',
      },
    },
  ]、
},