經過一個算法來簡化你的 css

一個巧妙的算法， 給冗長的類名瘦身。

這個算法出自 react-window 的 demo 頁面。最先看到 medium 在使用這個效果，本身嘗試過寫算法，然而以性能巨差了結。

原理

它的原理是對 css-loader 的 getLocalIdent 提供一個定製的函數。提供 css-loader 的 modules.getLocalIdent ：

{
  loader: require.resolve("css-loader"),
  options: {
    // ...,
    modules: {
      getLocalIdent: getLocalIdent,
    },
  },
},

getLocalIdent 代碼以下：

// webpack loader 編寫時的輔助函數
const loaderUtils = require("loader-utils");

// 純字母
const allowedCharactersFirst =
  "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
// 字母、數字、中劃線、下劃線
const allowedCharactersAfter = allowedCharactersFirst + "0123456789-_";

// 忽略的 class
const blacklist = [/^ad$/];
// 用 Map 來存全部生成過的  key-value 對
const idents = new Map();

// indexes 是一個數字數組
// 第一個數字對應 allowedCharactersFirst 中的字母（css 類的首字符不能是數字，因此只從字母字符串中取）
// 後面的數字是從 allowedCharactersAfter 中對應的位置取，數字的範圍是 0-63，恰好對應字符串的範圍
// 好比 [ 3, 14, 61 ] => d o 8
let indexes = [0];

const getNextIdent = (key) => {
  // 從 map 中取到使用過的 idents
  const usedIdents = Array.from(idents.values());
  let ident = "";

  do {
    ident = indexes
      .map((i, arrIndex) => {
        // Limit the index for allowedCharactersFirst to it's maximum index.
        // 要注意：選擇器首位不能爲數字，因此從 allowedCharactersFirst 中選擇一個字符
        const maxIndexFirst = Math.min(i, allowedCharactersFirst.length - 1);

        return arrIndex === 0
          ? // 若是是首位
            allowedCharactersFirst[maxIndexFirst]
          : // 若是不是首位，則使用 allowedCharactersAfter
            allowedCharactersAfter[i];
      })
      // 選出來的字符拼接成字符串
      .join("");

    let i = indexes.length;
    // 從 indexes 最後開始往前掃描
    while (i--) {
      // 加 1
      indexes[i] += 1;
      // 若是 indexes[i] 對 allowedCharactersAfter 越界了
      // 則最後一位置 0，前一位 +1
      if (indexes[i] === allowedCharactersAfter.length) {
        // indexes[i] 置 0
        indexes[i] = 0;
        // 若是恰好首位是0，則在最後增長一個0，表示字符串長度加 1
        if (i === 0) indexes.push(0);
      } else break;
    }
  } while (
    // 若是已經生過了則跳過
    usedIdents.includes(ident) ||
    // 只要符合 ident.match(regex) 爲 true，則 array.some 就返回 true
    blacklist.some((regex) => ident.match(regex))
  );
  // 生成的 key-value 對存儲到 Map 結構中
  idents.set(key, ident);
  // 返回新生成的 ident
  return ident;
};

module.exports = function getLocalIdent(
  context,
  // [hash:base64]
  localIdentName,
  // container => css 文件中寫的 class name
  localName,
  options
) {
  // 基於文件路徑和類名建立 hash，在整個項目中是惟一的
  // hash 是 5 位字符串
  const hash = loaderUtils.getHashDigest(
    // /.../Home.module.css + 類名
    context.resourcePath + localName,
    // hashType
    "md5",
    // digestType
    "base64",
    // 生成的字符串長度爲 5
    5
  );

  // idents.get 若是獲取不到，則使用算法生成
  return idents.get(hash) || getNextIdent(hash);
};

算法主要看 indexes，初始狀態下是 [0] 表示 a，通過一輪以後變成 [51] 表示 Z，接下來，indexes 會置 0 並 push 一個 0，即 [0, 0]，這樣就表示 aa 了，隨着後面不斷取 ident，字符串長度會不斷增加。

打印一個運算結果

---

若是你以爲文章不錯，請點上一個贊👍，若是你有疑惑，能夠在評論區提問，創做不易，您的點贊和評論是對我最大的鼓勵~~

歡迎關注公衆號 雲影sky，你我碰見即是最大的緣分~~