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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taro-hmr-compile/plugin-webpack",
-  "version": "0.0.1-alpha.8",
+  "version": "0.0.1",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -34,6 +34,7 @@
     "@types/babel__template": "^7.4.4",
     "@types/babel__traverse": "^7.28.0",
     "@types/debug": "^4.1.13",
+    "@types/lodash": "^4.17.26",
     "@types/node": "^22.20.1",
     "typescript": "^5.8.2",
     "webpack": "^5.110.3"
@@ -44,8 +45,9 @@
     "@babel/template": "^7.29.7",
     "@babel/traverse": "^7.29.8",
     "@babel/types": "^7.29.8",
-    "@taro-hmr-compile/core": "0.0.1-alpha.8",
+    "@taro-hmr-compile/core": "0.0.1",
     "debug": "^4.4.3",
+    "lodash": "^4.18.1",
     "tapable": "^2.3.3",
     "webpack-sources": "^3.5.1"
   },

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

@@ -22,22 +22,29 @@ export const injectAppHmrRuntime = (source: string, debugNamespaces = '') => {
     const ast = parser.parse(source, {sourceType: 'module'})
 
     const buildHmrCode = template.statements(`
-      import { hmrState, mergePatches, enableLog as enableHmrCoreLog } from ${JSON.stringify(CORE_RUNTIME_REQUEST)}
+      import { updatePatchContext, mergePatches, enableLog as enableHmrCoreLog } from ${JSON.stringify(CORE_RUNTIME_REQUEST)}
       import { log, enableLog as enableHmrWebpackLog } from ${JSON.stringify(LOG_REQUEST)}
       enableHmrCoreLog(${JSON.stringify(debugNamespaces)})
       enableHmrWebpackLog(${JSON.stringify(debugNamespaces)})
       globalThis.log = log.extend('runtime')
+      updatePatchContext.initialize(${webpack.RuntimeGlobals.getFullHash}())
       globalThis.miniHmrApplyPatch = async (patches)=>{
+        let transaction
         try {
           const { miniHmr } = __webpack_require__
           const bootstrapPatch = patches.find(patch => patch.type === 'bootstrap')
+          const shouldApplyBootstrapPatch = miniHmr.shouldApplyBootstrapPatch(bootstrapPatch)
+          const currentHash = ${webpack.RuntimeGlobals.getFullHash}()
+          const updatePatch = mergePatches(currentHash, patches)
 
-          if (miniHmr.shouldApplyBootstrapPatch(bootstrapPatch)) miniHmr.applyBootstrapPatch(bootstrapPatch)
+          if (shouldApplyBootstrapPatch) miniHmr.applyBootstrapPatch(bootstrapPatch)
+          if (!updatePatch) return
 
-          const updatePatch = mergePatches(${webpack.RuntimeGlobals.getFullHash}(), patches)
-          hmrState.setLastFullHash(updatePatch?.toHash ?? ${webpack.RuntimeGlobals.getFullHash}())
+          transaction = updatePatchContext.beginTransaction({fromHash: currentHash,toHash: updatePatch.toHash})
           await miniHmr.applyUpdatePatch(updatePatch)
+          updatePatchContext.completeTransaction(transaction.id)
         } catch (error) {
+          if (transaction) updatePatchContext.abortTransaction(transaction.id)
           console.error('[taro-hmr-compile] patch apply failed', error)
           return Promise.resolve()
         }
@@ -75,6 +82,26 @@ export const transformPageConfig = (source: string, sourceFileName?: string) =>
         })
     }
 
+    const isHotAcceptCall = (node: t.Node | null | undefined) => {
+        if (!t.isCallExpression(node)) return false
+        const {callee} = node
+        if (!t.isMemberExpression(callee) || !t.isIdentifier(callee.property, {name: 'accept'})) return false
+        const hot = callee.object
+        return t.isMemberExpression(hot) && t.isIdentifier(hot.object, {name: 'module'}) && t.isIdentifier(hot.property, {name: 'hot'})
+    }
+
+    const hasHotAccept = (programPath: NodePath<t.Program>) => {
+        return programPath.node.body.some(statement => {
+            if (t.isExpressionStatement(statement)) return isHotAcceptCall(statement.expression)
+            if (!t.isIfStatement(statement)) return false
+
+            const {consequent} = statement
+            if (t.isExpressionStatement(consequent)) return isHotAcceptCall(consequent.expression)
+            if (!t.isBlockStatement(consequent)) return false
+            return consequent.body.some(node => t.isExpressionStatement(node) && isHotAcceptCall(node.expression))
+        })
+    }
+
     traverse(ast, {
         Program(programPath) {
 
@@ -92,6 +119,7 @@ export const transformPageConfig = (source: string, sourceFileName?: string) =>
 
             // 判断是否存在 withHmrPageConfig 引用
             const hasWithHmrPageConfigBinding = programPath.scope.hasBinding(WITH_HMR_PAGE_CONFIG)
+            const shouldInjectHotAccept = !hasHotAccept(programPath)
 
             // 生成 withHmrPageConfig 的别名
             const wrapperIdentifier = hasWithHmrPageConfigBinding ? programPath.scope.generateUidIdentifier(WITH_HMR_PAGE_CONFIG) : t.identifier(WITH_HMR_PAGE_CONFIG)
@@ -102,24 +130,32 @@ export const transformPageConfig = (source: string, sourceFileName?: string) =>
                 return template.statement(`import { ${WITH_HMR_PAGE_CONFIG} as %%WRAPPER%% } from ${JSON.stringify(CORE_RUNTIME_REQUEST)};`)({WRAPPER: wrapperIdentifier})
             })()
 
+            let transformedPageConfig = false
+
             programPath.traverse({
                 CallExpression(CallExpressionPath) {
                     const {node: CallExpressionNode} = CallExpressionPath
                     if (!t.isIdentifier(CallExpressionNode.callee, {name: CREATE_PAGE_CONFIG})) return
                     const [_, pageName] = CallExpressionNode.arguments
-                    const wrappedPageConfig = template.expression(`%%WRAPPER%%(%%PAGE_CONFIG%%, %%PAGE_NAME%%)`)({
+                    const wrappedPageConfig = template.expression(`%%WRAPPER%%(%%PAGE_CONFIG%%, %%PAGE_NAME%%, typeof module !== 'undefined' ? module.hot : undefined)`)({
                         WRAPPER: wrapperIdentifier,
                         PAGE_CONFIG: CallExpressionNode,
                         PAGE_NAME: pageName,
                     })
 
-                    if (!hasImportWithHmrPageConfig(programPath)) programPath.unshiftContainer('body', runtimeImport)
-
                     CallExpressionPath.replaceWith(wrappedPageConfig)
                     CallExpressionPath.skip()
+                    transformedPageConfig = true
                 }
             })
 
+            if (!transformedPageConfig) return
+
+            programPath.unshiftContainer('body', runtimeImport)
+            if (shouldInjectHotAccept) {
+                programPath.pushContainer('body', template.statement(`if (typeof module !== 'undefined' && module.hot) module.hot.accept();`)())
+            }
+
         },
     })
 

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

@@ -20,18 +20,21 @@ interface TaroNormalModule {
     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]>
 
-type ChunkModulesRendered = SyncHook<[source: string, isPageChunk: boolean]>
+interface ChunkModulesRenderedOptions {
+    source: string
+    isBootstrapChunk: boolean
+    chunk: Chunk
+}
+
+type ChunkModulesRendered = SyncHook<[options: ChunkModulesRenderedOptions]>
 
 export interface HmrCompilerHooks {
     compileRequested: CompileRequested
@@ -56,8 +59,6 @@ export class HmrCompilerPlugin {
 
     private compiler?: Compiler
 
-    private hasCompletedInitialBuild = false
-
     // 页面编译请求可能在任意时刻到达。先排队到下一轮 watchRun，避免与正在执行的编译相互覆盖。
     private readonly pendingFiles = new Set<string>()
 
@@ -80,7 +81,7 @@ export class HmrCompilerPlugin {
 
     static getCompilationHooks(compilation: Compilation): HmrCompilationHooks {
         if (!HmrCompilerPlugin.compilationHooksMap.get(compilation)) {
-            const chunkModulesRendered: ChunkModulesRendered = new SyncHook(['source', 'isBootstrapChunk'])
+            const chunkModulesRendered: ChunkModulesRendered = new SyncHook(['options'])
             HmrCompilerPlugin.compilationHooksMap.set(compilation, {chunkModulesRendered})
         }
         return HmrCompilerPlugin.compilationHooksMap.get(compilation)!
@@ -134,7 +135,7 @@ export class HmrCompilerPlugin {
             // 因而 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().toString(), isBootstrapChunk)
+                hmrHooks.chunkModulesRendered.call({source: source.source().toString(), isBootstrapChunk, chunk})
                 return isBootstrapChunk ? new RawSource('{}') : source
             })
 
@@ -167,17 +168,6 @@ export class HmrCompilerPlugin {
                 },
             )
 
-            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 的请求不会被清理。
@@ -204,23 +194,8 @@ export class HmrCompilerPlugin {
         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/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

@@ -9,14 +9,16 @@ interface CreateShellOpt {
     page: string
     framework: 'react'
     compileUrl: string
+    memo: boolean
 }
 
 export const createReactShell = (opt: CreateShellOpt) => {
-    const {page, compileUrl} = opt
+    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 Page
+    export default ${memo ? 'React.memo(Page)' : 'Page'}
     `
 }
 
@@ -25,6 +27,10 @@ const createShell = (opt: CreateShellOpt) => {
     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
@@ -32,20 +38,29 @@ 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
 
-    return createShell({page: resourcePath, framework, compileUrl})
+    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)})
 }
 
 export default lazyCompilerLoader

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 ??= {}
@@ -50,6 +57,8 @@ export default (ctx: IPluginContext, pluginOpts: Partial<WebpackHmrCompileOpt>)
 
         if (port !== preferredPort) console.warn(`[taro-hmr-compile] 端口 ${preferredPort} 已被占用，自动使用端口 ${port}`)
 
+        chain.optimization.usedExports(false)
+
         chain.module
             .rule('lazy-compiler')
             .test(/\.[jt]sx?$/)
@@ -57,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
@@ -66,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}])