@mpxjs/webpack-plugin 2.7.8 → 2.7.11

package/lib/dependencies/CommonJsAsyncDependency.js

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

package/lib/dependencies/DynamicEntryDependency.js

@@ -3,15 +3,19 @@ const makeSerializable = require('webpack/lib/util/makeSerializable')
 const path = require('path')
 const addQuery = require('../utils/add-query')
 const toPosix = require('../utils/to-posix')
+const async = require('async')
+const parseRequest = require('../utils/parse-request')
+const { MPX_CURRENT_CHUNK } = require('../utils/const')
 
 class DynamicEntryDependency extends NullDependency {
-  constructor (resource, entryType, outputPath = '', packageRoot = '', relativePath = '', range) {
+  constructor (request, entryType, outputPath = '', packageRoot = '', relativePath = '', context = '', range) {
     super()
-    this.resource = resource
+    this.request = request
     this.entryType = entryType
     this.outputPath = outputPath
     this.packageRoot = packageRoot
     this.relativePath = relativePath
+    this.context = context
     this.range = range
   }
 
@@ -20,57 +24,78 @@ class DynamicEntryDependency extends NullDependency {
   }
 
   get key () {
-    const { resource, entryType, outputPath, packageRoot, relativePath, range } = this
-    return toPosix([resource, entryType, outputPath, packageRoot, relativePath, ...range].join('|'))
+    const { request, entryType, outputPath, packageRoot, relativePath, context, range } = this
+    return toPosix([request, entryType, outputPath, packageRoot, relativePath, context, ...range].join('|'))
   }
 
   addEntry (compilation, callback) {
     const mpx = compilation.__mpx__
-    const publicPath = compilation.outputOptions.publicPath || ''
-    let { resource, entryType, outputPath, relativePath, originEntryNode } = this
-
-    const { packageRoot, outputPath: filename, alreadyOutputted } = mpx.getPackageInfo({
-      resource,
-      outputPath,
-      resourceType: entryType,
-      warn (e) {
-        compilation.warnings.push(e)
+    let { request, entryType, outputPath, relativePath, context, originEntryNode, publicPath, resolver } = this
+
+    async.waterfall([
+      (callback) => {
+        if (context && resolver) {
+          resolver.resolve({}, context, request, {}, (err, resource) => {
+            callback(err, resource)
+          })
+        } else {
+          callback(null, request)
+        }
       },
-      error (e) {
-        compilation.errors.push(e)
+      (resource, callback) => {
+        if (!outputPath) {
+          const { resourcePath } = parseRequest(resource)
+          outputPath = mpx.getOutputPath(resourcePath, entryType)
+        }
+
+        const { packageRoot, outputPath: filename, alreadyOutputted } = mpx.getPackageInfo({
+          resource,
+          outputPath,
+          resourceType: entryType,
+          warn (e) {
+            compilation.warnings.push(e)
+          },
+          error (e) {
+            compilation.errors.push(e)
+          }
+        })
+
+        let resultPath = publicPath + filename
+        if (relativePath && relativePath !== MPX_CURRENT_CHUNK) {
+          resultPath = toPosix(path.relative(relativePath, resultPath))
+        }
+
+        // export类型的resultPath需要添加.js后缀
+        if (entryType === 'export') resultPath += '.js'
+
+        if (alreadyOutputted) return callback(null, { resultPath })
+
+        // 对于常规js模块不应添加packageRoot避免冗余
+        if (packageRoot && entryType !== 'export') {
+          resource = addQuery(resource, { packageRoot }, true)
+        }
+
+        mpx.addEntry(resource, filename, (err, entryModule) => {
+          if (err) return callback(err)
+          if (entryType === 'export') {
+            mpx.exportModules.add(entryModule)
+          }
+          originEntryNode.addChild(mpx.getEntryNode(entryModule, entryType))
+          return callback(null, {
+            resultPath,
+            entryModule
+          })
+        })
       }
-    })
-
-    let resultPath = publicPath + filename
-    if (relativePath) {
-      resultPath = toPosix(path.relative(relativePath, resultPath))
-    }
-
-    // export类型的resultPath需要添加.js后缀
-    if (entryType === 'export') resultPath += '.js'
-
-    if (alreadyOutputted) return callback(null, { resultPath })
-
-    if (packageRoot) {
-      resource = addQuery(resource, { packageRoot })
-    }
-    mpx.addEntry(resource, filename, (err, entryModule) => {
-      if (err) return callback(err)
-      if (entryType === 'export') {
-        mpx.exportModules.add(entryModule)
-      }
-      originEntryNode.addChild(mpx.getEntryNode(entryModule, entryType))
-      return callback(null, {
-        resultPath,
-        entryModule
-      })
-    })
+    ], callback)
   }
 
   mpxAction (module, compilation, callback) {
     const mpx = compilation.__mpx__
-    const { packageRoot } = this
+    const { packageRoot, context } = this
     this.originEntryNode = mpx.getEntryNode(module)
+    this.publicPath = compilation.outputOptions.publicPath || ''
+    if (context) this.resolver = compilation.resolverFactory.get('normal', module.resolveOptions)
     // 分包构建在需要在主包构建完成后在finishMake中处理，返回的资源路径先用key来占位，在合成extractedAssets时再进行最终替换
     if (packageRoot && mpx.currentPackageRoot !== packageRoot) {
       mpx.subpackagesEntriesMap[packageRoot] = mpx.subpackagesEntriesMap[packageRoot] || []
@@ -87,41 +112,52 @@ class DynamicEntryDependency extends NullDependency {
 
   // hash会影响最终的codeGenerateResult是否走缓存，由于该dep中resultPath是动态变更的，需要将其更新到hash中，避免错误使用缓存
   updateHash (hash, context) {
-    const { resultPath } = this
+    const { resultPath, relativePath } = this
     if (resultPath) hash.update(resultPath)
+    // relativePath为MPX_CURRENT_CHUNK时，插入随机数hash使当前module的codeGeneration cache失效，以执行dep.apply动态获取当前module所属的chunk路径
+    if (relativePath === MPX_CURRENT_CHUNK) hash.update('' + Math.random())
     super.updateHash(hash, context)
   }
 
   serialize (context) {
     const { write } = context
-    write(this.resource)
+    write(this.request)
     write(this.entryType)
     write(this.outputPath)
     write(this.packageRoot)
     write(this.relativePath)
+    write(this.context)
     write(this.range)
     super.serialize(context)
   }
 
   deserialize (context) {
     const { read } = context
-    this.resource = read()
+    this.request = read()
     this.entryType = read()
     this.outputPath = read()
     this.packageRoot = read()
     this.relativePath = read()
+    this.context = read()
     this.range = read()
     super.deserialize(context)
   }
 }
 
 DynamicEntryDependency.Template = class DynamicEntryDependencyTemplate {
-  apply (dep, source) {
-    const { resultPath, range, key, outputPath } = dep
+  apply (dep, source, {
+    module,
+    chunkGraph
+  }) {
+    let { resultPath, range, key, outputPath, relativePath, publicPath } = dep
     if (outputPath === 'custom-tab-bar/index') {
       // replace with true for custom-tab-bar
       source.replace(range[0], range[1] - 1, 'true')
     } else if (resultPath) {
+      if (relativePath === MPX_CURRENT_CHUNK) {
+        relativePath = publicPath + path.dirname(chunkGraph.getModuleChunks(module)[0].name)
+        resultPath = toPosix(path.relative(relativePath, resultPath))
+      }
       source.replace(range[0], range[1] - 1, JSON.stringify(resultPath))
     } else {
       const replaceRange = `mpx_replace_path_${key}`

package/lib/extractor.js

@@ -36,6 +36,11 @@ module.exports.pitch = async function (remainingRequest) {
     }
   })
 
+  if (issuerResource) {
+    // 清空issuerResource/index query避免importModule对于不同的issuer无法复用模块缓存
+    remainingRequest = addQuery(remainingRequest, {}, false, ['issuerResource', 'index'])
+  }
+
   let request = remainingRequest
   // static的情况下需要用record-loader记录相关静态资源的输出路径，不能直接在这里记录，需要确保在子依赖开始构建前完成记录，因为子依赖构建时可能就需要访问当前资源的输出路径
   if (isStatic) {

package/lib/index.js

@@ -7,6 +7,7 @@ const InjectDependency = require('./dependencies/InjectDependency')
 const ReplaceDependency = require('./dependencies/ReplaceDependency')
 const NullFactory = require('webpack/lib/NullFactory')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
+const CommonJsAsyncDependency = require('./dependencies/CommonJsAsyncDependency')
 const NormalModule = require('webpack/lib/NormalModule')
 const EntryPlugin = require('webpack/lib/EntryPlugin')
 const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
@@ -33,7 +34,7 @@ const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
-const matchCondition = require('./utils/match-condition')
+const { matchCondition } = require('./utils/match-condition')
 const { preProcessDefs } = require('./utils/index')
 const config = require('./config')
 const hash = require('hash-sum')
@@ -49,7 +50,7 @@ const extractorPath = normalize.lib('extractor')
 const async = require('async')
 const stringifyLoadersAndResource = require('./utils/stringify-loaders-resource')
 const emitFile = require('./utils/emit-file')
-const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE } = require('./utils/const')
+const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE, MPX_CURRENT_CHUNK } = require('./utils/const')
 const isEmptyObject = require('./utils/is-empty-object')
 
 const isProductionLikeMode = options => {
@@ -406,7 +407,7 @@ class MpxWebpackPlugin {
           async.each(deps, (dep, callback) => {
             dep.addEntry(compilation, (err, { resultPath }) => {
               if (err) return callback(err)
-              mpx.replacePathMap[dep.key] = resultPath
+              dep.resultPath = mpx.replacePathMap[dep.key] = resultPath
               callback()
             })
           }, callback)
@@ -471,6 +472,9 @@ class MpxWebpackPlugin {
 
       compilation.dependencyFactories.set(CommonJsVariableDependency, normalModuleFactory)
       compilation.dependencyTemplates.set(CommonJsVariableDependency, new CommonJsVariableDependency.Template())
+
+      compilation.dependencyFactories.set(CommonJsAsyncDependency, normalModuleFactory)
+      compilation.dependencyTemplates.set(CommonJsAsyncDependency, new CommonJsAsyncDependency.Template())
     })
 
     compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
@@ -512,6 +516,7 @@ class MpxWebpackPlugin {
           usingComponents: {},
           // todo es6 map读写性能高于object，之后会逐步替换
           vueContentCache: new Map(),
+          wxsAssetsCache: new Map(),
           currentPackageRoot: '',
           wxsContentMap: {},
           forceUsePageCtor: this.options.forceUsePageCtor,
@@ -911,6 +916,43 @@ class MpxWebpackPlugin {
           return true
         })
 
+        const requireAsyncHandler = (expr, members) => {
+          if (members[0] === 'async') {
+            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) {
+              // 删除root query
+              request = addQuery(request, {}, false, ['root'])
+              // 目前仅wx支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
+              if (mpx.mode === 'wx') {
+                const dep = new DynamicEntryDependency(request, 'export', '', queryObj.root, MPX_CURRENT_CHUNK, context, range)
+                parser.state.current.addPresentationalDependency(dep)
+              } else {
+                const range = expr.range
+                const dep = new CommonJsAsyncDependency(request, range)
+                parser.state.current.addDependency(dep)
+              }
+              return true
+            }
+          }
+        }
+
+        parser.hooks.callMemberChain
+          .for('require')
+          .tap({
+            name: 'MpxWebpackPlugin',
+            stage: -1000
+          }, (expr, members) => requireAsyncHandler(expr, members))
+
+        parser.hooks.callMemberChainOfCallMemberChain
+          .for('require')
+          .tap({
+            name: 'MpxWebpackPlugin',
+            stage: -1000
+          }, (expr, calleeMembers, callExpr) => requireAsyncHandler(callExpr, calleeMembers))
+
         const transHandler = (expr) => {
           const module = parser.state.module
           const current = parser.state.current

package/lib/json-compiler/helper.js

@@ -3,6 +3,7 @@ const normalize = require('../utils/normalize')
 const nativeLoaderPath = normalize.lib('native-loader')
 const isUrlRequestRaw = require('../utils/is-url-request')
 const parseRequest = require('../utils/parse-request')
+const addQuery = require('../utils/add-query')
 const loaderUtils = require('loader-utils')
 const resolve = require('../utils/resolve')
 
@@ -23,10 +24,10 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
 
   let dynamicEntryCount = 0
 
-  const getDynamicEntry = (resource, type, outputPath = '', packageRoot = '', relativePath = '') => {
-    if (typeof customGetDynamicEntry === 'function') return customGetDynamicEntry(resource, type, outputPath, packageRoot, relativePath)
+  const getDynamicEntry = (request, type, outputPath = '', packageRoot = '', relativePath = '', context = '') => {
+    if (typeof customGetDynamicEntry === 'function') return customGetDynamicEntry(request, type, outputPath, packageRoot, relativePath, context)
     const key = `mpx_dynamic_entry_${dynamicEntryCount++}`
-    const value = `__mpx_dynamic_entry__( ${JSON.stringify(resource)},${JSON.stringify(type)},${JSON.stringify(outputPath)},${JSON.stringify(packageRoot)},${JSON.stringify(relativePath)})`
+    const value = `__mpx_dynamic_entry__( ${JSON.stringify(request)},${JSON.stringify(type)},${JSON.stringify(outputPath)},${JSON.stringify(packageRoot)},${JSON.stringify(relativePath)},${JSON.stringify(context)})`
     dynamicEntryMap.set(key, value)
     return key
   }
@@ -47,8 +48,13 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
     resolve(context, component, loaderContext, (err, resource, info) => {
       if (err) return callback(err)
       const { resourcePath, queryObj } = parseRequest(resource)
-      // 目前只有微信支持分包异步化
-      if (queryObj.root && mode === 'wx') tarRoot = queryObj.root
+
+      if (queryObj.root) {
+        // 删除root query
+        resource = addQuery(resource, {}, false, ['root'])
+        // 目前只有微信支持分包异步化
+        if (mode === 'wx') tarRoot = queryObj.root
+      }
       const parsed = path.parse(resourcePath)
       const ext = parsed.ext
       const resourceName = path.join(parsed.dir, parsed.name)

package/lib/loader.js

@@ -3,7 +3,7 @@ const parseComponent = require('./parser')
 const createHelpers = require('./helpers')
 const loaderUtils = require('loader-utils')
 const parseRequest = require('./utils/parse-request')
-const matchCondition = require('./utils/match-condition')
+const { matchCondition } = require('./utils/match-condition')
 const fixUsingComponent = require('./utils/fix-using-component')
 const addQuery = require('./utils/add-query')
 const async = require('async')
@@ -254,7 +254,7 @@ module.exports = function (content) {
       output += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
         return match.toLowerCase()
       }))}\n`
-      output += `global.currentResourceType = '${ctorType}'\n`
+      output += `global.currentResourceType = ${JSON.stringify(ctorType)}\n`
 
       // template
       output += '/* template */\n'

package/lib/native-loader.js

@@ -5,7 +5,7 @@ const config = require('./config')
 const createHelpers = require('./helpers')
 const getJSONContent = require('./utils/get-json-content')
 const async = require('async')
-const matchCondition = require('./utils/match-condition')
+const { matchCondition } = require('./utils/match-condition')
 const fixUsingComponent = require('./utils/fix-using-component')
 const { JSON_JS_EXT } = require('./utils/const')
 
@@ -175,7 +175,9 @@ module.exports = function (content) {
 
       // 注入构造函数
       let ctor = 'App'
+      let ctorType = 'app'
       if (pagesMap[resourcePath]) {
+        ctorType = 'page'
         if (mpx.forceUsePageCtor || mode === 'ali' || mode === 'swan') {
           ctor = 'Page'
         } else {
@@ -183,11 +185,13 @@ module.exports = function (content) {
         }
       } else if (componentsMap[resourcePath]) {
         ctor = 'Component'
+        ctorType = 'component'
       }
       output += `global.currentCtor = ${ctor}\n`
       output += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
         return match.toLowerCase()
       }))}\n`
+      output += `global.currentResourceType = ${JSON.stringify(ctorType)}\n`
 
       if (srcMode) {
         output += `global.currentSrcMode = ${JSON.stringify(srcMode)}\n`

package/lib/resolver/AddEnvPlugin.js

@@ -2,7 +2,7 @@ const path = require('path')
 const stringifyQuery = require('../utils/stringify-query')
 const parseQuery = require('loader-utils').parseQuery
 const addInfix = require('../utils/add-infix')
-const matchCondition = require('../utils/match-condition')
+const { matchCondition } = require('../utils/match-condition')
 const { JSON_JS_EXT } = require('../utils/const')
 
 module.exports = class AddEnvPlugin {

package/lib/resolver/AddModePlugin.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const stringifyQuery = require('../utils/stringify-query')
 const parseQuery = require('loader-utils').parseQuery
-const matchCondition = require('../utils/match-condition')
+const { matchCondition } = require('../utils/match-condition')
 const addInfix = require('../utils/add-infix')
 const { JSON_JS_EXT } = require('../utils/const')
 

package/lib/runtime/components/web/mpx-image.vue

@@ -1,5 +1,5 @@
 <script>
-  import getInnerListeners from './getInnerListeners'
+  import getInnerListeners, { extendEvent } from './getInnerListeners'
 
   export default {
     name: 'mpx-image',
@@ -23,6 +23,13 @@
     beforeCreate () {
       this.image = new Image()
       this.image.onload = (e) => {
+        extendEvent(e, {
+          detail: {
+            width: this.image.width,
+            height: this.image.height
+          }
+        })
+        
         this.$emit('load', e)
       }
       this.image.onerror = (e) => {

package/lib/style-compiler/index.js

@@ -7,7 +7,7 @@ const vw = require('./plugins/vw')
 const pluginCondStrip = require('./plugins/conditional-strip')
 const scopeId = require('./plugins/scope-id')
 const transSpecial = require('./plugins/trans-special')
-const matchCondition = require('../utils/match-condition')
+const { matchCondition } = require('../utils/match-condition')
 const parseRequest = require('../utils/parse-request')
 
 module.exports = function (css, map) {

package/lib/template-compiler/compiler.js

@@ -3,6 +3,7 @@ const he = require('he')
 const config = require('../config')
 const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
 const normalize = require('../utils/normalize')
+const { normalizeCondition } = require('../utils/match-condition')
 const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
 const isEmptyObject = require('../utils/is-empty-object')
 const getRulesRunner = require('../platform/index')
@@ -10,7 +11,6 @@ const addQuery = require('../utils/add-query')
 const transDynamicClassExpr = require('./trans-dynamic-class-expr')
 const dash2hump = require('../utils/hump-dash').dash2hump
 const { inBrowser } = require('../utils/env')
-
 /**
  * Make a map and return a function for checking if a key
  * is in that map.
@@ -737,8 +737,10 @@ function parse (template, options) {
 
       currentParent.children.push(element)
       element.parent = currentParent
-
       processElement(element, root, options, meta)
+      if (isComponentNode(element, options) && mode === 'ali' && !options.hasVirtualHost) {
+        processAliAddComponentRootView(element, options, stack, currentParent)
+      }
       tagNames.add(element.tag)
 
       if (!unary) {
@@ -1800,36 +1802,70 @@ function processBuiltInComponents (el, meta) {
   }
 }
 
-function processAliStyleClassHack (el, options, root) {
-  let processor
-  // 处理组件标签
-  if (isComponentNode(el, options)) processor = ({ value, typeName }) => [typeName, value]
-  // 处理组件根节点
-  if (options.isComponent && el === root && isRealNode(el)) {
-    processor = ({ name, value, typeName }) => {
-      let sep = name === 'style' ? ';' : ' '
-      value = value ? `{{${typeName}||''}}${sep}${value}` : `{{${typeName}||''}}`
-      return [name, value]
+function processAliAddComponentRootView (el, options, stack, currentParent) {
+  const processAttrsConditions = [
+    { condition: /^(on|catch)Tap$/, action: 'clone' },
+    { condition: /^(on|catch)TouchStart$/, action: 'clone' },
+    { condition: /^(on|catch)TouchMove$/, action: 'clone' },
+    { condition: /^(on|catch)TouchEnd$/, action: 'clone' },
+    { condition: /^(on|catch)TouchCancel$/, action: 'clone' },
+    { condition: /^(on|catch)LongTap$/, action: 'clone' },
+    { condition: /^data-/, action: 'clone' },
+    { condition: 'style', action: 'move' },
+    { condition: 'class', action: 'append', value: `${MPX_ROOT_VIEW} host-${options.moduleId}` }
+  ]
+  let newElAttrs = []
+  let allAttrs = cloneAttrsList(el.attrsList)
+
+  function processClone (attr) {
+    newElAttrs.push(attr)
+  }
+
+  function processMove (attr) {
+    let movedAttr = getAndRemoveAttr(el, attr.name)
+    if (movedAttr.has) {
+      newElAttrs.push({
+        name: attr,
+        value: movedAttr.val
+      })
     }
   }
-  // 非上述两种不处理
-  if (!processor) return
-  // 处理style、class
-  ['style', 'class'].forEach((type) => {
-    let exp = getAndRemoveAttr(el, type).val
-    let typeName = 'mpx' + type.replace(/^./, (matched) => matched.toUpperCase())
-    let [newName, newValue] = processor({
-      name: type,
-      value: exp,
-      typeName
-    })
-    if (newValue !== undefined) {
-      addAttrs(el, [{
-        name: newName,
-        value: newValue
-      }])
+
+  function processAppend (attr, item) {
+    const getNeedAppendAttrValue = el.attrsMap[attr.name]
+    if (getNeedAppendAttrValue) {
+      item.value = getNeedAppendAttrValue + ' ' + item.value
     }
+    newElAttrs.push({
+      name: attr.name,
+      value: item.value
+    })
+  }
+
+  processAttrsConditions.forEach(item => {
+    const matcher = normalizeCondition(item.condition)
+    allAttrs.forEach((attr) => {
+      if (matcher(attr.name)) {
+        if (item.action === 'clone') {
+          processClone(attr)
+        } else if (item.action === 'move') {
+          processMove(attr)
+        } else if (item.action === 'append') {
+          processAppend(attr, item)
+        }
+      }
+    })
   })
+
+  // create new el
+  let componentWrapView = createASTElement('view', newElAttrs)
+  currentParent.children.pop()
+  currentParent.children.push(componentWrapView)
+  componentWrapView.parent = currentParent
+  componentWrapView.children.push(el)
+  el.parent = componentWrapView
+
+  el = componentWrapView
 }
 
 // 有virtualHost情况wx组件注入virtualHost。无virtualHost阿里组件注入root-view。其他跳过。
@@ -1841,17 +1877,17 @@ function getVirtualHostRoot (options, meta) {
       !meta.options && (meta.options = {})
       meta.options.virtualHost = true
     }
-    if (mode === 'ali' && !options.hasVirtualHost) {
-      // ali组件根节点实体化
-      let rootView = createASTElement('view', [
-        {
-          name: 'class',
-          value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
-        }
-      ])
-      processElement(rootView, rootView, options, meta)
-      return rootView
-    }
+    // if (mode === 'ali' && !options.hasVirtualHost) {
+    //   // ali组件根节点实体化
+    //   let rootView = createASTElement('view', [
+    //     {
+    //       name: 'class',
+    //       value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
+    //     }
+    //   ])
+    //   processElement(rootView, rootView, options, meta)
+    //   return rootView
+    // }
   }
   return getTempNode()
 }
@@ -2060,11 +2096,6 @@ function processElement (el, root, options, meta) {
     processShow(el, options, root)
   }
 
-  // 当mode为ali不管是不是跨平台都需要进行此处理，以保障ali当中的refs相关增强能力正常运行
-  if (mode === 'ali') {
-    processAliStyleClassHack(el, options, root)
-  }
-
   if (!pass) {
     processBindEvent(el, options)
     processComponentIs(el, options)

package/lib/template-compiler/index.js

@@ -1,7 +1,7 @@
 const compiler = require('./compiler')
 const bindThis = require('./bind-this').transform
 const parseRequest = require('../utils/parse-request')
-const matchCondition = require('../utils/match-condition')
+const { matchCondition } = require('../utils/match-condition')
 const loaderUtils = require('loader-utils')
 
 module.exports = function (raw) {

package/lib/utils/const.js

@@ -5,5 +5,6 @@ module.exports = {
   RESOLVE_IGNORED_ERR: new Error('Resolve ignored!'),
   JSON_JS_EXT: '.json.js',
   MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
-  MPX_APP_MODULE_ID: 'mpx-app-scope' // app文件moduleId
+  MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId
+  MPX_CURRENT_CHUNK: 'mpx_current_chunk'
 }

package/lib/utils/eval-json-js.js

@@ -7,8 +7,6 @@ module.exports = function evalJSONJS (source, filename, loaderContext) {
   const defValues = defKeys.map((key) => {
     return defs[key]
   })
-  // 记录依赖
-  loaderContext.addDependency(filename)
   const dirname = path.dirname(filename)
   // eslint-disable-next-line no-new-func
   const func = new Function('module', 'exports', 'require', '__filename', '__dirname', ...defKeys, source)

package/lib/utils/get-json-content.js

@@ -5,6 +5,8 @@ const async = require('async')
 const { JSON_JS_EXT } = require('./const')
 
 module.exports = function getJSONContent (json, loaderContext, callback) {
+  // error process
+  if (!loaderContext._compiler) return callback(null, '{}')
   const fs = loaderContext._compiler.inputFileSystem
   async.waterfall([
     (callback) => {

package/lib/utils/match-condition.js

@@ -45,4 +45,7 @@ const matchCondition = (resourcePath, condition = {}) => {
   return matched
 }
 
-module.exports = matchCondition
+module.exports = {
+  matchCondition,
+  normalizeCondition
+}

package/lib/web/processTemplate.js

@@ -2,8 +2,7 @@ const templateCompiler = require('../template-compiler/compiler')
 const genComponentTag = require('../utils/gen-component-tag')
 const addQuery = require('../utils/add-query')
 const parseRequest = require('../utils/parse-request')
-
-// const matchCondition = require('../utils/match-condition')
+// const { matchCondition } = require('../utils/match-condition')
 
 function calculateRootEleChild (arr) {
   if (!arr) {

package/lib/wxs/loader.js

@@ -1,5 +1,6 @@
 const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin')
 const EntryPlugin = require('webpack/lib/EntryPlugin')
+const LazySet = require('webpack/lib/util/LazySet')
 const LimitChunkCountPlugin = require('webpack/lib/optimize/LimitChunkCountPlugin')
 const path = require('path')
 const WxsPlugin = require('./WxsPlugin')
@@ -7,9 +8,12 @@ const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDe
 const parseRequest = require('../utils/parse-request')
 const toPosix = require('../utils/to-posix')
 const fixRelative = require('../utils/fix-relative')
+const addQuery = require('../utils/add-query')
 const config = require('../config')
 
-module.exports = function () {
+module.exports = content => content
+
+module.exports.pitch = function (remainingRequest) {
   const nativeCallback = this.async()
   const moduleGraph = this._compilation.moduleGraph
   const mpx = this.getMpx()
@@ -46,63 +50,91 @@ module.exports = function () {
     nativeCallback(null, `module.exports = ${JSON.stringify(relativePath)};`)
   }
 
-  const outputOptions = {
-    filename,
-    // 避免输出的wxs中包含es语法
-    environment: {
-      // The environment supports arrow functions ('() => { ... }').
-      arrowFunction: false,
-      // The environment supports BigInt as literal (123n).
-      bigIntLiteral: false,
-      // The environment supports const and let for variable declarations.
-      const: false,
-      // The environment supports destructuring ('{ a, b } = obj').
-      destructuring: false,
-      // The environment supports an async import() function to import EcmaScript modules.
-      dynamicImport: false,
-      // The environment supports 'for of' iteration ('for (const x of array) { ... }').
-      forOf: false,
-      // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
-      module: false
-    }
-  }
-  // wxs文件必须经过pre-loader
-  const request = '!!' + this.remainingRequest
-  const plugins = [
-    new WxsPlugin({ mode }),
-    new NodeTargetPlugin(),
-    new EntryPlugin(this.context, request, { name: getName(filename) }),
-    new LimitChunkCountPlugin({ maxChunks: 1 })
-  ]
+  // 清空issuerResource query避免文件内容输出报错并进行子编译缓存优化
+  const request = '!!' + addQuery(remainingRequest, {}, false, ['issuerResource'])
 
-  const childCompiler = this._compilation.createChildCompiler(resourcePath, outputOptions, plugins)
+  // request中已经包含全量构成filename的信息，故可以直接使用request作为key来进行缓存
+  if (!mpx.wxsAssetsCache.has(request)) {
+    mpx.wxsAssetsCache.set(request, new Promise((resolve, reject) => {
+      const outputOptions = {
+        filename,
+        // 避免输出的wxs中包含es语法
+        environment: {
+          // The environment supports arrow functions ('() => { ... }').
+          arrowFunction: false,
+          // The environment supports BigInt as literal (123n).
+          bigIntLiteral: false,
+          // The environment supports const and let for variable declarations.
+          const: false,
+          // The environment supports destructuring ('{ a, b } = obj').
+          destructuring: false,
+          // The environment supports an async import() function to import EcmaScript modules.
+          dynamicImport: false,
+          // The environment supports 'for of' iteration ('for (const x of array) { ... }').
+          forOf: false,
+          // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
+          module: false
+        }
+      }
 
-  childCompiler.hooks.afterCompile.tap('MpxWebpackPlugin', (compilation) => {
-    // 持久化缓存，使用module.buildInfo.assets来输出文件
-    compilation.getAssets().forEach(({ name, source, info }) => {
-      this.emitFile(name, source.source(), undefined, info)
-    })
-    compilation.clearAssets()
-  })
+      const plugins = [
+        new WxsPlugin({ mode }),
+        new NodeTargetPlugin(),
+        new EntryPlugin(this.context, request, { name: getName(filename) }),
+        new LimitChunkCountPlugin({ maxChunks: 1 })
+      ]
+
+      const childCompiler = this._compilation.createChildCompiler(resourcePath, outputOptions, plugins)
+
+      let assets = []
 
-  childCompiler.runAsChild((err, entries, compilation) => {
-    if (err) return callback(err)
-    if (compilation.errors.length > 0) {
-      return callback(compilation.errors[0])
-    }
+      childCompiler.hooks.afterCompile.tap('MpxWebpackPlugin', (compilation) => {
+        // 持久化缓存，使用module.buildInfo.assets来输出文件
+        assets = compilation.getAssets()
+        compilation.clearAssets()
+      })
 
-    compilation.fileDependencies.forEach((dep) => {
+      childCompiler.runAsChild((err, entries, compilation) => {
+        if (err) return reject(err)
+        const fileDependencies = new LazySet()
+        const contextDependencies = new LazySet()
+        const missingDependencies = new LazySet()
+        const buildDependencies = new LazySet()
+        compilation.modules.forEach((module) => {
+          module.addCacheDependencies(
+            fileDependencies,
+            contextDependencies,
+            missingDependencies,
+            buildDependencies
+          )
+        })
+        resolve({
+          assets,
+          fileDependencies,
+          contextDependencies,
+          missingDependencies,
+          buildDependencies
+        })
+      })
+    }))
+  }
+
+  mpx.wxsAssetsCache.get(request).then(({ assets, fileDependencies, contextDependencies, missingDependencies, buildDependencies }) => {
+    assets.forEach(({ name, source, info }) => {
+      this.emitFile(name, source.source(), undefined, info)
+    })
+    fileDependencies.forEach((dep) => {
       this.addDependency(dep)
-    }, this)
-    compilation.contextDependencies.forEach((dep) => {
+    })
+    contextDependencies.forEach((dep) => {
       this.addContextDependency(dep)
-    }, this)
-    compilation.missingDependencies.forEach((dep) => {
+    })
+    missingDependencies.forEach((dep) => {
       this.addMissingDependency(dep)
     })
-    compilation.buildDependencies.forEach((dep) => {
+    buildDependencies.forEach((dep) => {
       this.addBuildDependency(dep)
     })
     callback()
-  })
+  }).catch(callback)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.7.8",
+  "version": "2.7.11",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -80,5 +80,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "7c4e607bae13678cadc080d3303e9b432074d03e"
+  "gitHead": "484feb97fc5741ce3984fd235833fe0ab83593b9"
 }