背景

最近有個領導想讓我們搭元件庫，然後我就想知道目前專案中使用的三方元件庫哪些元件使用頻率最高。本來想去諮詢小夥伴，但是小夥伴太忙了，只能自己弄了。我就想能不能通過 webpack 來實現我的想法

效果

我們是用的 @material-ui，下面是元件使用情況

實現

我們知道 loader 的 source是檔案的靜態字串如下圖

最快的方案通過字串統計用正則的方式一把梭，但是這樣會有問題就是如果註釋部分有的話也會被統計進去就不準確，所以我們可以通過 AST 的方式來實現，關於 ast 的概念有很多大佬都講過了我就不囉嗦了

分析 AST

我這邊是通過 @babel/parser 來分析的，我們先看下面這段程式碼在

import { Box } from '@material-ui/core';
import Autocomplete from '@material-ui/lab/Autocomplete';

我們可以看出路徑 program => body ，然後宣告型別是 type: ImportDeclaration,繼續看如下構成

"source": {
     "type": "StringLiteral","value": "@material-ui/core"
 },// 第二段
 "source": {
      type": "StringLiteral","value": "@material-ui/lab/Autocomplete"
 },

我們發下這個欄位裡面的程式設計客棧 value 有我們想要的包名所以第一段程式碼就是

const ast = parser.parse(source,{
      sourceType: 'module',plugins: ['jsx'],});
const getImport = 'ImportDeclaration';
const getMaterialImport = packageName || '@material-ui';
const importAst = ast.program.body.filter(
  // type 節點型別，這裡我們去過濾 import 宣告型別 同時去過濾
  (i) => i.type === getImport && i.source.value.includes(getMaterialImport),);

拿到相關的 ast 陣列下一步就要去拿到元件名字了,通過觀察我們發現 specifiers 識別符號這個欄位裡面有兩個欄位包含元件名：imported、local

• imported 表示從匯出模組匯出的變數
• local 表示匯入後當前模組http://www.cppcns.com的變數

這裡我取的 local， www.cppcns.com因為下面這種方式並不會出現 imported 這個欄位

import Autocomplete from '@material-ui/lab/Au程式設計客棧tocomplete';

這個時候包的名字也拿到了後面就簡單了直奔主題貼完整程式碼了

demo

const parser = require('@babel/parser');
const loaderUtils = require('loader-utils');
const total = {
  len: 0,components: {},};
// 物件排序
const sortable = (obj) => Object.fromEntries(Object.entries(obj).sort(([,a],[,b]) => b - a));
module.exports = function(source) {
  console.log(source,'--');
  const options = loaderUtils.getOptions(this);
  const { packageName = '' } = options;
  const callback = this.async();
  if (!packageName) return callback(null,source);
  try {
    // 解析成 ast
    const ast = parser.parse(source,plugins: ['jsx'],});
    if (ast) {
      setTimeout(() => {
        const getImport = 'ImportDeclaration';
        const getMaterialImport = packageName;
        const importAst = ast.program.body.filter(
          // type 節點型別，這裡我們去過濾 import 宣告型別 同時去過濾
          (i) => i.type === getImport && i.source.value.includes(getMaterialImport),);
        total.len = total.len + importAst.length;
        for (let i of importAst) {
          const { specifiers = [] } = i;
          for (let s of specifiers) {
            if (s.local) {
              const { name } = s.local;
              total.components[name] = total.components[name] ? total.components[name] + 1 : 1;
            }
          }
        }
        total.components = sortable(total.components);
        console.log(total,'total');
        callback(null,source);
      },0);
    } else callback(null,source);
  } catch (error) {
    callback(null,source);
  }
};

呼叫 loader

 {
  test: /\.(jsx|)$/,exclude: /node_modules/,include: [appConfig.eslintEntry],use: [
    {
      loader: path.resolve(__diAMloxYrname,'./loader/total.js'),options: {
        packageName: '@material-ui',},],

一個簡單的統計功能就完成了，當然可能還有其他更好的方式我只是提供這個想法，歡迎大家討論

最後

做這個的意義是什麼呢，比如是我們自己的元件庫上線以後可以統計元件引用次數，並且以某個時間為維度比如說周。通過資料來分析我們元件庫下個版本的優化方向，而且也可以做 kpi 彙報手段畢竟有資料支撐

到此這篇關於50行程式碼實現Webpack元件使用次數統計的文章就介紹到這了,更多相關Webpack元件次數統計內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！