怎么統(tǒng)計Webpack組件的使用次數(shù)？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

創(chuàng)新互聯(lián)專注于廣陵企業(yè)網(wǎng)站建設,響應式網(wǎng)站,成都商城網(wǎng)站開發(fā)。廣陵網(wǎng)站建設公司,為廣陵等地區(qū)提供建站服務。全流程定制網(wǎng)站，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

用的 @material-ui，下面是組件使用情況

實現(xiàn)

我們知道 loader 的 source是文件的靜態(tài)字符串如下圖

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

分析 AST

我這邊是通過 @babel/parser 來分析的，我們先看下面這段代碼在網(wǎng)站上的構(gòu)成

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

我們可以看出路徑  program => body ，然后聲明類型是 type: ImportDeclaration,繼續(xù)看如下構(gòu)成

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

我們發(fā)下這個字段里面的 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 節(jié)點類型，這里我們?nèi)ミ^濾 import 聲明類型 同時去過濾
  (i) => i.type === getImport && i.source.value.includes(getMaterialImport),
);

拿到相關的 ast 數(shù)組下一步就要去拿到組件名字了, 通過觀察我們發(fā)現(xiàn) specifiers 標識符這個字段里面有兩個字段包含組件名：imported、local

 

• imported 表示從導出模塊導出的變量

• local 表示導入后當前模塊的變量

這里我取的 local， 因為下面這種方式并不會出現(xiàn) imported  這個字段

import Autocomplete from '@material-ui/lab/Autocomplete';

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

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, {
      sourceType: 'module',
      plugins: ['jsx'],
    });
    if (ast) {
      setTimeout(() => {
        const getImport = 'ImportDeclaration';
        const getMaterialImport = packageName;
        const importAst = ast.program.body.filter(
          // type 節(jié)點類型，這里我們?nèi)ミ^濾 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);
  }
};

調(diào)用 loader

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

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)網(wǎng)站建設公司，的支持。

網(wǎng)頁名稱：怎么統(tǒng)計Webpack組件的使用次數(shù)-創(chuàng)新互聯(lián)
文章起源：http://jinyejixie.com/article32/jegpc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、小程序開發(fā)、品牌網(wǎng)站制作、定制網(wǎng)站、搜索引擎優(yōu)化、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)