@mpxjs/webpack-plugin 2.8.39 → 2.8.40-test

package/lib/dependencies/CommonJsExtractDependency.js

@@ -0,0 +1,51 @@
+const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class CommonJsExtractDependency extends ModuleDependency {
+  constructor (request, range) {
+    super(request)
+    this.range = range
+  }
+
+  get type () {
+    return 'mpx cjs extract'
+  }
+
+  get category () {
+    return 'commonjs'
+  }
+}
+
+CommonJsExtractDependency.Template = class CommonJsExtractDependencyTemplate extends (
+  ModuleDependency.Template
+) {
+  apply (
+    dep,
+    source,
+    {
+      runtimeTemplate,
+      moduleGraph,
+      chunkGraph,
+      runtimeRequirements
+    }
+  ) {
+    let content = ''
+    if (!dep.weak) {
+      content = runtimeTemplate.moduleExports({
+        module: moduleGraph.getModule(dep),
+        chunkGraph,
+        request: dep.request,
+        weak: dep.weak,
+        runtimeRequirements
+      })
+    }
+    source.replace(dep.range[0], dep.range[1] - 1, content)
+  }
+}
+
+makeSerializable(
+  CommonJsExtractDependency,
+  '@mpxjs/webpack-plugin/lib/dependencies/CommonJsExtractDependency'
+)
+
+module.exports = CommonJsExtractDependency

package/lib/dependencies/ResolveDependency.js

@@ -1,6 +1,7 @@
 const NullDependency = require('webpack/lib/dependencies/NullDependency')
 const parseRequest = require('../utils/parse-request')
 const makeSerializable = require('webpack/lib/util/makeSerializable')
+const { matchCondition } = require('../utils/match-condition')
 
 class ResolveDependency extends NullDependency {
   constructor (resource, packageName, issuerResource, range) {
@@ -22,28 +23,29 @@ class ResolveDependency extends NullDependency {
   }
 
   getResolved () {
-    const { resource, packageName, compilation } = this
+    const { resource, packageName, compilation, issuerResource } = this
     if (!compilation) return ''
     const mpx = compilation.__mpx__
     if (!mpx) return ''
-    const { pagesMap, componentsMap, staticResourcesMap } = mpx
+    const { pagesMap, componentsMap, staticResourcesMap, partialCompile } = mpx
     const { resourcePath } = parseRequest(resource)
     const currentComponentsMap = componentsMap[packageName]
     const mainComponentsMap = componentsMap.main
     const currentStaticResourcesMap = staticResourcesMap[packageName]
     const mainStaticResourcesMap = staticResourcesMap.main
-    return pagesMap[resourcePath] || currentComponentsMap[resourcePath] || mainComponentsMap[resourcePath] || currentStaticResourcesMap[resourcePath] || mainStaticResourcesMap[resourcePath] || ''
+    const resolveResult = pagesMap[resourcePath] || currentComponentsMap[resourcePath] || mainComponentsMap[resourcePath] || currentStaticResourcesMap[resourcePath] || mainStaticResourcesMap[resourcePath] || ''
+    if (!resolveResult) {
+      if (!partialCompile || matchCondition(resourcePath, partialCompile)) {
+        compilation.errors.push(new Error(`Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
+      }
+    }
+    return resolveResult
   }
 
   // resolved可能会动态变更，需用此更新hash
   updateHash (hash, context) {
     this.resolved = this.getResolved()
-    const { resource, issuerResource, compilation } = this
-    if (this.resolved) {
-      hash.update(this.resolved)
-    } else {
-      compilation.errors.push(new Error(`Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
-    }
+    hash.update(this.resolved)
     super.updateHash(hash, context)
   }
 

package/lib/extractor.js

@@ -116,5 +116,6 @@ module.exports.pitch = async function (remainingRequest) {
     }
   }
 
+  if (!resultSource) buildInfo.isEmpty = true
   return resultSource
 }

package/lib/helpers.js

@@ -20,7 +20,15 @@ module.exports = function createHelpers (loaderContext) {
   const { mode, env } = loaderContext.getMpx() || {}
 
   function getRequire (type, part, extraOptions, index) {
-    return 'require(' + getRequestString(type, part, extraOptions, index) + ')'
+    let extract = false
+    switch (type) {
+      // eslint-disable-next-line no-fallthrough
+      case 'json':
+      case 'styles':
+      case 'template':
+        extract = true
+    }
+    return (extract ? 'require.extract(' : 'require(') + getRequestString(type, part, extraOptions, index) + ')'
   }
 
   function getImport (type, part, extraOptions, index) {

package/lib/index.js

@@ -8,7 +8,7 @@ const ReplaceDependency = require('./dependencies/ReplaceDependency')
 const NullFactory = require('webpack/lib/NullFactory')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const CommonJsAsyncDependency = require('./dependencies/CommonJsAsyncDependency')
-const harmonySpecifierTag = require('webpack/lib/dependencies/HarmonyImportDependencyParserPlugin').harmonySpecifierTag
+const CommonJsExtractDependency = require('./dependencies/CommonJsExtractDependency')
 const NormalModule = require('webpack/lib/NormalModule')
 const EntryPlugin = require('webpack/lib/EntryPlugin')
 const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
@@ -38,7 +38,6 @@ const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
 const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const RecordVueContentDependency = require('./dependencies/RecordVueContentDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
-const PartialCompilePlugin = require('./partial-compile/index')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
 const { matchCondition } = require('./utils/match-condition')
@@ -55,6 +54,7 @@ const jsonThemeCompilerPath = normalize.lib('json-compiler/theme')
 const jsonPluginCompilerPath = normalize.lib('json-compiler/plugin')
 const extractorPath = normalize.lib('extractor')
 const async = require('async')
+const { parseQuery } = require('loader-utils')
 const stringifyLoadersAndResource = require('./utils/stringify-loaders-resource')
 const emitFile = require('./utils/emit-file')
 const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE } = require('./utils/const')
@@ -167,8 +167,11 @@ class MpxWebpackPlugin {
     }, options.nativeConfig)
     options.webConfig = options.webConfig || {}
     options.partialCompile = options.mode !== 'web' && options.partialCompile
+    options.asyncSubpackageRules = options.asyncSubpackageRules || []
+    options.optimizeRenderRules = options.optimizeRenderRules || {}
     options.retryRequireAsync = options.retryRequireAsync || false
     options.enableAliRequireAsync = options.enableAliRequireAsync || false
+    options.optimizeSize = options.optimizeSize || false
     this.options = options
     // Hack for buildDependencies
     const rawResolveBuildDependencies = FileSystemInfo.prototype.resolveBuildDependencies
@@ -293,6 +296,14 @@ class MpxWebpackPlugin {
         warnings.push(`webpack options: MpxWebpackPlugin accept options.output.filename to be ${outputFilename} only, custom options.output.filename will be ignored!`)
       }
       compiler.options.output.filename = compiler.options.output.chunkFilename = outputFilename
+      if (this.options.optimizeSize) {
+        compiler.options.optimization.chunkIds = 'total-size'
+        compiler.options.optimization.moduleIds = 'natural'
+        compiler.options.optimization.mangleExports = 'size'
+        compiler.options.output.globalObject = 'g'
+        // todo chunkLoadingGlobal不具备项目唯一性，在多构建产物混编时可能存在问题，尤其在支付宝使用全局对象传递的情况下
+        compiler.options.output.chunkLoadingGlobal = 'c'
+      }
     }
 
     if (!compiler.options.node || !compiler.options.node.global) {
@@ -381,7 +392,34 @@ class MpxWebpackPlugin {
     let mpx
 
     if (this.options.partialCompile) {
-      new PartialCompilePlugin(this.options.partialCompile).apply(compiler)
+      function isResolvingPage (obj) {
+        // valid query should start with '?'
+        const query = parseQuery(obj.query || '?')
+        return query.isPage && !query.type
+      }
+
+      // new PartialCompilePlugin(this.options.partialCompile).apply(compiler)
+      compiler.resolverFactory.hooks.resolver.intercept({
+        factory: (type, hook) => {
+          hook.tap('MpxPartialCompilePlugin', (resolver) => {
+            resolver.hooks.result.tapAsync({
+              name: 'MpxPartialCompilePlugin',
+              stage: -100
+            }, (obj, resolverContext, callback) => {
+              if (obj.path.startsWith(require.resolve('./runtime/components/wx/default-page.mpx'))) {
+                return callback(null, obj)
+              }
+              if (isResolvingPage(obj) && !matchCondition(obj.path, this.options.partialCompile)) {
+                const infix = obj.query ? '&' : '?'
+                obj.query += `${infix}resourcePath=${obj.path}`
+                obj.path = require.resolve('./runtime/components/wx/default-page.mpx')
+              }
+              callback(null, obj)
+            })
+          })
+          return hook
+        }
+      })
     }
 
     const getPackageCacheGroup = packageName => {
@@ -517,6 +555,9 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(CommonJsAsyncDependency, normalModuleFactory)
       compilation.dependencyTemplates.set(CommonJsAsyncDependency, new CommonJsAsyncDependency.Template())
 
+      compilation.dependencyFactories.set(CommonJsExtractDependency, normalModuleFactory)
+      compilation.dependencyTemplates.set(CommonJsExtractDependency, new CommonJsExtractDependency.Template())
+
       compilation.dependencyFactories.set(RecordVueContentDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordVueContentDependency, new RecordVueContentDependency.Template())
     })
@@ -595,6 +636,9 @@ class MpxWebpackPlugin {
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
           enableRequireAsync: this.options.mode === 'wx' || (this.options.mode === 'ali' && this.options.enableAliRequireAsync),
+          partialCompile: this.options.partialCompile,
+          asyncSubpackageRules: this.options.asyncSubpackageRules,
+          optimizeRenderRules: this.options.optimizeRenderRules,
           pathHash: (resourcePath) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
               return hash(path.relative(this.options.projectRoot, resourcePath))
@@ -656,7 +700,15 @@ class MpxWebpackPlugin {
             mpx.extractedFilesCache.set(resource, file)
             return file
           },
-          recordResourceMap: ({ resourcePath, resourceType, outputPath, packageRoot = '', recordOnly, warn, error }) => {
+          recordResourceMap: ({
+            resourcePath,
+            resourceType,
+            outputPath,
+            packageRoot = '',
+            recordOnly,
+            warn,
+            error
+          }) => {
             const packageName = packageRoot || 'main'
             const resourceMap = mpx[`${resourceType}sMap`] || mpx.otherResourcesMap
             const currentResourceMap = resourceMap.main ? resourceMap[packageName] = resourceMap[packageName] || {} : resourceMap
@@ -876,6 +928,17 @@ class MpxWebpackPlugin {
       })
 
       compilation.hooks.finishModules.tap('MpxWebpackPlugin', (modules) => {
+        // 移除extractor抽取后的空模块
+        for (const module of modules) {
+          if (module.buildInfo.isEmpty) {
+            for (const connection of moduleGraph.getIncomingConnections(module)) {
+              if (connection.dependency.type === 'mpx cjs extract') {
+                connection.weak = true
+                connection.dependency.weak = true
+              }
+            }
+          }
+        }
         // 自动跟进分包配置修改splitChunksPlugin配置
         if (splitChunksPlugin) {
           let needInit = false
@@ -999,13 +1062,22 @@ class MpxWebpackPlugin {
             let request = expr.arguments[0].value
             const range = expr.arguments[0].range
             const context = parser.state.module.context
-            const { queryObj } = parseRequest(request)
-            if (queryObj.root) {
+            const { queryObj, resourcePath } = parseRequest(request)
+            let tarRoot = queryObj.root
+            if (!tarRoot && mpx.asyncSubpackageRules) {
+              for (const item of mpx.asyncSubpackageRules) {
+                if (matchCondition(resourcePath, item)) {
+                  tarRoot = item.root
+                  break
+                }
+              }
+            }
+            if (tarRoot) {
               // 删除root query
-              request = addQuery(request, {}, false, ['root'])
+              if (queryObj.root) request = addQuery(request, {}, false, ['root'])
               // 目前仅wx和ali支持require.async，ali需要开启enableAliRequireAsync，其余平台使用CommonJsAsyncDependency进行模拟抹平
               if (mpx.enableRequireAsync) {
-                const dep = new DynamicEntryDependency(request, 'export', '', queryObj.root, '', context, range, {
+                const dep = new DynamicEntryDependency(request, 'export', '', tarRoot, '', context, range, {
                   isRequireAsync: true,
                   retryRequireAsync: !!this.options.retryRequireAsync
                 })
@@ -1040,6 +1112,31 @@ class MpxWebpackPlugin {
             stage: -1000
           }, (expr, calleeMembers, callExpr) => requireAsyncHandler(callExpr, calleeMembers, expr.arguments))
 
+        const requireExtractHandler = (expr, members, args) => {
+          if (members[0] === 'extract') {
+            const request = expr.arguments[0].value
+            const range = expr.range
+            const dep = new CommonJsExtractDependency(request, range)
+            parser.state.current.addDependency(dep)
+            if (args) parser.walkExpressions(args)
+            return true
+          }
+        }
+
+        parser.hooks.callMemberChain
+          .for('require')
+          .tap({
+            name: 'MpxWebpackPlugin',
+            stage: -2000
+          }, (expr, members) => requireExtractHandler(expr, members))
+
+        parser.hooks.callMemberChainOfCallMemberChain
+          .for('require')
+          .tap({
+            name: 'MpxWebpackPlugin',
+            stage: -2000
+          }, (expr, calleeMembers, callExpr) => requireExtractHandler(callExpr, calleeMembers, expr.arguments))
+
         // hack babel polyfill global
         parser.hooks.statementIf.tap('MpxWebpackPlugin', (expr) => {
           if (/core-js.+microtask/.test(parser.state.module.resource)) {
@@ -1180,56 +1277,56 @@ class MpxWebpackPlugin {
           }
 
           // 为跨平台api调用注入srcMode参数指导api运行时转换
-          const apiBlackListMap = [
-            'createApp',
-            'createPage',
-            'createComponent',
-            'createStore',
-            'createStoreWithThis',
-            'mixin',
-            'injectMixins',
-            'toPureObject',
-            'observable',
-            'watch',
-            'use',
-            'set',
-            'remove',
-            'delete',
-            'setConvertRule',
-            'getMixin',
-            'getComputed',
-            'implement'
-          ].reduce((map, api) => {
-            map[api] = true
-            return map
-          }, {})
-
-          const injectSrcModeForTransApi = (expr, members) => {
-            // members为空数组时，callee并不是memberExpression
-            if (!members.length) return
-            const callee = expr.callee
-            const args = expr.arguments
-            const name = callee.object.name
-            const { queryObj, resourcePath } = parseRequest(parser.state.module.resource)
-            const localSrcMode = queryObj.mode
-            const globalSrcMode = mpx.srcMode
-            const srcMode = localSrcMode || globalSrcMode
-
-            if (srcMode === globalSrcMode || apiBlackListMap[callee.property.name || callee.property.value] || (name !== 'mpx' && name !== 'wx') || (name === 'wx' && !matchCondition(resourcePath, this.options.transMpxRules))) return
-
-            const srcModeString = `__mpx_src_mode_${srcMode}__`
-            const dep = new InjectDependency({
-              content: args.length
-                ? `, ${JSON.stringify(srcModeString)}`
-                : JSON.stringify(srcModeString),
-              index: expr.end - 1
-            })
-            parser.state.current.addPresentationalDependency(dep)
-          }
-
-          parser.hooks.callMemberChain.for(harmonySpecifierTag).tap('MpxWebpackPlugin', injectSrcModeForTransApi)
-          parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
-          parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          // const apiBlackListMap = [
+          //   'createApp',
+          //   'createPage',
+          //   'createComponent',
+          //   'createStore',
+          //   'createStoreWithThis',
+          //   'mixin',
+          //   'injectMixins',
+          //   'toPureObject',
+          //   'observable',
+          //   'watch',
+          //   'use',
+          //   'set',
+          //   'remove',
+          //   'delete',
+          //   'setConvertRule',
+          //   'getMixin',
+          //   'getComputed',
+          //   'implement'
+          // ].reduce((map, api) => {
+          //   map[api] = true
+          //   return map
+          // }, {})
+          //
+          // const injectSrcModeForTransApi = (expr, members) => {
+          //   // members为空数组时，callee并不是memberExpression
+          //   if (!members.length) return
+          //   const callee = expr.callee
+          //   const args = expr.arguments
+          //   const name = callee.object.name
+          //   const { queryObj, resourcePath } = parseRequest(parser.state.module.resource)
+          //   const localSrcMode = queryObj.mode
+          //   const globalSrcMode = mpx.srcMode
+          //   const srcMode = localSrcMode || globalSrcMode
+          //
+          //   if (srcMode === globalSrcMode || apiBlackListMap[callee.property.name || callee.property.value] || (name !== 'mpx' && name !== 'wx') || (name === 'wx' && !matchCondition(resourcePath, this.options.transMpxRules))) return
+          //
+          //   const srcModeString = `__mpx_src_mode_${srcMode}__`
+          //   const dep = new InjectDependency({
+          //     content: args.length
+          //       ? `, ${JSON.stringify(srcModeString)}`
+          //       : JSON.stringify(srcModeString),
+          //     index: expr.end - 1
+          //   })
+          //   parser.state.current.addPresentationalDependency(dep)
+          // }
+          //
+          // parser.hooks.callMemberChain.for(harmonySpecifierTag).tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          // parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          // parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
         }
       }
       normalModuleFactory.hooks.parser.for('javascript/auto').tap('MpxWebpackPlugin', normalModuleFactoryParserCallback)
@@ -1259,6 +1356,8 @@ class MpxWebpackPlugin {
           chunkLoadingGlobal
         } = compilation.outputOptions
 
+        const chunkLoadingGlobalStr = JSON.stringify(chunkLoadingGlobal)
+
         function getTargetFile (file) {
           let targetFile = file
           const queryStringIdx = targetFile.indexOf('?')
@@ -1278,7 +1377,7 @@ class MpxWebpackPlugin {
 
           const originalSource = compilation.assets[chunkFile]
           const source = new ConcatSource()
-          source.add(`\nvar ${globalObject} = ${globalObject} || {};\n\n`)
+          source.add(`\nvar ${globalObject} = {};\n`)
 
           relativeChunks.forEach((relativeChunk, index) => {
             const relativeChunkFile = relativeChunk.files.values().next().value
@@ -1295,16 +1394,16 @@ class MpxWebpackPlugin {
                 if (compilation.options.entry[chunk.name]) {
                   // 在rootChunk中挂载jsonpCallback
                   source.add('// process ali subpackages runtime in root chunk\n' +
-                    'var context = (function() { return this })() || Function("return this")();\n\n')
-                  source.add(`context[${JSON.stringify(chunkLoadingGlobal)}] = ${globalObject}[${JSON.stringify(chunkLoadingGlobal)}] = require("${relativePath}");\n`)
+                    'var context = (function() { return this })() || Function("return this")();\n')
+                  source.add(`context[${chunkLoadingGlobalStr}] = ${globalObject}[${chunkLoadingGlobalStr}] = require("${relativePath}");\n`)
                 } else {
                   // 其余chunk中通过context全局传递runtime
                   source.add('// process ali subpackages runtime in other chunk\n' +
-                    'var context = (function() { return this })() || Function("return this")();\n\n')
-                  source.add(`${globalObject}[${JSON.stringify(chunkLoadingGlobal)}] = context[${JSON.stringify(chunkLoadingGlobal)}];\n`)
+                    'var context = (function() { return this })() || Function("return this")();\n')
+                  source.add(`${globalObject}[${chunkLoadingGlobalStr}] = context[${chunkLoadingGlobalStr}];\n`)
                 }
               } else {
-                source.add(`${globalObject}[${JSON.stringify(chunkLoadingGlobal)}] = require("${relativePath}");\n`)
+                source.add(`${globalObject}[${chunkLoadingGlobalStr}] = require("${relativePath}");\n`)
               }
             } else {
               source.add(`require("${relativePath}");\n`)
@@ -1312,10 +1411,11 @@ class MpxWebpackPlugin {
           })
 
           if (isRuntime) {
-            source.add('var context = (function() { return this })() || Function("return this")();\n')
-            source.add(`
+            if (mpx.mode === 'ali' || mpx.mode === 'qq') {
+              source.add(`
 // Fix babel runtime in some quirky environment like ali & qq dev.
 try {
+  var context = (function() { return this })() || Function("return this")();
   if(!context.console){
     context.console = console;
     context.setInterval = setInterval;
@@ -1356,8 +1456,9 @@ try {
   }
 } catch(e){
 }\n`)
+            }
             source.add(originalSource)
-            source.add(`\nmodule.exports = ${globalObject}[${JSON.stringify(chunkLoadingGlobal)}];\n`)
+            source.add(`\nmodule.exports = ${globalObject}[${chunkLoadingGlobalStr}];\n`)
           } else {
             source.add(originalSource)
           }
@@ -1415,8 +1516,8 @@ try {
       })
 
       const typeLoaderProcessInfo = {
-        styles: ['css-loader', wxssLoaderPath, styleCompilerPath],
-        template: ['html-loader', wxmlLoaderPath, templateCompilerPath]
+        styles: ['node_modules/css-loader', wxssLoaderPath, styleCompilerPath],
+        template: ['node_modules/html-loader', wxmlLoaderPath, templateCompilerPath]
       }
 
       // 应用过rules后，注入mpx相关资源编译loader
@@ -1479,15 +1580,15 @@ try {
         if (mpx.mode === 'web') {
           const mpxStyleOptions = queryObj.mpxStyleOptions
           const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
-          const isPitcherRequest = firstLoader.includes('vue-loader/lib/loaders/pitcher')
+          const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher')
           let cssLoaderIndex = -1
           let vueStyleLoaderIndex = -1
           let mpxStyleLoaderIndex = -1
           loaders.forEach((loader, index) => {
             const currentLoader = toPosix(loader.loader)
-            if (currentLoader.includes('css-loader') && cssLoaderIndex === -1) {
+            if (currentLoader.includes('node_modules/css-loader') && cssLoaderIndex === -1) {
               cssLoaderIndex = index
-            } else if (currentLoader.includes('vue-loader/lib/loaders/stylePostLoader') && vueStyleLoaderIndex === -1) {
+            } else if (currentLoader.includes('node_modules/vue-loader/lib/loaders/stylePostLoader') && vueStyleLoaderIndex === -1) {
               vueStyleLoaderIndex = index
             } else if (currentLoader.includes(styleCompilerPath) && mpxStyleLoaderIndex === -1) {
               mpxStyleLoaderIndex = index

package/lib/json-compiler/helper.js

@@ -6,6 +6,7 @@ const parseRequest = require('../utils/parse-request')
 const addQuery = require('../utils/add-query')
 const loaderUtils = require('loader-utils')
 const resolve = require('../utils/resolve')
+const { matchCondition } = require('../utils/match-condition')
 
 module.exports = function createJSONHelper ({ loaderContext, emitWarning, customGetDynamicEntry }) {
   const mpx = loaderContext.getMpx()
@@ -17,9 +18,11 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
   const getOutputPath = mpx.getOutputPath
   const mode = mpx.mode
   const enableRequireAsync = mpx.enableRequireAsync
+  const asyncSubpackageRules = mpx.asyncSubpackageRules
 
   const isUrlRequest = r => isUrlRequestRaw(r, root, externals)
   const urlToRequest = r => loaderUtils.urlToRequest(r)
+  const isScript = ext => /\.(ts|js)$/.test(ext)
 
   const dynamicEntryMap = new Map()
 
@@ -45,23 +48,33 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
     if (resolveMode === 'native') {
       component = urlToRequest(component)
     }
-
     resolve(context, component, loaderContext, (err, resource, info) => {
       if (err) return callback(err)
       const { resourcePath, queryObj } = parseRequest(resource)
-
+      let placeholder = null
       if (queryObj.root) {
         // 删除root query
         resource = addQuery(resource, {}, false, ['root'])
         // 目前只有微信支持分包异步化
-        if (enableRequireAsync) tarRoot = queryObj.root
+        if (enableRequireAsync) {
+          tarRoot = queryObj.root
+        }
+      } else if (!queryObj.root && asyncSubpackageRules && enableRequireAsync) {
+        for (const item of asyncSubpackageRules) {
+          if (matchCondition(resourcePath, item)) {
+            tarRoot = item.root
+            placeholder = item.placeholder
+            break
+          }
+        }
       }
+
       const parsed = path.parse(resourcePath)
       const ext = parsed.ext
       const resourceName = path.join(parsed.dir, parsed.name)
 
       if (!outputPath) {
-        if (ext === '.js' && resourceName.includes('node_modules') && mode !== 'web') {
+        if (isScript(ext) && resourceName.includes('node_modules') && mode !== 'web') {
           let root = info.descriptionFileRoot
           let name = 'nativeComponent'
           if (info.descriptionFileData) {
@@ -79,12 +92,12 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
           outputPath = getOutputPath(resourcePath, 'component')
         }
       }
-      if (ext === '.js' && mode !== 'web') {
+      if (isScript(ext) && mode !== 'web') {
         resource = `!!${nativeLoaderPath}!${resource}`
       }
 
       const entry = getDynamicEntry(resource, 'component', outputPath, tarRoot, relativePath)
-      callback(null, entry)
+      callback(null, entry, tarRoot, placeholder)
     })
   }
 
@@ -101,7 +114,9 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
     // 增加 page 标识
     page = addQuery(page, { isPage: true })
     resolve(context, page, loaderContext, (err, resource) => {
-      if (err) return callback(err)
+      if (err) {
+        return callback(err)
+      }
       const { resourcePath, queryObj: { isFirst } } = parseRequest(resource)
       const ext = path.extname(resourcePath)
       let outputPath
@@ -117,14 +132,15 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
           outputPath = /^(.*?)(\.[^.]*)?$/.exec(relative)[1]
         }
       }
-      if (ext === '.js' && mode !== 'web') {
+      if (isScript(ext) && mode !== 'web') {
         resource = `!!${nativeLoaderPath}!${resource}`
       }
       const entry = getDynamicEntry(resource, 'page', outputPath, tarRoot, publicPath + tarRoot)
       const key = [resourcePath, outputPath, tarRoot].join('|')
       callback(null, entry, {
         isFirst,
-        key
+        key,
+        resource
       })
     })
   }