perf: 优化 CSS 选择器转换、JS 处理器及 WXML 模板处理热路径的缓存与计算

Author: sonofmagic

.changeset/perf-hot-path-caching.md

@@ -0,0 +1,13 @@
+---
+"weapp-tailwindcss": patch
+"@weapp-tailwindcss/postcss": patch
+"@weapp-tailwindcss/shared": patch
+---
+
+性能优化：针对 CSS 选择器转换、JS 处理器、WXML 模板处理等热路径进行多项缓存与计算优化。
+
+- JS 处理器：复用 `resolveClassNameTransformWithResult` 返回的 `escapedValue` 避免重复 escape 计算；引入 `getReplacement` 缓存消除重复 `replaceWxml` 调用；移除 `escapeStringRegexp` + `new RegExp` 正则编译开销
+- `createJsHandler`：预构建默认 `defaults` 对象，无覆盖选项时跳过 `defuOverrideArray` 合并
+- WXML 模板：`templateReplacer` 支持复用模块级 tokenizer 实例；`createTemplateHandler` 预构建 attribute matcher 并传递给 `customTemplateHandler`
+- PostCSS fallback 选择器解析：为 `transform` 函数添加 selector 级别缓存，避免重复解析相同选择器
+- `splitCode`：为默认和 allowDoubleQuotes 两种模式分别添加结果缓存，预编译分割正则

packages/postcss/src/selectorParser/fallback.ts

@@ -7,6 +7,11 @@ import psp from 'postcss-selector-parser'
 import { isUniAppXEnabled, stripUnsupportedPseudoForUniAppX } from '../compat/uni-app-x'
 import { normalizeTransformOptions } from './utils'
 
+interface CachedFallbackResult {
+  action: 'keep' | 'update' | 'remove'
+  selector?: string
+}
+
 const fallbackRemoveCache = new WeakMap<object, {
   parser: ReturnType<typeof psp>
   transform: RuleTransformer
@@ -16,6 +21,7 @@ const FALLBACK_TRANSFORM_OPTIONS = normalizeTransformOptions()
 
 /**
  * 获取用于小程序兼容性处理的解析器，内部会缓存实例并移除不支持的选择器。
+ * 增加了选择器字符串级缓存，避免对相同选择器重复 parse。
  * @returns 带清理规则的解析器实例。
  */
 export function getFallbackRemove(_rule?: Rule, options?: IStyleHandlerOptions) {
@@ -25,6 +31,16 @@ export function getFallbackRemove(_rule?: Rule, options?: IStyleHandlerOptions)
   if (!entry) {
     const uniAppX = isUniAppXEnabled(options)
     let currentRule: Rule | undefined
+    // 选择器字符串级缓存，避免对相同选择器重复 parse + walk
+    const selectorCache = new Map<string, CachedFallbackResult>()
+    const selectorCacheLimit = 50000
+
+    function writeSelectorCache(selector: string, result: CachedFallbackResult) {
+      if (selectorCache.size >= selectorCacheLimit) {
+        selectorCache.clear()
+      }
+      selectorCache.set(selector, result)
+    }
 
     const parser = psp((selectors) => {
       const activeRule = currentRule
@@ -94,13 +110,42 @@ export function getFallbackRemove(_rule?: Rule, options?: IStyleHandlerOptions)
     const rawTransformSync = parser.transformSync.bind(parser)
 
     const transform: RuleTransformer = (targetRule: Rule) => {
+      const sourceSelector = targetRule.selector
+      if (!sourceSelector) {
+        return
+      }
+
+      // 查询选择器字符串级缓存
+      const cached = selectorCache.get(sourceSelector)
+      if (cached) {
+        if (cached.action === 'remove') {
+          targetRule.remove()
+        }
+        else if (cached.action === 'update' && cached.selector && cached.selector !== sourceSelector) {
+          targetRule.selector = cached.selector
+        }
+        return
+      }
+
       currentRule = targetRule
       try {
         rawTransformSync(targetRule, FALLBACK_TRANSFORM_OPTIONS)
       }
       finally {
         currentRule = undefined
       }
+
+      // 写入缓存
+      const wasRemoved = targetRule.parent == null
+      if (wasRemoved) {
+        writeSelectorCache(sourceSelector, { action: 'remove' })
+      }
+      else if (targetRule.selector === sourceSelector) {
+        writeSelectorCache(sourceSelector, { action: 'keep' })
+      }
+      else {
+        writeSelectorCache(sourceSelector, { action: 'update', selector: targetRule.selector })
+      }
     }
 
     parser.transformSync = ((input: unknown, opts?: ParserTransformOptions) => {

packages/shared/src/extractors/split.ts

@@ -8,15 +8,36 @@ export function isValidSelector(selector = ''): selector is string {
 
 // 可选实现：export const splitCode = (code: string) => [...new Set(code.split(/\\?[\s'"`;={}]+/g))].filter(isValidSelector)
 
+/**
+ * splitCode 结果缓存，避免对相同字符串重复分割和过滤。
+ * 使用两个独立缓存分别对应 allowDoubleQuotes 的两种取值。
+ */
+const splitCacheDefault = new Map<string, string[]>()
+const splitCacheAllowQuotes = new Map<string, string[]>()
+const SPLIT_CACHE_LIMIT = 8192
+
+/** 预编译的分割正则，避免每次调用都创建 */
+const SPLITTER_DEFAULT = /\s+|"/
+const SPLITTER_ALLOW_QUOTES = /\s+/
+
 export function splitCode(code: string, allowDoubleQuotes = false) {
+  const cache = allowDoubleQuotes ? splitCacheAllowQuotes : splitCacheDefault
+  const cached = cache.get(code)
+  if (cached) {
+    return cached
+  }
+
   // 把压缩产物中的转义空白字符(\n \r \t)先还原成空格，避免被粘连到类名上
   const normalized = code.includes('\\') ? code.replace(/\\[nrt]/g, ' ') : code
 
-  // 参数 onlyWhiteSpace?: boolean
-  // const regex = onlyWhiteSpace ? /[\s]+/ : /"|[\s]+/
-  // 默认使用 /\s+/
-  // 用于处理 Vue 的静态节点
-  // 示例：|class="
-  const splitter = allowDoubleQuotes ? /\s+/ : /\s+|"/
-  return normalized.split(splitter).filter(element => isValidSelector(element))
+  const splitter = allowDoubleQuotes ? SPLITTER_ALLOW_QUOTES : SPLITTER_DEFAULT
+  const result = normalized.split(splitter).filter(element => isValidSelector(element))
+
+  // 防止缓存无限增长
+  if (cache.size >= SPLIT_CACHE_LIMIT) {
+    cache.clear()
+  }
+  cache.set(code, result)
+
+  return result
 }

packages/weapp-tailwindcss/src/js/handlers.ts

@@ -3,30 +3,19 @@ import type { StringLiteral, TemplateElement } from '@babel/types'
 import type { IJsHandlerOptions } from '../types'
 import type { JsToken } from './types'
 import { jsStringEscape } from '@ast-core/escape'
-import { escapeStringRegexp } from '@weapp-core/regex'
 import { splitCode } from '@weapp-tailwindcss/shared/extractors'
 import { createDebug } from '@/debug'
-import { resolveClassNameTransformDecision, shouldEnableArbitraryValueFallback } from '../shared/classname-transform'
+import { resolveClassNameTransformWithResult, shouldEnableArbitraryValueFallback } from '../shared/classname-transform'
 import { decodeUnicode2 } from '../utils/decode'
 import { replaceWxml } from '../wxml/shared'
 import { isClassContextLiteralPath } from './class-context'
 
 type EscapeMap = NonNullable<IJsHandlerOptions['escapeMap']>
 
 const debug = createDebug('[js:handlers] ')
-const patternCache = new Map<string, RegExp>()
 const replacementCacheByEscapeMap = new WeakMap<EscapeMap, Map<string, string>>()
 const defaultReplacementCache = new Map<string, string>()
 
-function getPattern(candidate: string) {
-  let cached = patternCache.get(candidate)
-  if (!cached) {
-    cached = new RegExp(escapeStringRegexp(candidate))
-    patternCache.set(candidate, cached)
-  }
-  return cached
-}
-
 function getReplacement(candidate: string, escapeMap?: EscapeMap) {
   if (!escapeMap) {
     let cached = defaultReplacementCache.get(candidate)
@@ -51,6 +40,23 @@ function getReplacement(candidate: string, escapeMap?: EscapeMap) {
   return cached
 }
 
+/**
+ * 将 replacement 写入对应的缓存，供后续 getReplacement 命中。
+ */
+function setReplacementCache(candidate: string, replacement: string, escapeMap?: EscapeMap) {
+  if (!escapeMap) {
+    defaultReplacementCache.set(candidate, replacement)
+  }
+  else {
+    let store = replacementCacheByEscapeMap.get(escapeMap)
+    if (!store) {
+      store = new Map<string, string>()
+      replacementCacheByEscapeMap.set(escapeMap, store)
+    }
+    store.set(candidate, replacement)
+  }
+}
+
 function hasIgnoreComment(node: StringLiteral | TemplateElement) {
   return Array.isArray(node.leadingComments)
     && node.leadingComments.some(comment => comment.value.includes('weapp-tw') && comment.value.includes('ignore'))
@@ -123,35 +129,43 @@ export function replaceHandleValue(
   const skippedSamples: string[] = []
 
   for (const candidate of candidates) {
-    const decision = resolveClassNameTransformDecision(candidate, {
+    const result = resolveClassNameTransformWithResult(candidate, {
       ...options,
       classContext,
     })
-    if (decision === 'skip') {
+    if (result.decision === 'skip') {
       if (skippedSamples.length < 6) {
         skippedSamples.push(candidate)
       }
       continue
     }
     matchedCandidateCount += 1
-    if (decision === 'escaped') {
+    if (result.decision === 'escaped') {
       escapedDecisionCount += 1
       if (escapedSamples.length < 6) {
         escapedSamples.push(candidate)
       }
     }
-    if (decision === 'fallback') {
+    if (result.decision === 'fallback') {
       fallbackDecisionCount += 1
     }
 
     if (!transformed.includes(candidate)) {
       continue
     }
 
-    const pattern = getPattern(candidate)
-    const replacement = getReplacement(candidate, escapeMap)
-    const replaced = transformed.replace(pattern, replacement)
+    // 复用 escapedValue 或走缓存的 getReplacement，避免重复 escape 计算
+    let replacement: string
+    if (result.decision === 'escaped' && result.escapedValue) {
+      replacement = result.escapedValue
+      setReplacementCache(candidate, replacement, escapeMap)
+    }
+    else {
+      replacement = getReplacement(candidate, escapeMap)
+    }
 
+    // 使用 String.replace 仅替换首次出现，与原始行为一致
+    const replaced = transformed.replace(candidate, replacement)
     if (replaced !== transformed) {
       transformed = replaced
       mutated = true

packages/weapp-tailwindcss/src/js/index.ts

@@ -7,50 +7,37 @@ export {
 }
 
 export function createJsHandler(options: CreateJsHandlerOptions): JsHandler {
-  // 保留不可变的默认选项，重复调用时仅传入本次的覆盖项。
-  const {
-    arbitraryValues,
-    escapeMap,
-    staleClassNameFallback,
-    jsArbitraryValueFallback,
-    tailwindcssMajorVersion,
-    jsPreserveClass,
-    generateMap,
-    needEscaped,
-    alwaysEscape,
-    unescapeUnicode,
-    babelParserOptions,
-    ignoreCallExpressionIdentifiers,
-    ignoreTaggedTemplateExpressionIdentifiers,
-    uniAppX,
-    moduleSpecifierReplacements,
-  } = options
+  // 预构建不可变的默认选项对象，避免每次调用都重新创建字面量。
+  const defaults: IJsHandlerOptions = {
+    escapeMap: options.escapeMap,
+    staleClassNameFallback: options.staleClassNameFallback,
+    jsArbitraryValueFallback: options.jsArbitraryValueFallback,
+    tailwindcssMajorVersion: options.tailwindcssMajorVersion,
+    arbitraryValues: options.arbitraryValues,
+    jsPreserveClass: options.jsPreserveClass,
+    generateMap: options.generateMap,
+    needEscaped: options.needEscaped,
+    alwaysEscape: options.alwaysEscape,
+    unescapeUnicode: options.unescapeUnicode,
+    babelParserOptions: options.babelParserOptions,
+    ignoreCallExpressionIdentifiers: options.ignoreCallExpressionIdentifiers,
+    ignoreTaggedTemplateExpressionIdentifiers: options.ignoreTaggedTemplateExpressionIdentifiers,
+    uniAppX: options.uniAppX,
+    moduleSpecifierReplacements: options.moduleSpecifierReplacements,
+  } as IJsHandlerOptions
 
   function handler(rawSource: string, classNameSet?: Set<string>, options?: CreateJsHandlerOptions) {
-    const overrideOptions = (options ?? {}) as IJsHandlerOptions
+    // 快路径：无覆盖选项时跳过 defuOverrideArray，直接合并 classNameSet
+    if (!options || Object.keys(options).length === 0) {
+      return jsHandler(rawSource, { ...defaults, classNameSet })
+    }
+
     const resolvedOptions = defuOverrideArray<IJsHandlerOptions, IJsHandlerOptions[]>(
       {
-        ...overrideOptions,
-        classNameSet,
-      },
-      {
+        ...(options as IJsHandlerOptions),
         classNameSet,
-        escapeMap,
-        staleClassNameFallback,
-        jsArbitraryValueFallback,
-        tailwindcssMajorVersion,
-        arbitraryValues,
-        jsPreserveClass,
-        generateMap,
-        needEscaped,
-        alwaysEscape,
-        unescapeUnicode,
-        babelParserOptions,
-        ignoreCallExpressionIdentifiers,
-        ignoreTaggedTemplateExpressionIdentifiers,
-        uniAppX,
-        moduleSpecifierReplacements,
       },
+      defaults,
     )
 
     return jsHandler(rawSource, resolvedOptions)