@taro-hmr-compile/plugin-webpack 0.0.1-alpha.9 → 0.0.1

package/src/compile/hmr-output-plugin.ts

@@ -0,0 +1,158 @@
+import {randomUUID} from 'node:crypto'
+import type {NoParamCallback, PathOrFileDescriptor, WriteFileOptions} from 'node:fs'
+import {mkdir, rename, rm, writeFile} from 'node:fs/promises'
+import path from 'node:path'
+import type {Compilation, Compiler, OutputFileSystem} from 'webpack'
+
+export const PLUGIN_NAME = 'HmrOutputPlugin'
+
+type WriteFile = OutputFileSystem['writeFile']
+
+type WriteFileData = string | NodeJS.ArrayBufferView
+
+export interface AtomicOutputPluginOptions {
+    /** 这些资产仍由 Webpack 生成，但等其他资产输出完成后才按配置顺序发布。 */
+    deferredAssets?: readonly string[]
+}
+
+interface DeferredOutput {
+    data: WriteFileData
+    file: string
+}
+
+export class HmrOutputPlugin {
+    private readonly deferredAssets: readonly string[]
+
+    private readonly deferredOutputs = new WeakMap<Compilation, Map<string, DeferredOutput>>()
+
+    constructor(options: AtomicOutputPluginOptions = {}) {
+        this.deferredAssets = options.deferredAssets ?? []
+    }
+
+    apply(compiler: Compiler): void {
+        const outputFileSystem = compiler.outputFileSystem
+
+        if (!outputFileSystem) throw new Error(`[${PLUGIN_NAME}] Webpack outputFileSystem 尚未初始化`)
+
+        compiler.outputFileSystem = this.createOutputFileSystem(compiler, outputFileSystem)
+
+        // 尽可能在其他 emit tap 之后读取资产，随后 Webpack 才开始物理输出。
+        compiler.hooks.emit.tap({name: PLUGIN_NAME, stage: Number.MAX_SAFE_INTEGER}, compilation => {
+            if (compilation.errors.length > 0) return
+            this.collectDeferredOutputs(compiler, compilation)
+        })
+
+        // 等待普通资产写入完成后，再按配置顺序发布延迟资产。
+        compiler.hooks.afterEmit.tapPromise(PLUGIN_NAME, async compilation => {
+            try {
+                if (compilation.errors.length > 0) return
+                await this.flushDeferredOutputs(compilation)
+            } finally {
+                this.deferredOutputs.delete(compilation)
+            }
+        })
+    }
+
+    /**
+     * 代理原始 OutputFileSystem。
+     * 仅重写 writeFile，其余方法调用原始文件系统实现。
+     */
+    private createOutputFileSystem(compiler: Compiler, original: OutputFileSystem): OutputFileSystem {
+        return new Proxy(original, {
+            get: (target, property) => {
+                if (property === 'writeFile') return this.createWriteFile(compiler, original)
+                const value = Reflect.get(target, property, target)
+                return typeof value === 'function' ? value.bind(target) : value
+            }
+        })
+    }
+
+    /**
+     * 创建自定义 writeFile 实现。
+     */
+    private createWriteFile(compiler: Compiler, original: OutputFileSystem): WriteFile {
+        const originalWriteFile = original.writeFile.bind(original)
+
+        return (file: PathOrFileDescriptor, data: WriteFileData, optionsOrCallback: WriteFileOptions | NoParamCallback, optionalCallback?: NoParamCallback): void => {
+
+            const callback = (() => {
+                if (typeof optionsOrCallback === 'function') return optionsOrCallback
+                return optionalCallback
+            })()
+
+            const triggerOriginalWriteFile = () => {
+                if (typeof optionsOrCallback === 'function') return originalWriteFile(file, data, optionsOrCallback)
+                if (optionalCallback) originalWriteFile(file, data, optionsOrCallback, optionalCallback)
+            }
+
+            if (typeof file !== 'string' || !callback) return triggerOriginalWriteFile()
+
+            const assetName = this.getAssetName(compiler, file)
+
+            if (assetName && this.deferredAssets.includes(assetName)) return callback(null)
+
+            this.writeFileAtomically(file, data).then(() => callback(null)).catch(error => callback(error))
+        }
+    }
+
+    private collectDeferredOutputs(compiler: Compiler, compilation: Compilation): void {
+        if (this.deferredAssets.length === 0) return
+
+        const {path: outputPath} = compiler.options.output
+
+        if (!outputPath) throw new Error(`[${PLUGIN_NAME}] 无法收集延迟资产：output.path 未配置`)
+
+        const outputs = new Map<string, DeferredOutput>()
+
+        this.deferredAssets.forEach(assetName => {
+            const asset = compilation.getAsset(assetName)
+            if (!asset) return
+            const data = asset.source.source()
+            outputs.set(assetName, {data, file: path.join(outputPath, assetName)})
+        })
+
+        this.deferredOutputs.set(compilation, outputs)
+    }
+
+    private getAssetName(compiler: Compiler, file: string) {
+        const {path: outputPath} = compiler.options.output
+
+        if (!outputPath) return
+
+        const assetName = path.relative(outputPath, file).replaceAll('\\', '/')
+
+        if (assetName.startsWith('../') || path.isAbsolute(assetName)) return
+
+        return assetName
+    }
+
+    private async flushDeferredOutputs(compilation: Compilation) {
+        const outputs = this.deferredOutputs.get(compilation)
+
+        if (!outputs) return
+
+        return Promise.all(this.deferredAssets.map(assetName => {
+            const output = outputs.get(assetName)
+            if (!output) return
+            return this.writeFileAtomically(output.file, output.data)
+        }))
+    }
+
+    /**
+     * 通过同目录临时文件和 rename 原子替换目标文件。
+     */
+    private async writeFileAtomically(targetPath: string, data: WriteFileData): Promise<void> {
+        const directory = path.dirname(targetPath)
+
+        const temporaryPath = path.join(directory, `.${path.basename(targetPath)}.${randomUUID()}.tmp`)
+
+        await mkdir(directory, {recursive: true})
+
+        try {
+            await writeFile(temporaryPath, data)
+            await rename(temporaryPath, targetPath)
+        } finally {
+            await rm(temporaryPath, {force: true})
+        }
+    }
+}

package/src/compile/hmr-style-plugin.ts

@@ -0,0 +1,70 @@
+import type {Compilation, Compiler} from 'webpack'
+import {RawSource} from 'webpack-sources'
+
+export interface HmrStylePluginOptions {
+    /** Webpack/Taro 生成的全局样式资产。 */
+    sourceAsset: string
+    /** 固定入口资产；后续编译持续引用 patchAsset。 */
+    entryAsset: string
+    /** 每轮热编译输出的独立样式资产。 */
+    patchAsset: string
+    /** 是否将入口固定为对 patchAsset 的导入。 */
+    preserveEntry?: boolean
+    /** 自定义源样式到 patch 样式的内容转换。 */
+    transform?: (source: string, compilation: Compilation) => string
+}
+
+const PLUGIN_NAME = 'HmrStylePlugin'
+
+/**
+ * 将构建器生成的全局样式复制到独立 HMR 资产，并可固定入口文件。
+ * 应在构建器完成最终资产变换后运行。
+ */
+export class HmrStylePlugin {
+    private readonly options: HmrStylePluginOptions
+
+    private initialBuildDone = false
+
+    constructor(options: HmrStylePluginOptions) {
+        this.options = options
+    }
+
+    apply(compiler: Compiler) {
+        compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
+            const stage = compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT
+            compilation.hooks.processAssets.tap({name: PLUGIN_NAME, stage}, () => this.processAssets(compilation))
+        })
+
+        compiler.hooks.afterEmit.tap(PLUGIN_NAME, compilation => {
+            if (compilation.errors.length === 0 && compilation.hash) this.initialBuildDone = true
+        })
+
+        compiler.hooks.watchClose.tap(PLUGIN_NAME, () => {
+            this.initialBuildDone = false
+        })
+    }
+
+    private processAssets(compilation: Compilation) {
+        if (!compilation.hash || compilation.errors.length > 0) return
+
+        const {sourceAsset, entryAsset, patchAsset, preserveEntry = true, transform} = this.options
+        const source = compilation.getAsset(sourceAsset)?.source.source().toString()
+
+        if (source !== undefined) {
+            const patchSource = transform ? transform(source, compilation) : source
+            this.updateAsset(compilation, patchAsset, new RawSource(patchSource), {
+                hotModuleReplacement: this.initialBuildDone
+            })
+        }
+
+        if (preserveEntry) {
+            const entry = new RawSource(`@import ${JSON.stringify(`./${patchAsset}`)};\n`)
+            this.updateAsset(compilation, entryAsset, entry)
+        }
+    }
+
+    private updateAsset(compilation: Compilation, name: string, source: RawSource, info = {}) {
+        if (compilation.getAsset(name)) compilation.updateAsset(name, source, info)
+        else compilation.emitAsset(name, source, info)
+    }
+}

package/src/compile/lazy-compiler-loader.ts

@@ -38,19 +38,28 @@ interface LoaderOptions {
     appConfig: AppConfig
     framework: 'react'
     compileUrl: string
+    lazyCompileExclude?: string[]
 }
 
 const lazyCompilerLoader: LoaderDefinitionFunction<LoaderOptions> = function (source) {
-    const {appPath, framework, appConfig, sourcePath, compileUrl} = this.getOptions()
+    const {appPath, framework, appConfig, sourcePath, compileUrl, lazyCompileExclude = []} = this.getOptions()
 
     const {dir: resourceDir, name: resourceName} = path.parse(path.relative(sourcePath, this.resourcePath))
 
-    const resourcePath = path.join(resourceDir, resourceName)
+    const resourcePath = path.join(resourceDir, resourceName).replace(/\\/g, '/')
 
     const isPageEntry = getAllPages(appConfig).includes(resourcePath)
 
     if (!isPageEntry || isPageCompiled(appPath, resourcePath)) return source
 
+    const isExcluded = lazyCompileExclude.some(excludePath => {
+        if (!excludePath) return false
+        const normalizedPath = path.posix.normalize(excludePath.replace(/\\/g, '/')).replace(/^\/+/, '')
+        return normalizedPath.endsWith('/') ? resourcePath.startsWith(normalizedPath) : resourcePath === normalizedPath
+    })
+
+    if (isExcluded) return source
+
     return createShell({page: resourcePath, framework, compileUrl, memo: isMemoPage(source)})
 }
 

package/src/constants.ts

@@ -2,6 +2,8 @@ export const HMR_OUTPUT_PATH = 'hmr'
 
 export const HMR_PATCH_ASSET = `${HMR_OUTPUT_PATH}/patch.js`
 
+export const HMR_PATCH_STYLE_ASSET = `${HMR_OUTPUT_PATH}/patch.wxss`
+
 export const DEFAULT_HMR_PATCH_HISTORY_LIMIT = 20
 
 export const DEFAULT_DEBUG_NAMESPACES = 'taro-hmr-compile:*'

package/src/index.ts

@@ -1,25 +1,29 @@
 import type {IPluginContext} from '@tarojs/service'
 import type {AppConfig} from '@tarojs/taro'
-import {HMR_OUTPUT_PATH, DEFAULT_DEBUG_NAMESPACES} from './constants'
+import {HMR_OUTPUT_PATH, HMR_PATCH_ASSET, HMR_PATCH_STYLE_ASSET, DEFAULT_DEBUG_NAMESPACES} from './constants'
 import {getAppConfig} from './utils'
 import {HmrCompilerPlugin} from './compile/hmr-compiler-plugin'
 import {HmrPatchPlugin} from './patch/hmr-patch-plugin'
 import {HmrServerPlugin} from './server/hmr-server-plugin'
-import {emptyDirFile, findAvailablePort} from '@taro-hmr-compile/core/compiler'
+import {findAvailablePort} from '@taro-hmr-compile/core/compiler'
+import {HmrOutputPlugin} from './compile/hmr-output-plugin'
 import {enableLog} from './log'
 
+const CUSTOM_WRAPPER = 'custom-wrapper'
 
 export interface WebpackHmrCompileOpt {
     host: string
     port: number
     patchHistoryLimit: number
     debug: boolean | string
+    /** 相对于 sourceRoot 的页面路径（不含扩展名），支持开头 /，末尾 / 表示目录。 */
+    lazyCompileExclude: string[]
 }
 
 export default (ctx: IPluginContext, pluginOpts: Partial<WebpackHmrCompileOpt>) => {
     if (!ctx.runOpts.options?.isWatch) return
 
-    const {appPath, sourcePath, outputPath} = ctx.paths
+    const {appPath, sourcePath} = ctx.paths
 
     const {framework} = ctx.initialConfig
 
@@ -36,7 +40,10 @@ export default (ctx: IPluginContext, pluginOpts: Partial<WebpackHmrCompileOpt>)
 
     if (debugNamespaces) enableLog(debugNamespaces)
 
-    ctx.onBuildStart(() => emptyDirFile(outputPath))
+    ctx.modifyComponentConfig(({componentConfig}) => {
+        if (componentConfig.thirdPartyComponents.has(CUSTOM_WRAPPER)) return
+        componentConfig.thirdPartyComponents.set(CUSTOM_WRAPPER, new Set())
+    })
 
     ctx.modifyRunnerOpts(({opts}) => {
         opts.output ??= {}
@@ -59,7 +66,7 @@ export default (ctx: IPluginContext, pluginOpts: Partial<WebpackHmrCompileOpt>)
             .end()
             .use('lazy-compiler-loader')
             .loader(require.resolve('./compile/lazy-compiler-loader'))
-            .options({appPath, sourcePath, appConfig, framework, compileUrl})
+            .options({appPath, sourcePath, appConfig, framework, compileUrl, lazyCompileExclude: pluginOpts.lazyCompileExclude})
             .end()
 
         chain.output
@@ -68,12 +75,17 @@ export default (ctx: IPluginContext, pluginOpts: Partial<WebpackHmrCompileOpt>)
 
         const {patchHistoryLimit} = pluginOpts
 
-        const [{filename: styleFilename}] = chain.plugin('miniCssExtractPlugin')?.get('args') || []
-
-        chain.plugin('hmr-compiler-plugin').use(HmrCompilerPlugin, [{paths: ctx.paths, appConfig, styleFilename, debugNamespaces}])
-
+        chain.plugin('hmr-compiler-plugin').use(HmrCompilerPlugin, [{
+            paths: ctx.paths,
+            appConfig,
+            debugNamespaces
+        }])
         chain.plugin('hmr-plugin').use(webpack.HotModuleReplacementPlugin)
 
+        chain.plugin('hmr-output-plugin').use(HmrOutputPlugin, [{
+            deferredAssets: [HMR_PATCH_STYLE_ASSET, HMR_PATCH_ASSET, 'app.wxss'],
+        }])
+
         chain.plugin('hmr-patch-plugin').use(HmrPatchPlugin, [{patchHistoryLimit}])
 
         chain.plugin('hmr-server-plugin').use(HmrServerPlugin, [{host, port}])

package/src/patch/hmr-patch-plugin.ts

@@ -1,6 +1,7 @@
 import type {Compilation, Compiler} from 'webpack'
 import {RawSource} from 'webpack-sources'
-import {HMR_PATCH_ASSET} from '../constants'
+import path from 'node:path'
+import {HMR_PATCH_ASSET, HMR_PATCH_STYLE_ASSET} from '../constants'
 import {HmrCompilerPlugin} from '../compile/hmr-compiler-plugin'
 import {HmrPatchRuntimePlugin} from './hmr-patch-runtime-plugin'
 import {HmrPatchProcessor, HmrPatchProcessorOptions} from "./hmr-patch-processor";
@@ -10,6 +11,7 @@ const HOT_UPDATE_MANIFEST_SUFFIX = '.hot-update.json'
 const HOT_UPDATE_SCRIPT_SUFFIX = '.hot-update.js'
 const STYLE_ASSET_PATTERN = /\.(?:css|wxss|acss|ttss|qss|jxss)(?:\.map)?$/i
 const TEMPLATE_RUNTIME_ASSET_PATTERN = /(?:^|\/)(?:base\.wxml|utils\.wxs)$/i
+const STYLE_ENTRY_ASSET = 'app.wxss'
 
  type HmrPatchPluginOptions = Partial<HmrPatchProcessorOptions>
 
@@ -25,6 +27,8 @@ export class HmrPatchPlugin {
 
     private readonly patchProcessor: HmrPatchProcessor
 
+    private readonly preservedAssets = new Set([HMR_PATCH_ASSET, STYLE_ENTRY_ASSET, HMR_PATCH_STYLE_ASSET])
+
     private readonly emittedAssetSources = new Map<string, string>()
 
     constructor(options: HmrPatchPluginOptions) {
@@ -35,13 +39,18 @@ export class HmrPatchPlugin {
         new HmrPatchRuntimePlugin().apply(compiler)
 
         compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
-            HmrCompilerPlugin.getCompilationHooks(compilation).chunkModulesRendered.tap(PLUGIN_NAME, (source, isBootstrapChunk) => {
-                this.patchProcessor.processChunkModules({compilation, source, isBootstrapChunk})
+            HmrCompilerPlugin.getCompilationHooks(compilation).chunkModulesRendered.tap(PLUGIN_NAME, options => {
+                this.patchProcessor.processChunkModules({compilation, ...options})
             })
 
             // 等 Webpack 生成完整的 hot-update assets 后，再统一转换成固定的 patch.js。
             const stage = compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT
-            compilation.hooks.processAssets.tap({name: PLUGIN_NAME, stage}, () => this.processAssets(compilation))
+            compilation.hooks.processAssets.tap({name: PLUGIN_NAME, stage}, () => {
+                if (compilation.errors.length > 0 || !compilation.hash) return
+                this.processStyleAssets(compilation)
+                this.processAssets(compilation)
+            })
+                this.removeHotUpdateAssets(compilation)
         })
 
         compiler.hooks.afterEmit.tap(PLUGIN_NAME, compilation => {
@@ -82,10 +91,40 @@ export class HmrPatchPlugin {
         this.previousHash = toHash
     }
 
+    /** 将 Webpack 汇总后的 App 样式放入固定 patch 文件，App 入口只保留稳定引用。 */
+    private processStyleAssets(compilation: Compilation) {
+        const entryAsset = compilation.getAsset(STYLE_ENTRY_ASSET)
+        const source = entryAsset?.source.source().toString()
+        if (!source) return
+
+        const importPath = path.posix.relative(path.posix.dirname(STYLE_ENTRY_ASSET), HMR_PATCH_STYLE_ASSET)
+        const patchImport = importPath.startsWith('.') ? importPath : `./${importPath}`
+        const alreadyPatched = source.trim() === `@import "${patchImport}";` || source.trim() === `@import '${patchImport}';`
+
+        if (!alreadyPatched) {
+            const patchDirectory = path.posix.dirname(HMR_PATCH_STYLE_ASSET)
+            const sourceDirectory = path.posix.dirname(STYLE_ENTRY_ASSET)
+            const patchSource = source.replace(/(@import\s+)(["'])([^"']+)\2/g, (match, prefix: string, quote: string, request: string) => {
+                if (/^(?:[a-z]+:|\/|#)/i.test(request)) return match
+                const resolved = path.posix.normalize(path.posix.join(sourceDirectory, request))
+                const relative = path.posix.relative(patchDirectory, resolved)
+                return `${prefix}${quote}${relative.startsWith('.') ? relative : `./${relative}`}${quote}`
+            })
+            this.emitAsset(compilation, HMR_PATCH_STYLE_ASSET, new RawSource(patchSource))
+        }
+
+        this.emitAsset(compilation, STYLE_ENTRY_ASSET, new RawSource(`@import ${JSON.stringify(patchImport)};\n`))
+    }
+
+    private emitAsset(compilation: Compilation, assetName: string, source: RawSource) {
+        if (compilation.getAsset(assetName)) compilation.updateAsset(assetName, source)
+        else compilation.emitAsset(assetName, source)
+    }
+
     /** 热更新转换完成后，保留固定 patch 与发生变化的模板、平台样式资产。 */
     private removeSupersededAssets(compilation: Compilation) {
         compilation.getAssets().forEach(asset => {
-            if (asset.name === HMR_PATCH_ASSET) return
+            if (this.preservedAssets.has(asset.name)) return
             if (!isPassthroughAsset(asset.name)) return compilation.deleteAsset(asset.name)
 
             const source = asset.source.source().toString()
@@ -108,4 +147,13 @@ export class HmrPatchPlugin {
         this.emittedAssetSources.clear()
         this.patchProcessor.reset()
     }
+    /** 补丁已从 hot-update assets 生成后，在 Webpack 写盘前从本次 compilation 移除它们。 */
+    private removeHotUpdateAssets(compilation: Compilation) {
+        compilation.getAssets().forEach(asset => {
+            if (asset.name.endsWith(HOT_UPDATE_MANIFEST_SUFFIX) || asset.name.endsWith(HOT_UPDATE_SCRIPT_SUFFIX)) {
+                compilation.deleteAsset(asset.name)
+            }
+        })
+    }
+
 }

package/src/patch/hmr-patch-processor.ts

@@ -1,23 +1,18 @@
-import {type Compilation,} from "webpack";
-import generator from '@babel/generator'
+import {type Chunk, type Compilation,} from "webpack";
 import {
     parseHotUpdateAssets,
     ParseHotUpdateAssetsOptions,
     parseChunkAsset, mergeUpdatePatches, generatePatchAssetSource,
 } from "./utils";
-import {createHash} from "crypto";
+import isNil from 'lodash/isNil'
 import {ModuleFactory, UpdatePatchSource} from "./types";
 import {DEFAULT_HMR_PATCH_HISTORY_LIMIT} from "../constants";
 
-interface ModuleHash {
-    moduleId: string;
-    factoryHash: string;
-}
-
 interface ProcessChunkModulesOptions {
     source: string
     compilation: Compilation,
-    isBootstrapChunk: boolean
+    isBootstrapChunk: boolean,
+    chunk: Chunk
 }
 
 export interface HmrPatchProcessorOptions {
@@ -31,7 +26,14 @@ interface ProcessUpdateOptions extends ParseHotUpdateAssetsOptions {
 
 type BootstrapFactories = Map<string, ModuleFactory>
 
-type ModuleHashesByFullHash = Map<string, Map<string, ModuleHash>>
+type ModuleHashes = Map<string, Set<string>>
+
+type ModuleHashesByFullHash = Map<string, ModuleHashes>
+
+const areModuleHashesEqual = (left: Set<string> | undefined, right: Set<string> | undefined): boolean => {
+    if (!left || !right || left.size !== right.size) return false
+    return Array.from(left).every(hash => right.has(hash))
+}
 
 export class HmrPatchProcessor {
     private readonly bootstrapFactories: BootstrapFactories = new Map()
@@ -62,9 +64,9 @@ export class HmrPatchProcessor {
 
         const changedModuleIds = new Set<string>()
         moduleIds.forEach(moduleId => {
-            const fromFactoryHash = fromModuleHashes.get(moduleId)?.factoryHash
-            const toFactoryHash = toModuleHashes.get(moduleId)?.factoryHash
-            if (fromFactoryHash !== toFactoryHash) changedModuleIds.add(moduleId)
+            const fromModuleHash = fromModuleHashes.get(moduleId)
+            const toModuleHash = toModuleHashes.get(moduleId)
+            if (!areModuleHashesEqual(fromModuleHash, toModuleHash)) changedModuleIds.add(moduleId)
         })
 
         return changedModuleIds
@@ -105,28 +107,44 @@ export class HmrPatchProcessor {
     }
 
     processChunkModules(opt: ProcessChunkModulesOptions) {
-        const {hash: fullHash} = opt.compilation
-        const modules = parseChunkAsset(opt.source)
+        const {chunk, compilation, isBootstrapChunk, source} = opt
+        const {hash: fullHash} = compilation
+        const modules = parseChunkAsset(source)
         modules.forEach(moduleFactory => {
             const {moduleId, factory} = moduleFactory
 
-            if (opt.isBootstrapChunk) {
-                const compilationFactories = this.bootstrapFactoriesByCompilation.get(opt.compilation) ?? new Map()
+            if (isBootstrapChunk) {
+                const compilationFactories = this.bootstrapFactoriesByCompilation.get(compilation) ?? new Map()
                 compilationFactories.set(moduleId, {moduleId, factory})
-                this.bootstrapFactoriesByCompilation.set(opt.compilation, compilationFactories)
+                this.bootstrapFactoriesByCompilation.set(compilation, compilationFactories)
             }
+        })
+
+        if (!fullHash) return
+
+        const moduleHashes = (() => {
+            const hasCurFullHashModuleHashMap = this.moduleHashesByFullHash.has(fullHash)
+            if (!hasCurFullHashModuleHashMap) this.moduleHashesByFullHash.set(fullHash, new Map())
+            return this.moduleHashesByFullHash.get(fullHash)!
+        })()
+
+        const { chunkGraph, codeGenerationResults } = compilation
+
+        Array.from(chunkGraph.getChunkModulesIterable(chunk)).forEach(module => {
+            const moduleId = chunkGraph.getModuleId(module)
+
+            if (isNil(moduleId)) return
 
-            if (!fullHash) return
+            const normalizedModuleId = String(moduleId)
 
-            const moduleHashes = (() => {
-                const hasCurFullHashModuleHashMap = this.moduleHashesByFullHash.has(fullHash)
-                if (!hasCurFullHashModuleHashMap) this.moduleHashesByFullHash.set(fullHash, new Map())
-                return this.moduleHashesByFullHash.get(fullHash)!
-            })()
+            // 获取模块在当前 chunk.runtime 下的 Hash，优先从 codeGenerationResults 获取，如果没有对应的代码生成结果，则回退到 chunkGraph 获取
+            const moduleHash = codeGenerationResults?.has(module, chunk.runtime)
+                ? codeGenerationResults.getHash(module, chunk.runtime)
+                : chunkGraph.getModuleHash(module, chunk.runtime)
 
-            const {code: source} = generator(factory, {compact: true, comments: false, minified: true,})
-            const factoryHash = createHash('sha256').update(source).digest('hex')
-            moduleHashes.set(moduleId, {moduleId, factoryHash})
+            const hashes = moduleHashes.get(normalizedModuleId) ?? new Set<string>()
+            hashes.add(moduleHash)
+            moduleHashes.set(normalizedModuleId, hashes)
         })
     }
 

package/src/patch/utils.ts

@@ -17,7 +17,7 @@ const parseModuleFactories = (expression: ObjectExpression) => {
 
     const moduleFactories = new Map<string, ModuleFactory>()
 
-    if (!t.isObjectExpression(expression)) return moduleFactories.values()
+    if (!t.isObjectExpression(expression)) return Array.from(moduleFactories.values())
 
     expression.properties.forEach(property => {
         if (!t.isObjectProperty(property) || !t.isExpression(property.value)) throw new Error('[taro-hmr-compile] HMR 模块对象包含无法识别的属性')
@@ -33,7 +33,7 @@ const parseModuleFactories = (expression: ObjectExpression) => {
         moduleFactories.set(moduleId, {factory, moduleId})
     })
 
-    return moduleFactories.values()
+    return Array.from(moduleFactories.values())
 }
 
 
@@ -128,7 +128,7 @@ export const mergeUpdatePatches = (basePatch: UpdatePatchSource, nextPatch: Upda
         type: 'update',
         fromHash: basePatch.fromHash,
         toHash: nextPatch.toHash,
-        moduleFactories: [...moduleFactories.values()],
+        moduleFactories: Array.from(moduleFactories.values()),
         runtimeModules: [...basePatch.runtimeModules, ...nextPatch.runtimeModules],
         removedModules: [...removedModules],
     }

package/src/types/taro-service.d.ts

@@ -0,0 +1,15 @@
+import type { IProjectConfig } from '@tarojs/taro/types/compile'
+import type { IComponentConfig } from '@tarojs/taro/types/compile/hooks'
+
+declare module '@tarojs/service' {
+    interface IPluginContext {
+        modifyComponentConfig: (
+            callback: (args: {
+                componentConfig: IComponentConfig
+                config: IProjectConfig
+            }) => void,
+        ) => void
+    }
+}
+
+export {}