@taro-hmr-compile/plugin-webpack 0.0.1-alpha.10

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

@@ -0,0 +1,233 @@
+import path from 'path'
+import {resolveMainFilePath} from '@tarojs/helper'
+import type {IPaths} from '@tarojs/service'
+import type {AppConfig} from '@tarojs/taro'
+import {SyncHook} from 'tapable'
+import type {Chunk, Compilation, Compiler} from 'webpack'
+import {ConcatSource, RawSource} from 'webpack-sources'
+import type {Source} from 'webpack-sources'
+import {HMR_PATCH_ASSET} from '../constants'
+import {clearCompiledPages, isPageCompiled, markPageCompiled} from './compile-state'
+import {getAllPages} from '../utils'
+import {log} from "../log";
+
+const compilerLog = log.extend('HmrCompilerPlugin')
+
+const PLUGIN_NAME = 'HmrCompilerPlugin'
+
+interface TaroNormalModule {
+    miniType?: string
+    loaders: Array<{ loader: string; options?: unknown }>
+}
+
+type StyleFilename = NonNullable<Compiler['options']['output']['cssFilename']>
+
+export interface HmrCompilerPluginOptions {
+    paths: IPaths
+    appConfig: AppConfig
+    styleFilename?: StyleFilename
+    debugNamespaces?: string
+}
+
+type CompileRequested = SyncHook<[page: string]>
+
+interface ChunkModulesRenderedOptions {
+    source: string
+    isBootstrapChunk: boolean
+    chunk: Chunk
+}
+
+type ChunkModulesRendered = SyncHook<[options: ChunkModulesRenderedOptions]>
+
+export interface HmrCompilerHooks {
+    compileRequested: CompileRequested
+}
+
+export interface HmrCompilationHooks {
+    chunkModulesRendered: ChunkModulesRendered
+}
+
+export const applyPatchBeforeStartup = (source: Source, request: string) => {
+    const patchRequest = JSON.stringify(`${request}.js`)
+    return new ConcatSource(
+        `globalThis.miniHmrApplyPatch(require(${patchRequest}));\n`,
+        source,
+    )
+}
+
+export class HmrCompilerPlugin {
+    private static readonly compilerHooksMap = new WeakMap<Compiler, HmrCompilerHooks>()
+
+    private static readonly compilationHooksMap = new WeakMap<Compilation, HmrCompilationHooks>()
+
+    private compiler?: Compiler
+
+    private hasCompletedInitialBuild = false
+
+    // 页面编译请求可能在任意时刻到达。先排队到下一轮 watchRun，避免与正在执行的编译相互覆盖。
+    private readonly pendingFiles = new Set<string>()
+
+    // 当前编译批次的文件快照。与 pendingFiles 分离，确保编译期间新到达的请求留给下一批处理。
+    private readonly rebuildingFiles = new Set<string>()
+
+    private readonly options: HmrCompilerPluginOptions
+
+    constructor(options: HmrCompilerPluginOptions) {
+        this.options = options
+    }
+
+    static getCompilerHooks(compiler: Compiler): HmrCompilerHooks {
+        if (!HmrCompilerPlugin.compilerHooksMap.get(compiler)) {
+            const compileRequested: CompileRequested = new SyncHook(['page'])
+            HmrCompilerPlugin.compilerHooksMap.set(compiler, {compileRequested})
+        }
+        return HmrCompilerPlugin.compilerHooksMap.get(compiler)!
+    }
+
+    static getCompilationHooks(compilation: Compilation): HmrCompilationHooks {
+        if (!HmrCompilerPlugin.compilationHooksMap.get(compilation)) {
+            const chunkModulesRendered: ChunkModulesRendered = new SyncHook(['options'])
+            HmrCompilerPlugin.compilationHooksMap.set(compilation, {chunkModulesRendered})
+        }
+        return HmrCompilerPlugin.compilationHooksMap.get(compilation)!
+    }
+
+    apply(compiler: Compiler) {
+        this.compiler = compiler
+
+        HmrCompilerPlugin.getCompilerHooks(compiler).compileRequested.tap(PLUGIN_NAME, page => {
+            this.requestCompile(page)
+        })
+
+        compiler.hooks.watchRun.tap(PLUGIN_NAME, currentCompiler => {
+            if (this.pendingFiles.size === 0) return
+
+            // 页面是否使用 Shell 由内存中的 compile-state 决定，源文件本身没有发生变化。
+            // 因此需要把请求显式加入 modifiedFiles，并保存当前批次供 needBuild 强制重建。
+            this.rebuildingFiles.clear()
+            this.pendingFiles.forEach(file => this.rebuildingFiles.add(file))
+            currentCompiler.modifiedFiles = new Set([...(currentCompiler.modifiedFiles ?? []), ...this.pendingFiles])
+            this.pendingFiles.clear()
+        })
+
+        compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
+            const pages = new Set(getAllPages(this.options.appConfig))
+            const isPageChunk = (chunk: Chunk) => this.isPageChunk(compilation, pages, chunk)
+            const hmrHooks = HmrCompilerPlugin.getCompilationHooks(compilation)
+            const javascriptHooks = compiler.webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation)
+
+            const HMR_COMPILER_LOADER = require.resolve('./hmr-compiler-loader')
+
+            const TARO_LOADER = '@tarojs/taro-loader'
+
+            // 尽量晚执行
+            compiler.webpack.NormalModule.getCompilationHooks(compilation).loader.tap({name: PLUGIN_NAME, stage: 10_000}, (_loaderContext, normalModule: TaroNormalModule) => {
+                    if (!normalModule.miniType) return
+
+                    if (normalModule.loaders.some(item => item.loader === HMR_COMPILER_LOADER)) return
+
+                    const taroLoaderIndex = normalModule.loaders.findIndex(item => item.loader.replace(/\\/g, '/').includes(TARO_LOADER))
+
+                    if (taroLoaderIndex < 0) return
+
+                    const loaderOptions = {miniType: normalModule.miniType, debugNamespaces: this.options.debugNamespaces}
+                    // Loader 从右向左执行；插到 taro-loader 左侧才能处理它生成的入口注册代码。
+                    normalModule.loaders.splice(taroLoaderIndex, 0, {loader: HMR_COMPILER_LOADER, options: loaderOptions})
+                },
+            )
+
+            // 只修改 Page Chunk 的 JS transport。Webpack 的 ModuleGraph / ChunkGraph 保持不变，
+            // 因而 hash、HMR diff 和 hot-update 仍以完整模块图为准。
+            javascriptHooks.renderChunk.tap({name: PLUGIN_NAME, stage: -10_000}, (source, {chunk}) => {
+                const isBootstrapChunk = isPageChunk(chunk)
+                hmrHooks.chunkModulesRendered.call({source: source.source().toString(), isBootstrapChunk, chunk})
+                return isBootstrapChunk ? new RawSource('{}') : source
+            })
+
+            javascriptHooks.renderStartup.tap(PLUGIN_NAME, (source, _module, {chunk}) => {
+                if (!isPageChunk(chunk)) return source
+
+                const filenameTemplate = compiler.webpack.javascript.JavascriptModulesPlugin
+                    .getChunkFilenameTemplate(chunk, compilation.outputOptions)
+                const assetName = compilation.getPath(filenameTemplate, {
+                    chunk,
+                    contentHashType: 'javascript',
+                    hash: compilation.hash,
+                })
+                const patchModule = HMR_PATCH_ASSET.replace(/\.js$/, '')
+                const relativePath = path.posix.relative(path.posix.dirname(assetName), patchModule)
+                const request = relativePath.startsWith('.') ? relativePath : `./${relativePath}`
+
+                // 微信要求 Page() 在当前页面脚本的同步执行阶段完成。bootstrap 会同步补齐工厂，
+                // update 继续异步排队，因此这里不能用 Promise.then 包裹 Webpack startup。
+                return applyPatchBeforeStartup(source, request)
+            })
+
+            compiler.webpack.NormalModule.getCompilationHooks(compilation).needBuild.tapAsync(
+                PLUGIN_NAME,
+                (module, _context, callback) => {
+                    const [resourcePath] = module.resource?.split('?') ?? []
+                    // 绕过 Webpack 的模块缓存，让 loader 根据最新 compile-state 将页面 Shell 替换为真实页面。
+                    if (resourcePath && this.rebuildingFiles.has(resourcePath)) return callback(null, true)
+                    callback()
+                },
+            )
+
+            const stage = compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT
+            compilation.hooks.processAssets.tap({name: PLUGIN_NAME, stage}, () => {
+                if (!this.hasCompletedInitialBuild && compilation.hash && compilation.errors.length === 0) {
+                    this.emitMissingPageStyleAssets(compilation)
+                }
+            })
+        })
+
+        compiler.hooks.afterEmit.tap(PLUGIN_NAME, compilation => {
+            const isSuccessful = compilation.errors.length === 0 && Boolean(compilation.hash)
+            this.hasCompletedInitialBuild = this.hasCompletedInitialBuild || isSuccessful
+        })
+
+        // 当前批次完成后释放快照；编译期间新进入 pendingFiles 的请求不会被清理。
+        compiler.hooks.done.tap(PLUGIN_NAME, () => this.rebuildingFiles.clear())
+
+        compiler.hooks.watchClose.tap(PLUGIN_NAME, () => this.reset())
+    }
+
+    private requestCompile(page: string) {
+        try {
+            if (isPageCompiled(this.options.paths.appPath, page)) return
+            // loader 在下一轮构建中读取该状态；必须先标记，再触发 watch invalidation。
+            compilerLog('start compile %s', page)
+            markPageCompiled(this.options.paths.appPath, page)
+            this.pendingFiles.add(resolveMainFilePath(path.resolve(this.options.paths.sourcePath, page)))
+            this.compiler?.watching?.invalidate()
+        } catch (error) {
+            console.error('[taro-hmr-compile] 页面编译触发失败', error)
+        }
+    }
+
+    private isPageChunk(compilation: Compilation, pages: Set<string>, chunk: Chunk) {
+        if (chunk.name && pages.has(chunk.name)) return true
+        return Array.from(pages).some(page => compilation.entrypoints.get(page)?.getEntrypointChunk() === chunk)
+    }
+
+    /** PageShell 不包含真实页面的样式依赖，为缺失的页面样式补充空资产。 */
+    private emitMissingPageStyleAssets(compilation: Compilation) {
+        const {appConfig, styleFilename} = this.options
+        if (!styleFilename) return
+
+        getAllPages(appConfig).forEach(page => {
+            const chunk = compilation.entrypoints.get(page)?.getEntrypointChunk()
+            if (!chunk) return
+
+            const assetName = compilation.getPath(styleFilename, {chunk, contentHashType: 'css/mini-extract'})
+            if (!compilation.getAsset(assetName)) compilation.emitAsset(assetName, new RawSource(''))
+        })
+    }
+
+    private reset() {
+        clearCompiledPages(this.options.paths.appPath)
+        this.hasCompletedInitialBuild = false
+        this.rebuildingFiles.clear()
+        this.pendingFiles.clear()
+    }
+}

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

@@ -0,0 +1,57 @@
+import type {LoaderDefinitionFunction} from 'webpack'
+import path from "path";
+import {getAllPages} from '../utils'
+import {isPageCompiled} from './compile-state'
+import type {AppConfig} from "@tarojs/taro";
+
+
+interface CreateShellOpt {
+    page: string
+    framework: 'react'
+    compileUrl: string
+    memo: boolean
+}
+
+export const createReactShell = (opt: CreateShellOpt) => {
+    const {page, compileUrl, memo} = opt
+    return `
+    import { PageShell } from ${JSON.stringify(require.resolve('@taro-hmr-compile/core/runtime'))}
+    ${memo ? "import React from 'react'" : ''}
+    const Page = () => <PageShell page={${JSON.stringify(page)}} compileUrl={${JSON.stringify(compileUrl)}}/>
+    export default ${memo ? 'React.memo(Page)' : 'Page'}
+    `
+}
+
+const createShell = (opt: CreateShellOpt) => {
+    if (opt.framework === 'react') return createReactShell(opt)
+    throw new Error(`unsupported framework: ${opt.framework}`)
+}
+
+const isMemoPage = (source: string) => {
+    return /\bexport\s+default\s+(?:(?:React\.)?memo|observer)\s*\(/.test(source)
+}
+
+
+interface LoaderOptions {
+    appPath: string
+    sourcePath: string
+    appConfig: AppConfig
+    framework: 'react'
+    compileUrl: string
+}
+
+const lazyCompilerLoader: LoaderDefinitionFunction<LoaderOptions> = function (source) {
+    const {appPath, framework, appConfig, sourcePath, compileUrl} = this.getOptions()
+
+    const {dir: resourceDir, name: resourceName} = path.parse(path.relative(sourcePath, this.resourcePath))
+
+    const resourcePath = path.join(resourceDir, resourceName)
+
+    const isPageEntry = getAllPages(appConfig).includes(resourcePath)
+
+    if (!isPageEntry || isPageCompiled(appPath, resourcePath)) return source
+
+    return createShell({page: resourcePath, framework, compileUrl, memo: isMemoPage(source)})
+}
+
+export default lazyCompilerLoader

package/src/constants.ts

@@ -0,0 +1,7 @@
+export const HMR_OUTPUT_PATH = 'hmr'
+
+export const HMR_PATCH_ASSET = `${HMR_OUTPUT_PATH}/patch.js`
+
+export const DEFAULT_HMR_PATCH_HISTORY_LIMIT = 20
+
+export const DEFAULT_DEBUG_NAMESPACES = 'taro-hmr-compile:*'

package/src/index.ts

@@ -0,0 +1,81 @@
+import type {IPluginContext} from '@tarojs/service'
+import type {AppConfig} from '@tarojs/taro'
+import {HMR_OUTPUT_PATH, 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 {enableLog} from './log'
+
+
+export interface WebpackHmrCompileOpt {
+    host: string
+    port: number
+    patchHistoryLimit: number
+    debug: boolean | string
+}
+
+export default (ctx: IPluginContext, pluginOpts: Partial<WebpackHmrCompileOpt>) => {
+    if (!ctx.runOpts.options?.isWatch) return
+
+    const {appPath, sourcePath, outputPath} = ctx.paths
+
+    const {framework} = ctx.initialConfig
+
+    const appConfig: AppConfig = getAppConfig(ctx)
+
+    const host = pluginOpts.host ?? '127.0.0.1'
+
+    const preferredPort = pluginOpts.port ?? 8080
+
+    const debugNamespaces = (() => {
+        if (typeof pluginOpts.debug === 'string') return pluginOpts.debug
+        return pluginOpts.debug ? DEFAULT_DEBUG_NAMESPACES : undefined
+    })()
+
+    if (debugNamespaces) enableLog(debugNamespaces)
+
+    ctx.onBuildStart(() => emptyDirFile(outputPath))
+
+    ctx.modifyRunnerOpts(({opts}) => {
+        opts.output ??= {}
+        opts.output.clean = false
+    })
+
+    ctx.modifyWebpackChain(async ({chain, webpack}) => {
+        const port = await findAvailablePort(preferredPort, host)
+
+        const compileUrl = `http://${host}:${port}/compile`
+
+        if (port !== preferredPort) console.warn(`[taro-hmr-compile] 端口 ${preferredPort} 已被占用，自动使用端口 ${port}`)
+
+        chain.optimization.usedExports(false)
+
+        chain.module
+            .rule('lazy-compiler')
+            .test(/\.[jt]sx?$/)
+            .include.add(ctx.paths.sourcePath)
+            .end()
+            .use('lazy-compiler-loader')
+            .loader(require.resolve('./compile/lazy-compiler-loader'))
+            .options({appPath, sourcePath, appConfig, framework, compileUrl})
+            .end()
+
+        chain.output
+            .set('hotUpdateChunkFilename', `${HMR_OUTPUT_PATH}/[id].[fullhash].hot-update.js`)
+            .set('hotUpdateMainFilename', `${HMR_OUTPUT_PATH}/[runtime].[fullhash].hot-update.json`)
+
+        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-plugin').use(webpack.HotModuleReplacementPlugin)
+
+        chain.plugin('hmr-patch-plugin').use(HmrPatchPlugin, [{patchHistoryLimit}])
+
+        chain.plugin('hmr-server-plugin').use(HmrServerPlugin, [{host, port}])
+    })
+}

package/src/log.ts

@@ -0,0 +1,5 @@
+import createDebug from 'debug'
+
+export const log = createDebug('taro-hmr-compile:webpack')
+
+export const enableLog = (namespaces: string) => createDebug.enable(namespaces)

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

@@ -0,0 +1,111 @@
+import type {Compilation, Compiler} from 'webpack'
+import {RawSource} from 'webpack-sources'
+import {HMR_PATCH_ASSET} from '../constants'
+import {HmrCompilerPlugin} from '../compile/hmr-compiler-plugin'
+import {HmrPatchRuntimePlugin} from './hmr-patch-runtime-plugin'
+import {HmrPatchProcessor, HmrPatchProcessorOptions} from "./hmr-patch-processor";
+
+const PLUGIN_NAME = 'HmrPatchPlugin'
+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
+
+ type HmrPatchPluginOptions = Partial<HmrPatchProcessorOptions>
+
+const isPassthroughAsset = (assetName: string) => {
+    return STYLE_ASSET_PATTERN.test(assetName) || TEMPLATE_RUNTIME_ASSET_PATTERN.test(assetName)
+}
+
+export class HmrPatchPlugin {
+
+    private previousHash: string = ''
+
+    private initialBuildDone = false
+
+    private readonly patchProcessor: HmrPatchProcessor
+
+    private readonly emittedAssetSources = new Map<string, string>()
+
+    constructor(options: HmrPatchPluginOptions) {
+        this.patchProcessor = new HmrPatchProcessor(options)
+    }
+
+    apply(compiler: Compiler) {
+        new HmrPatchRuntimePlugin().apply(compiler)
+
+        compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
+            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))
+        })
+
+        compiler.hooks.afterEmit.tap(PLUGIN_NAME, compilation => {
+            const isSuccessful = compilation.errors.length === 0 && Boolean(compilation.hash)
+            this.initialBuildDone = this.initialBuildDone || isSuccessful
+        })
+
+        compiler.hooks.watchClose.tap(PLUGIN_NAME, () => this.reset())
+    }
+
+    private processAssets(compilation: Compilation) {
+        const {previousHash: fromHash, initialBuildDone} = this
+
+        const {hash: toHash, errors: compilationErrors} = compilation
+
+        if (!toHash || compilationErrors.length > 0) return
+        // 首次编译完成过滤文件输出
+        if (!initialBuildDone) {
+            this.patchProcessor.commitBootstrapFactories(compilation)
+            compilation.getAssets().forEach(asset => {
+                if (!isPassthroughAsset(asset.name)) return
+                this.emittedAssetSources.set(asset.name, asset.source.source().toString())
+            })
+            this.previousHash = toHash
+            return this.emitPatchAsset(compilation, false)
+        }
+
+        const manifests = compilation.getAssets().filter(asset => asset.name.endsWith(HOT_UPDATE_MANIFEST_SUFFIX))
+
+        const scripts = compilation.getAssets().filter(asset => asset.name.endsWith(HOT_UPDATE_SCRIPT_SUFFIX))
+
+        this.patchProcessor.processUpdate({toHash, fromHash, manifests, scripts})
+
+        this.emitPatchAsset(compilation, true)
+
+        this.removeSupersededAssets(compilation)
+
+        this.previousHash = toHash
+    }
+
+    /** 热更新转换完成后，保留固定 patch 与发生变化的模板、平台样式资产。 */
+    private removeSupersededAssets(compilation: Compilation) {
+        compilation.getAssets().forEach(asset => {
+            if (asset.name === HMR_PATCH_ASSET) return
+            if (!isPassthroughAsset(asset.name)) return compilation.deleteAsset(asset.name)
+
+            const source = asset.source.source().toString()
+            const previousSource = this.emittedAssetSources.get(asset.name)
+            this.emittedAssetSources.set(asset.name, source)
+            if (previousSource === source) compilation.deleteAsset(asset.name)
+        })
+    }
+
+    private emitPatchAsset(compilation: Compilation, isHotUpdate: boolean) {
+        const source = new RawSource(this.patchProcessor.generate())
+        const assetInfo = {hotModuleReplacement: isHotUpdate}
+        if (compilation.getAsset(HMR_PATCH_ASSET)) compilation.updateAsset(HMR_PATCH_ASSET, source, assetInfo)
+        else compilation.emitAsset(HMR_PATCH_ASSET, source, assetInfo)
+    }
+
+    private reset() {
+        this.previousHash = ''
+        this.initialBuildDone = false
+        this.emittedAssetSources.clear()
+        this.patchProcessor.reset()
+    }
+}

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

@@ -0,0 +1,169 @@
+import {type Chunk, type Compilation,} from "webpack";
+import {
+    parseHotUpdateAssets,
+    ParseHotUpdateAssetsOptions,
+    parseChunkAsset, mergeUpdatePatches, generatePatchAssetSource,
+} from "./utils";
+import isNil from 'lodash/isNil'
+import {ModuleFactory, UpdatePatchSource} from "./types";
+import {DEFAULT_HMR_PATCH_HISTORY_LIMIT} from "../constants";
+
+interface ProcessChunkModulesOptions {
+    source: string
+    compilation: Compilation,
+    isBootstrapChunk: boolean,
+    chunk: Chunk
+}
+
+export interface HmrPatchProcessorOptions {
+    patchHistoryLimit?: number
+}
+
+interface ProcessUpdateOptions extends ParseHotUpdateAssetsOptions {
+    fromHash: string
+    toHash: string
+}
+
+type BootstrapFactories = Map<string, ModuleFactory>
+
+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()
+
+    private readonly bootstrapFactoriesByCompilation = new WeakMap<Compilation, BootstrapFactories>()
+
+    private readonly moduleHashesByFullHash: ModuleHashesByFullHash = new Map()
+
+    private recentUpdatePatches: UpdatePatchSource[] = []
+
+    private readonly opts: Partial<HmrPatchProcessorOptions>
+
+    constructor(opts: Partial<HmrPatchProcessorOptions>) {
+        this.opts = opts
+    }
+
+    private getChangedModuleIdsByFullHash(fromHash: string, toHash: string): Set<string> | undefined {
+        const fromModuleHashes = this.moduleHashesByFullHash.get(fromHash)
+
+        const toModuleHashes = this.moduleHashesByFullHash.get(toHash)
+
+        // 任一编译缺少 Hash 基线时不做过滤，避免误丢有效的 hot-update 模块。
+        if (!fromModuleHashes || !toModuleHashes) return
+
+        // 同时检查前后两次编译的模块，确保新增、修改和删除都能被识别。
+        const moduleIds = new Set(fromModuleHashes.keys())
+        toModuleHashes.forEach((_, moduleId) => moduleIds.add(moduleId))
+
+        const changedModuleIds = new Set<string>()
+        moduleIds.forEach(moduleId => {
+            const fromModuleHash = fromModuleHashes.get(moduleId)
+            const toModuleHash = toModuleHashes.get(moduleId)
+            if (!areModuleHashesEqual(fromModuleHash, toModuleHash)) changedModuleIds.add(moduleId)
+        })
+
+        return changedModuleIds
+    }
+
+    processUpdate(opt: ProcessUpdateOptions) {
+        const {fromHash, toHash} = opt
+
+        const tempPatchInfo = parseHotUpdateAssets(opt)
+
+        const changedModuleIds = this.getChangedModuleIdsByFullHash(fromHash, toHash)
+
+        const moduleFactories = (() => {
+            if (!changedModuleIds) return Array.from(tempPatchInfo.moduleFactories.values())
+            return Array.from(tempPatchInfo.moduleFactories.values()).filter(item => changedModuleIds.has(item.moduleId))
+        })()
+
+        const removedModules = (() => {
+            if (!changedModuleIds) return Array.from(tempPatchInfo.removedModules.values())
+            return Array.from(tempPatchInfo.removedModules.values()).filter(item => changedModuleIds.has(item))
+        })()
+
+        const {runtimeModules} = tempPatchInfo
+
+        this.recentUpdatePatches.push({type: 'update', moduleFactories, runtimeModules, fromHash, toHash, removedModules})
+
+        const patchHistoryLimit = Math.max(1, this.opts.patchHistoryLimit ?? DEFAULT_HMR_PATCH_HISTORY_LIMIT)
+
+        if (this.recentUpdatePatches.length <= patchHistoryLimit) return
+
+        const [oldestUpdatePatch, secondOldestUpdatePatch, ...rest] = this.recentUpdatePatches
+
+        const mergedUpdatePatch = mergeUpdatePatches(oldestUpdatePatch, secondOldestUpdatePatch)
+
+        this.recentUpdatePatches = [mergedUpdatePatch, ...rest]
+
+        this.moduleHashesByFullHash.delete(oldestUpdatePatch.toHash)
+    }
+
+    processChunkModules(opt: ProcessChunkModulesOptions) {
+        const {chunk, compilation, isBootstrapChunk, source} = opt
+        const {hash: fullHash} = compilation
+        const modules = parseChunkAsset(source)
+        modules.forEach(moduleFactory => {
+            const {moduleId, factory} = moduleFactory
+
+            if (isBootstrapChunk) {
+                const compilationFactories = this.bootstrapFactoriesByCompilation.get(compilation) ?? new Map()
+                compilationFactories.set(moduleId, {moduleId, factory})
+                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
+
+            const normalizedModuleId = String(moduleId)
+
+            // 获取模块在当前 chunk.runtime 下的 Hash，优先从 codeGenerationResults 获取，如果没有对应的代码生成结果，则回退到 chunkGraph 获取
+            const moduleHash = codeGenerationResults?.has(module, chunk.runtime)
+                ? codeGenerationResults.getHash(module, chunk.runtime)
+                : chunkGraph.getModuleHash(module, chunk.runtime)
+
+            const hashes = moduleHashes.get(normalizedModuleId) ?? new Set<string>()
+            hashes.add(moduleHash)
+            moduleHashes.set(normalizedModuleId, hashes)
+        })
+    }
+
+    commitBootstrapFactories(compilation: Compilation) {
+        this.bootstrapFactories.clear()
+        this.bootstrapFactoriesByCompilation.get(compilation)?.forEach(moduleFactory => {
+            this.bootstrapFactories.set(moduleFactory.moduleId, moduleFactory)
+        })
+        this.bootstrapFactoriesByCompilation.delete(compilation)
+    }
+
+    generate() {
+        const {bootstrapFactories, recentUpdatePatches} = this
+        return generatePatchAssetSource({bootstrapFactories, recentUpdatePatches})
+    }
+
+    reset() {
+        this.bootstrapFactories.clear()
+        this.moduleHashesByFullHash.clear()
+        this.recentUpdatePatches = []
+    }
+}