涓€涓仾鏄庣殑绠楁硶鏉ュ噺灏戝啑闀跨殑绫诲悕銆傝绠楁硶鏉ヨ嚜react-window鐨刣emo椤甸潰銆傜涓€娆＄湅鍒癿edium浣跨敤杩欑鏁堟灉锛屾垜灏濊瘯鑷繁缂栧啓绠楁硶锛屼絾鏈€缁堟€ц兘宸紓宸ㄥぇ銆傚師鐞嗗畠鐨勫師鐞嗘槸涓篶ss-loader鐨刧etLocalIdent鎻愪緵涓€涓嚜瀹氫箟鍑芥暟銆傛彁渚沜ss-loader鐨刴odules.getLocalIdent:{loader:require.resolve("css-loader"),options:{//...,modules:{getLocalIdent:getLocalIdent,},},},getLocalIdent浠ｇ爜濡備笅://缂栧啓webpackloader鏃剁殑杈呭姪鍑芥暟constloaderUtils=require("loader-utils");//绾瓧姣峜onstallowedCharactersFirst="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";//瀛楁瘝銆佹暟瀛椼€佺牬鎶樺彿銆佷笅鍒掔嚎constallowedCharactersAfter=012394+Characters"012394allowed+Characters_";//琚拷鐣ョ殑绫籧onstblacklist=[/^ad$/];//浣跨敤Map瀛樺偍鎵€鏈夌敓鎴愮殑閿€煎constidents=newMap();//indexes鏄竴涓暟瀛楁暟缁?/绗竴涓暟瀛楀搴攁llowedCharactersFirst涓殑瀛楁瘝锛坈ss绫荤殑绗竴涓瓧绗︿笉鑳芥槸鏁板瓧锛屾墍浠ュ彧浠庡瓧姣嶅瓧绗︿覆涓彇锛?/鍚庨潰鐨勬暟瀛楁槸浠巃llowedCharactersAfter涓搴旂殑浣嶇疆鍙栫殑锛岃寖鍥磑fnumbers鏄?-63锛屾濂藉搴斿瓧绗︿覆鐨勮寖鍥?/姣斿[3,14,61]=>do8letindexes=[0];constgetNextIdent=(key)=>{//浠庡湴鍥句腑鑾峰彇宸蹭娇鐢ㄧ殑鏍囪瘑constusedIdents=Array.鏉ヨ嚜锛坕dents.values锛堬級锛夛紱璁╄韩浠?鈥溾€濓紱do{ident=indexes.map((i,arrIndex)=>{//闄愬埗allowedCharactersFirst鐨勭储寮曞埌瀹冪殑鏈€澶х储寮曘€?/娉ㄦ剰锛氶€夋嫨鍣ㄧ殑绗竴浣嶄笉鑳芥槸鏁板瓧锛屾墍浠ヤ粠allowedCharactersFirst涓€夋嫨涓€涓瓧绗onstmaxIndexFirst=Math.min(i,allowedCharactersFirst.length-1);杩斿洖arrIndex===0锛?/濡傛灉鏄涓€涓猘llowedCharactersFirst[maxIndexFirst]://濡傛灉涓嶆槸绗竴涓紝浣跨敤allowedCharactersAfterallowedCharactersAfter[i];})//灏嗛€変腑鐨勫瓧绗︽嫾鎺ユ垚瀛楃涓层€傚姞鍏ワ紙鈥濃€濓級;璁╂垜=绱㈠紩銆傞暱搴︼紱//浠嶪ndexes寮€濮嬪悜鍓嶆壂鎻弚hile(i--){//add1indexes[i]+=1;//濡傛灉indexes[i]瓒呭嚭allowedCharactersAfter鐨勮寖鍥?/閭ｄ箞鏈€鍚庝竴涓綅缃槸0锛屽墠涓€涓槸+1if(indexes[i]===allowedCharactersAfter.length){//indexes[i]鏄缃负0indexes[i]=0;//濡傛灉棣栦綅涓?锛屽垯鍦ㄦ湯灏惧姞涓€涓?锛屽嵆瀛楃涓查暱搴﹀姞1if(i===0)indexes.push(0);鍚﹀垯涓柇锛泒}while(//濡傛灉宸茬粡鐢熻繃锛屽垯璺宠繃usedIdents.includes(ident)||//鍙婊¤冻ident.match(regex)涓簍rue锛宎rray.some灏变細杩斿洖trueblacklist.some((regex)=>ident.match(regex)));//鐢熸垚鐨勫瘑閽?value瀵瑰瓨鍌ㄥ湪Map缁撴瀯涓璱dents.set(key,ident);//杩斿洖鏂扮敓鎴愮殑identreturnident;};module.exports=functiongetLocalIdent(context,//[hash:base64]localIdentName,//container=>鍐欏湪css鏂囦欢涓殑绫诲悕localName,options){//鍒涘缓ahash鍩轰簬鏂囦欢璺緞鍜岀被鍚嶏紝鍦ㄦ暣涓」鐩腑鏄敮涓€鐨?/hash鏄竴涓?浣嶆暟鐨勫瓧绗︿覆consthash=loaderUtils.getHashDigest(///.../Home.module.css+classnamecontext.resourcePath+localName,//hashType"md5",//digestType"base64",//鐢熸垚鐨勫瓧绗︿覆闀垮害涓?5);//identities.getif鑾峰彇涓嶅埌锛屼娇鐢ㄧ畻娉曠敓鎴愯繑鍥瀒dentities.get(hash)||getNextIdent(鏁ｅ垪);};璇ョ畻娉曚富瑕佸彇鍐充簬鎸囨爣銆傚垵濮嬬姸鎬佷笅锛孾0]琛ㄧずa锛岀粡杩囦竴杞悗鍙樹负[51]琛ㄧずZ锛屾帴涓嬫潵灏唅ndex缃?锛屽帇鍏0锛屽嵆[0,0]锛岃〃绀篴a.闅忕潃鍚庨潰涓嶆柇鍙杋dent锛屽瓧绗︿覆鐨勯暱搴︿細涓嶆柇澧炲姞锛屾墦鍗颁竴涓绠楃粨鏋溿€傚鏋滆寰楁枃绔犱笉閿欙紝璇风偣涓禐馃憤锛屾湁鐤戦棶鍙互鍦ㄨ瘎璁哄尯鎻愰棶锛屽垱浣滀笉鏄擄紝浣犱滑鐨勭偣璧炲拰璇勮鏄鎴戞渶澶х殑榧撳姳~~娆㈣繋鍏虫敞鍏紬鍙蜂簯褰卞ぉ绌猴紝閬囪缂樺垎浣犳垜鏈€浼熷ぇ~~
