一個巧妙的算法， 給冗長的類名瘦身。
這個算法出自 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，你我遇見便是最大的緣分~~
