一个巧妙的算法, 给冗长的类名瘦身。
这个算法出自 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,字符串长度会不断增长。
打印一个运算结果
![](https://i-blog.csdnimg.cn/blog_migrate/d41373d5d237ba9ea021454f9489c664.png)
文章不长,代码是精华,哈哈!!!
如果你觉得文章不错,请点上一个赞????,如果你有疑惑,可以在评论区提问,创作不易,您的点赞和评论是对我最大的鼓励~~
欢迎关注公众号 云影sky,你我遇见便是最大的缘分~~
![](https://i-blog.csdnimg.cn/blog_migrate/65e9e3b377dd96082f01d5b5185eea50.png)