diff --git a/packages/taro-loader/src/app.ts b/packages/taro-loader/src/app.ts
index ce3adcb40887..bdb898898841 100644
--- a/packages/taro-loader/src/app.ts
+++ b/packages/taro-loader/src/app.ts
@@ -6,9 +6,8 @@ import { stringifyRequest } from './util'
 
 import type * as webpack from 'webpack'
 
-export default function (this: webpack.LoaderContext<any>, source: string) {
+export default function (this: webpack.LoaderContext<any>, source: string, map?: any) {
   const stringify = (s: string): string => stringifyRequest(this, s)
-
   const options = this.getOptions()
   const { importFrameworkStatement, frameworkArgs, creator, creatorLocation, modifyInstantiate } = options.loaderMeta
   const config = JSON.stringify(options.config)
@@ -17,7 +16,10 @@ export default function (this: webpack.LoaderContext<any>, source: string) {
   const pxTransformConfig = options.pxTransformConfig
   const { globalObject } = this._compilation?.outputOptions || { globalObject: 'wx' }
   const entryCacheLoader = path.join(__dirname, 'entry-cache.js') + '?name=app'
-  entryCache.set('app', source)
+  entryCache.set('app', {
+    source,
+    map
+  })
 
   const prerender = `
 if (typeof PRERENDER !== 'undefined') {
diff --git a/packages/taro-loader/src/component.ts b/packages/taro-loader/src/component.ts
index b3cf55457301..2cfea2dac2ea 100644
--- a/packages/taro-loader/src/component.ts
+++ b/packages/taro-loader/src/component.ts
@@ -5,7 +5,7 @@ import { stringifyRequest } from './util'
 
 import type * as webpack from 'webpack'
 
-export default function (this: webpack.LoaderContext<any>, source: string) {
+export default function (this: webpack.LoaderContext<any>, source: string, map?: any) {
   const options = this.getOptions()
   const stringify = (s: string): string => stringifyRequest(this, s)
   const pageName = options.name
@@ -13,7 +13,10 @@ export default function (this: webpack.LoaderContext<any>, source: string) {
   // raw is a placeholder loader to locate changed .vue resource
   const raw = path.join(__dirname, 'raw.js')
   const entryCacheLoader = path.join(__dirname, 'entry-cache.js') + `?name=${pageName}`
-  entryCache.set(pageName, source)
+  entryCache.set(pageName, {
+    source,
+    map
+  })
   const componentPath = isNeedRawLoader
     ? ['!', raw, entryCacheLoader, this.resourcePath].join('!')
     : ['!', entryCacheLoader, this.resourcePath].join('!')
diff --git a/packages/taro-loader/src/entry-cache.ts b/packages/taro-loader/src/entry-cache.ts
index d85bd9e01dd5..bdb52b783c81 100644
--- a/packages/taro-loader/src/entry-cache.ts
+++ b/packages/taro-loader/src/entry-cache.ts
@@ -1,10 +1,12 @@
-export const entryCache = new Map<string, string>()
+export const entryCache = new Map<string, any>()
 
 export default function () {
+  const callback = this.async()
   const { name } = this.getOptions()
   if (name && entryCache.has(name)) {
     const content = entryCache.get(name)
-    entryCache.delete(name)
-    return content
+    // just in case, delete cache in next tick
+    setImmediate(() => entryCache.delete(name))
+    callback(null, content!.source, content!.map)
   }
 }
diff --git a/packages/taro-loader/src/independentPage.ts b/packages/taro-loader/src/independentPage.ts
index 00236fd7bd5b..423511838cd7 100644
--- a/packages/taro-loader/src/independentPage.ts
+++ b/packages/taro-loader/src/independentPage.ts
@@ -11,7 +11,7 @@ interface PageConfig {
   path: string
 }
 
-export default function (this: webpack.LoaderContext<any>, source: string) {
+export default function (this: webpack.LoaderContext<any>, source: string, map?: any) {
   const options = this.getOptions()
   const config = getPageConfig(options.config, this.resourcePath)
   const configString = JSON.stringify(config)
@@ -31,7 +31,10 @@ export default function (this: webpack.LoaderContext<any>, source: string) {
   const frameworkArgsCopy = frameworkArgsArray.join(',')
   // raw is a placeholder loader to locate changed .vue resource
   const entryCacheLoader = path.join(__dirname, 'entry-cache.js') + `?name=${pageName}`
-  entryCache.set(pageName, source)
+  entryCache.set(pageName, {
+    source,
+    map
+  })
   const raw = path.join(__dirname, 'raw.js')
   const componentPath = isNeedRawLoader
     ? ['!', raw, entryCacheLoader, this.resourcePath].join('!')
diff --git a/packages/taro-loader/src/native-component.ts b/packages/taro-loader/src/native-component.ts
index 359625c68b38..0d449d23bc0a 100644
--- a/packages/taro-loader/src/native-component.ts
+++ b/packages/taro-loader/src/native-component.ts
@@ -6,7 +6,7 @@ import { stringifyRequest } from './util'
 
 import type * as webpack from 'webpack'
 
-export default function (this: webpack.LoaderContext<any>, source: string) {
+export default function (this: webpack.LoaderContext<any>, source: string, map?: any) {
   const options = this.getOptions()
   const { loaderMeta = {}, config: loaderConfig, isNewBlended = false, runtimePath } = options
   const { importFrameworkStatement, frameworkArgs, isNeedRawLoader, creatorLocation } = loaderMeta
@@ -18,7 +18,10 @@ export default function (this: webpack.LoaderContext<any>, source: string) {
   const behaviorsName = options.behaviorsName
   // raw is a placeholder loader to locate changed .vue resource
   const entryCacheLoader = path.join(__dirname, 'entry-cache.js') + `?name=${pageName}`
-  entryCache.set(pageName, source)
+  entryCache.set(pageName, {
+    source,
+    map
+  })
   const raw = path.join(__dirname, 'raw.js')
   const componentPath = isNeedRawLoader
     ? ['!', raw, entryCacheLoader, this.resourcePath].join('!')
diff --git a/packages/taro-loader/src/native-page.ts b/packages/taro-loader/src/native-page.ts
index c5bd6e8ea697..b688668b6a44 100644
--- a/packages/taro-loader/src/native-page.ts
+++ b/packages/taro-loader/src/native-page.ts
@@ -6,7 +6,7 @@ import { stringifyRequest } from './util'
 
 import type * as webpack from 'webpack'
 
-export default function (this: webpack.LoaderContext<any>, source: string) {
+export default function (this: webpack.LoaderContext<any>, source: string, map?: any) {
   const options = this.getOptions()
   const { importFrameworkStatement, frameworkArgs, isNeedRawLoader, creatorLocation } = options.loaderMeta
   const { config: loaderConfig } = options
@@ -17,7 +17,10 @@ export default function (this: webpack.LoaderContext<any>, source: string) {
   const behaviorsName = options.behaviorsName
   // raw is a placeholder loader to locate changed .vue resource
   const entryCacheLoader = path.join(__dirname, 'entry-cache.js') + `?name=${pageName}`
-  entryCache.set(pageName, source)
+  entryCache.set(pageName, {
+    source,
+    map
+  })
   const raw = path.join(__dirname, 'raw.js')
   const componentPath = isNeedRawLoader
     ? ['!', raw, entryCacheLoader, this.resourcePath].join('!')
diff --git a/packages/taro-loader/src/page.ts b/packages/taro-loader/src/page.ts
index 0e5f99080d22..59c50b31b39c 100644
--- a/packages/taro-loader/src/page.ts
+++ b/packages/taro-loader/src/page.ts
@@ -12,7 +12,7 @@ interface PageConfig {
   path: string
 }
 
-export default function (this: webpack.LoaderContext<any>, source: string) {
+export default function (this: webpack.LoaderContext<any>, source: string, map?: any) {
   const options = this.getOptions()
   const { config: loaderConfig } = options
   const config = getPageConfig(loaderConfig, this.resourcePath)
@@ -23,7 +23,10 @@ export default function (this: webpack.LoaderContext<any>, source: string) {
   const { isNeedRawLoader, modifyInstantiate } = options.loaderMeta
   // raw is a placeholder loader to locate changed .vue resource
   const entryCacheLoader = path.join(__dirname, 'entry-cache.js') + `?name=${pageName}`
-  entryCache.set(pageName, source)
+  entryCache.set(pageName, {
+    source,
+    map
+  })
   const raw = path.join(__dirname, 'raw.js')
   const componentPath = isNeedRawLoader
     ? ['!', raw, entryCacheLoader, this.resourcePath].join('!')