perf(weapp-tailwindcss): 复用 js 与模板处理默认分支

Author: sonofmagic

packages/weapp-tailwindcss/src/js/babel/process.ts

@@ -5,18 +5,50 @@ import MagicString from 'magic-string'
 import { replaceHandleValue } from '../handlers'
 import { collectModuleSpecifierReplacementTokens } from '../sourceAnalysis'
 
+const optionVariantsCache = new WeakMap<IJsHandlerOptions, {
+  stringLiteralOptions?: IJsHandlerOptions
+  templateLiteralOptions?: IJsHandlerOptions
+}>()
+
+function getNeedEscapedOptions(
+  options: IJsHandlerOptions,
+  needEscaped: boolean,
+) {
+  if (options.needEscaped === needEscaped) {
+    return options
+  }
+
+  let cached = optionVariantsCache.get(options)
+  if (!cached) {
+    cached = {}
+    optionVariantsCache.set(options, cached)
+  }
+
+  if (needEscaped) {
+    if (!cached.stringLiteralOptions) {
+      cached.stringLiteralOptions = {
+        ...options,
+        needEscaped: true,
+      }
+    }
+    return cached.stringLiteralOptions
+  }
+
+  if (!cached.templateLiteralOptions) {
+    cached.templateLiteralOptions = {
+      ...options,
+      needEscaped: false,
+    }
+  }
+  return cached.templateLiteralOptions
+}
+
 export function processUpdatedSource(
   rawSource: string,
   options: IJsHandlerOptions,
   analysis: SourceAnalysis,
 ) {
   const { targetPaths, jsTokenUpdater, ignoredPaths } = analysis
-  const stringLiteralOptions = options.needEscaped === undefined
-    ? { ...options, needEscaped: true }
-    : options
-  const templateLiteralOptions = options.needEscaped === false
-    ? options
-    : { ...options, needEscaped: false }
 
   // 为前面收集到的所有字符串节点生成替换 token。
   const replacementTokens: JsToken[] = []
@@ -27,7 +59,9 @@ export function processUpdatedSource(
 
     const token = replaceHandleValue(
       path,
-      path.isStringLiteral() ? stringLiteralOptions : templateLiteralOptions,
+      path.isStringLiteral()
+        ? getNeedEscapedOptions(options, true)
+        : getNeedEscapedOptions(options, false),
     )
 
     if (token) {

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

@@ -6,6 +6,20 @@ export {
   jsHandler,
 }
 
+function hasDefinedOverrides(options?: CreateJsHandlerOptions) {
+  if (!options) {
+    return false
+  }
+
+  for (const key in options) {
+    if (options[key as keyof CreateJsHandlerOptions] !== undefined) {
+      return true
+    }
+  }
+
+  return false
+}
+
 export function createJsHandler(options: CreateJsHandlerOptions): JsHandler {
   // 预构建不可变的默认选项对象，避免每次调用都重新创建字面量。
   const defaults: IJsHandlerOptions = {
@@ -53,8 +67,8 @@ export function createJsHandler(options: CreateJsHandlerOptions): JsHandler {
   }
 
   function handler(rawSource: string, classNameSet?: Set<string>, options?: CreateJsHandlerOptions) {
-    // 快路径：无覆盖选项时跳过 defuOverrideArray，直接合并 classNameSet
-    if (!options || Object.keys(options).length === 0) {
+    // 快路径：无有效覆盖选项时跳过 defuOverrideArray，直接合并 classNameSet。
+    if (!hasDefinedOverrides(options)) {
       return jsHandler(rawSource, resolveDefaultOptions(classNameSet))
     }
 

packages/weapp-tailwindcss/src/wxml/utils/codegen.ts

@@ -1,16 +1,23 @@
-import type { ITemplateHandlerOptions } from '../../types'
+import type { CreateJsHandlerOptions, ITemplateHandlerOptions } from '../../types'
 import { rewriteLegacyExpression } from './codegen/legacy-rewriter'
 
+const WRAP_EXPRESSION_HANDLER_OPTIONS: CreateJsHandlerOptions = Object.freeze({
+  wrapExpression: true,
+})
+
 export function generateCode(match: string, options: ITemplateHandlerOptions = {}) {
   try {
-    const { jsHandler, runtimeSet } = options
+    const { jsHandler, runtimeSet, wrapExpression } = options
     if (jsHandler && runtimeSet) {
-      const runHandler = (wrap?: boolean) => jsHandler(match, runtimeSet, wrap ? { wrapExpression: true } : undefined)
-      const initial = runHandler(options.wrapExpression)
-      if (!initial.error || options.wrapExpression) {
+      const initial = jsHandler(
+        match,
+        runtimeSet,
+        wrapExpression ? WRAP_EXPRESSION_HANDLER_OPTIONS : undefined,
+      )
+      if (!initial.error || wrapExpression) {
         return initial.code
       }
-      const fallback = runHandler(true)
+      const fallback = jsHandler(match, runtimeSet, WRAP_EXPRESSION_HANDLER_OPTIONS)
       return fallback.code
     }
     else {

packages/weapp-tailwindcss/test/js/index-handler.test.ts

@@ -3,6 +3,9 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { createJsHandler } from '@/js'
 import * as babel from '@/js/babel'
 
+const STYLED_TAG_REGEXP = /^styled$/
+const OVERRIDE_CALL_REGEXP = /^override$/
+
 function createBaseOptions() {
   return {
     escapeMap: { base: '_' },
@@ -14,7 +17,7 @@ function createBaseOptions() {
     unescapeUnicode: true,
     babelParserOptions: { sourceType: 'module' as const },
     ignoreCallExpressionIdentifiers: ['cn'],
-    ignoreTaggedTemplateExpressionIdentifiers: [/^styled$/],
+    ignoreTaggedTemplateExpressionIdentifiers: [STYLED_TAG_REGEXP],
     uniAppX: true,
   }
 }
@@ -31,7 +34,7 @@ describe('createJsHandler', () => {
     const override = {
       needEscaped: false,
       escapeMap: { override: '_' },
-      ignoreCallExpressionIdentifiers: [/^override$/],
+      ignoreCallExpressionIdentifiers: [OVERRIDE_CALL_REGEXP],
     }
     const classNameSet = new Set(['foo'])
 
@@ -80,6 +83,23 @@ describe('createJsHandler', () => {
     expect(resolved.unescapeUnicode).toBe(true)
   })
 
+  it('reuses the cached configuration when overrides only contain undefined values', () => {
+    const spy = vi.spyOn(babel, 'jsHandler').mockReturnValue({ code: 'undefined-cache' })
+    const base = createBaseOptions()
+    const handler = createJsHandler(base)
+    const classNameSet = new Set(['foo'])
+
+    handler('source-a', classNameSet)
+    handler('source-b', classNameSet, {
+      needEscaped: undefined,
+      alwaysEscape: undefined,
+    })
+
+    expect(spy).toHaveBeenCalledTimes(2)
+    expect(spy.mock.calls[0][1]).toBe(spy.mock.calls[1][1])
+    expect(spy.mock.calls[1][1].classNameSet).toBe(classNameSet)
+  })
+
   it('reuses the cached configuration for the same runtime classNameSet when no overrides are supplied', () => {
     const spy = vi.spyOn(babel, 'jsHandler').mockReturnValue({ code: 'set-cache' })
     const base = createBaseOptions()

packages/weapp-tailwindcss/test/wxml/utils.test.ts

@@ -1,20 +1,25 @@
+import { describe, expect, it, vi } from 'vitest'
 import { getCompilerContext } from '@/context'
 import { replaceWxml } from '@/wxml'
 import { generateCode, isPropsMatch } from '@/wxml/utils'
 import { removeWxmlId } from '../util'
 
+const EXACT_RD_BTN_CLASS_REGEXP = /^rd-btn-class$/
+const RD_WORD_CLASS_REGEXP = /^rd-\w+-class$/
+const RD_ALPHA_CLASS_REGEXP = /^rd-[A-Za-z]+-class$/
+
 describe('utils', () => {
   it('isPropsMatch', () => {
     expect(isPropsMatch('a', 'a')).toBe(true)
     expect(isPropsMatch(['a'], 'a')).toBe(true)
     expect(isPropsMatch('rd-btn-class', 'rd-btn-class')).toBe(true)
     expect(isPropsMatch(['rd-btn-class'], 'rd-btn-class')).toBe(true)
-    expect(isPropsMatch(/^rd-btn-class$/, 'rd-btn-class')).toBe(true)
-    expect(isPropsMatch([/^rd-btn-class$/], 'rd-btn-class')).toBe(true)
-    expect(isPropsMatch(/^rd-\w+-class$/, 'rd-btn-class')).toBe(true)
-    expect(isPropsMatch([/^rd-\w+-class$/], 'rd-btn-class')).toBe(true)
-    expect(isPropsMatch(/^rd-[A-Za-z]+-class$/, 'rd-btn-class')).toBe(true)
-    expect(isPropsMatch([/^rd-[A-Za-z]+-class$/], 'rd-btn-class')).toBe(true)
+    expect(isPropsMatch(EXACT_RD_BTN_CLASS_REGEXP, 'rd-btn-class')).toBe(true)
+    expect(isPropsMatch([EXACT_RD_BTN_CLASS_REGEXP], 'rd-btn-class')).toBe(true)
+    expect(isPropsMatch(RD_WORD_CLASS_REGEXP, 'rd-btn-class')).toBe(true)
+    expect(isPropsMatch([RD_WORD_CLASS_REGEXP], 'rd-btn-class')).toBe(true)
+    expect(isPropsMatch(RD_ALPHA_CLASS_REGEXP, 'rd-btn-class')).toBe(true)
+    expect(isPropsMatch([RD_ALPHA_CLASS_REGEXP], 'rd-btn-class')).toBe(true)
   })
 
   it('remove all id', () => {
@@ -54,4 +59,47 @@ describe('utils', () => {
     })
     expect(code).toContain(replaceWxml('border-[#ff0000] bg-blue-600/50'))
   })
+
+  it('does not retry when wrapExpression is already enabled', () => {
+    const jsHandler = vi.fn(() => ({
+      code: 'wrapped',
+      error: new Error('already wrapped'),
+    }))
+    const runtimeSet = new Set<string>()
+    const code = generateCode(`{'foo': flag}`, {
+      jsHandler,
+      runtimeSet,
+      wrapExpression: true,
+    })
+
+    expect(code).toBe('wrapped')
+    expect(jsHandler).toHaveBeenCalledTimes(1)
+    expect(jsHandler.mock.calls[0]?.[2]).toEqual({
+      wrapExpression: true,
+    })
+  })
+
+  it('retries once with wrapExpression when the initial parse fails', () => {
+    const jsHandler = vi
+      .fn()
+      .mockReturnValueOnce({
+        code: 'initial',
+        error: new Error('parse error'),
+      })
+      .mockReturnValueOnce({
+        code: 'fallback',
+      })
+    const runtimeSet = new Set<string>()
+    const code = generateCode(`{'foo': flag}`, {
+      jsHandler,
+      runtimeSet,
+    })
+
+    expect(code).toBe('fallback')
+    expect(jsHandler).toHaveBeenCalledTimes(2)
+    expect(jsHandler.mock.calls[0]?.[2]).toBeUndefined()
+    expect(jsHandler.mock.calls[1]?.[2]).toEqual({
+      wrapExpression: true,
+    })
+  })
 })