@mpxjs/webpack-plugin 2.7.50-alpha.2 → 2.7.50

package/lib/dependencies/DynamicEntryDependency.js

@@ -68,24 +68,35 @@ class DynamicEntryDependency extends NullDependency {
         // 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
+        const key = resource + filename
+        let addEntryPromise
+
+        if (alreadyOutputted) {
+          addEntryPromise = mpx.addEntryPromiseMap.get(key) || Promise.resolve()
+        } else {
+          addEntryPromise = new Promise((resolve, reject) => {
+            mpx.addEntry(resource, filename, (err, entryModule) => {
+              if (err) return reject(err)
+              if (entryType === 'export') {
+                mpx.exportModules.add(entryModule)
+              }
+              resolve(entryModule)
+            })
           })
-        })
+          mpx.addEntryPromiseMap.set(key, addEntryPromise)
+        }
+
+        addEntryPromise
+          .then(entryModule => {
+            if (entryModule) originEntryNode.addChild(mpx.getEntryNode(entryModule, entryType))
+            callback(null, { resultPath })
+          })
+          .catch(err => callback(err))
       }
     ], callback)
   }

package/lib/dependencies/RecordVueContentDependency.js

@@ -0,0 +1,43 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class RecordVueContentDependency extends NullDependency {
+  constructor (resourcePath, content) {
+    super()
+    this.resourcePath = resourcePath
+    this.content = content
+  }
+
+  get type () {
+    return 'mpx record vue content'
+  }
+
+  mpxAction (module, compilation, callback) {
+    const mpx = compilation.__mpx__
+    mpx.vueContentCache.set(this.resourcePath, this.content)
+    return callback()
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.resourcePath)
+    write(this.content)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.resourcePath = read()
+    this.content = read()
+    super.deserialize(context)
+  }
+}
+
+RecordVueContentDependency.Template = class RecordVueContentDependencyTemplate {
+  apply () {
+  }
+}
+
+makeSerializable(RecordVueContentDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordVueContentDependency')
+
+module.exports = RecordVueContentDependency

package/lib/index.js

@@ -35,6 +35,7 @@ const RecordIndependentDependency = require('./dependencies/RecordIndependentDep
 const DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
 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')
@@ -498,6 +499,9 @@ class MpxWebpackPlugin {
 
       compilation.dependencyFactories.set(CommonJsAsyncDependency, normalModuleFactory)
       compilation.dependencyTemplates.set(CommonJsAsyncDependency, new CommonJsAsyncDependency.Template())
+
+      compilation.dependencyFactories.set(RecordVueContentDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RecordVueContentDependency, new RecordVueContentDependency.Template())
     })
 
     compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
@@ -539,6 +543,7 @@ class MpxWebpackPlugin {
           usingComponents: {},
           // todo es6 map读写性能高于object，之后会逐步替换
           wxsAssetsCache: new Map(),
+          addEntryPromiseMap: new Map(),
           currentPackageRoot: '',
           wxsContentMap: {},
           forceUsePageCtor: this.options.forceUsePageCtor,
@@ -557,6 +562,7 @@ class MpxWebpackPlugin {
           nativeConfig: this.options.nativeConfig,
           // 输出web专用配置
           webConfig: this.options.webConfig,
+          vueContentCache: new Map(),
           tabBarMap: {},
           defs: preProcessDefs(this.options.defs),
           i18n: this.options.i18n,

package/lib/loader.js

@@ -16,6 +16,7 @@ const normalize = require('./utils/normalize')
 const getEntryName = require('./utils/get-entry-name')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+const RecordVueContentDependency = require('./dependencies/RecordVueContentDependency')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const { MPX_APP_MODULE_ID } = require('./utils/const')
 const path = require('path')
@@ -137,6 +138,10 @@ module.exports = function (content) {
           return callback(null, output)
         }
 
+        // 通过RecordVueContentDependency和vueContentCache确保子request不再重复生成vueContent
+        const cacheContent = mpx.vueContentCache.get(filePath)
+        if (cacheContent) return callback(null, cacheContent)
+
         return async.waterfall([
           (callback) => {
             async.parallel([
@@ -183,6 +188,7 @@ module.exports = function (content) {
               loaderContext,
               ctorType,
               srcMode,
+              moduleId,
               isProduction,
               componentGenerics,
               jsonConfig: jsonRes.jsonObj,
@@ -199,6 +205,7 @@ module.exports = function (content) {
         ], (err, scriptRes) => {
           if (err) return callback(err)
           output += scriptRes.output
+          this._module.addPresentationalDependency(new RecordVueContentDependency(filePath, output))
           callback(null, output)
         })
       }
@@ -265,10 +272,9 @@ module.exports = function (content) {
 
       if (template) {
         const extraOptions = {
-          ...template.src ? {
-            ...queryObj,
-            resourcePath
-          } : null,
+          ...template.src
+            ? { ...queryObj, resourcePath }
+            : null,
           hasScoped,
           hasComment,
           isNative,
@@ -290,11 +296,9 @@ module.exports = function (content) {
           const scoped = style.scoped || autoScope
           const extraOptions = {
             // style src会被特殊处理为全局复用样式，不添加resourcePath，添加isStatic及issuerFile
-            ...style.src ? {
-              ...queryObj,
-              isStatic: true,
-              issuerResource: addQuery(this.resource, { type: 'styles' }, true)
-            } : null,
+            ...style.src
+              ? { ...queryObj, isStatic: true, issuerResource: addQuery(this.resource, { type: 'styles' }, true) }
+              : null,
             moduleId,
             scoped
           }
@@ -311,10 +315,7 @@ module.exports = function (content) {
       output += '/* json */\n'
       // 给予json默认值, 确保生成json request以自动补全json
       const json = parts.json || {}
-      output += getRequire('json', json, json.src && {
-        ...queryObj,
-        resourcePath
-      }) + '\n'
+      output += getRequire('json', json, json.src && { ...queryObj, resourcePath }) + '\n'
 
       // script
       output += '/* script */\n'
@@ -326,10 +327,9 @@ module.exports = function (content) {
         if (scriptSrcMode) output += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
         // 传递ctorType以补全js内容
         const extraOptions = {
-          ...script.src ? {
-            ...queryObj,
-            resourcePath
-          } : null,
+          ...script.src
+            ? { ...queryObj, resourcePath }
+            : null,
           ctorType
         }
         output += getRequire('script', script, extraOptions) + '\n'

package/lib/template-compiler/compiler.js

@@ -1989,11 +1989,12 @@ function processAtMode (el) {
       return
     }
 
-    const conditionMap = new Map()
+    const conditionMap = {}
+
     modeStr.split('|').forEach(item => {
       const arr = item.split(':')
-      const key = arr[0] || 'noMode'
-      conditionMap.set(key, arr.slice(1))
+      const key = arr[0] || mode
+      conditionMap[key] = arr.slice(1)
     })
 
     const modeArr = Object.keys(conditionMap)
@@ -2001,33 +2002,19 @@ function processAtMode (el) {
     if (modeArr.every(i => isValidMode(i))) {
       const attrValue = getAndRemoveAttr(el, attrName).val
       const replacedAttrName = attrArr.join('@')
-      const processedAttr = { name: replacedAttrName, value: attrValue }
 
-      for (let [defineMode, defineEnvArr] of conditionMap.entries()) {
-        if (defineMode === 'noMode' || defineMode === mode) {
-          // 命中 env 规则(没有定义env 或者定义的envArr包含当前env)
-          if (!defineEnvArr.length || defineEnvArr.includes(env)) {
-            if (!replacedAttrName) {
-              // 若defineMode 为 noMode，则不论是element，还是attr，都需要经过规则转换
-              if (defineMode !== 'noMode') {
-                el._atModeStatus = 'match'
-              }
-            } else {
-              // 如果命中了指定的mode，则先存在el上，等跑完转换后再挂回去
-              el.noTransAttrs ? el.noTransAttrs.push(processedAttr) : el.noTransAttrs = [processedAttr]
-            }
-            // 命中mode，命中env，完成匹配，直接退出
-            break
-          } else if (!replacedAttrName) {
-            // 命中mode规则，没有命中当前env规则，设置为 'mismatch'
-            el._atModeStatus = 'mismatch'
-          }
-        } else if (!replacedAttrName) {
-          // 没有命中当前mode规则，设置为 'mismatch'
-          el._atModeStatus = 'mismatch'
+      const processedAttr = { name: replacedAttrName, value: attrValue }
+      if (modeArr.includes(mode) && (!conditionMap[mode].length || conditionMap[mode].includes(env))) {
+        if (!replacedAttrName) {
+          el._atModeStatus = 'match'
         } else {
-          // 如果没命中指定的mode，则该属性删除
+          // 如果命中了指定的mode，则先存在el上，等跑完转换后再挂回去
+          el.noTransAttrs ? el.noTransAttrs.push(processedAttr) : el.noTransAttrs = [processedAttr]
         }
+      } else if (!replacedAttrName) {
+        el._atModeStatus = 'mismatch'
+      } else {
+        // 如果没命中指定的mode，则该属性删除
       }
     }
   })

package/lib/web/processScript.js

@@ -2,7 +2,7 @@ const genComponentTag = require('../utils/gen-component-tag')
 const loaderUtils = require('loader-utils')
 const addQuery = require('../utils/add-query')
 const normalize = require('../utils/normalize')
-const parseRequest = require('../utils/parse-request')
+const createHelpers = require('../helpers')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
 const tabBarContainerPath = normalize.lib('runtime/components/web/mpx-tab-bar-container.vue')
 const tabBarPath = normalize.lib('runtime/components/web/mpx-tab-bar.vue')
@@ -32,6 +32,7 @@ module.exports = function (script, {
   loaderContext,
   ctorType,
   srcMode,
+  moduleId,
   isProduction,
   componentGenerics,
   jsonConfig,
@@ -44,13 +45,13 @@ module.exports = function (script, {
   localComponentsMap,
   localPagesMap
 }, callback) {
-  const mpx = loaderContext.getMpx()
   const {
     i18n,
-    projectRoot
-  } = mpx
+    projectRoot,
+    webConfig
+  } = loaderContext.getMpx()
 
-  const { queryObj } = parseRequest(loaderContext.resource)
+  const { getRequire } = createHelpers(loaderContext)
   const tabBar = jsonConfig.tabBar
 
   const emitWarning = (msg) => {
@@ -87,23 +88,7 @@ module.exports = function (script, {
   if (script) {
     scriptSrcMode = script.mode || scriptSrcMode
   } else {
-    script = {
-      tag: 'script',
-      content: ''
-    }
-    switch (ctorType) {
-      case 'app':
-        script.content = 'import {createApp} from "@mpxjs/core"\n' +
-          'createApp({})\n'
-        break
-      case 'page':
-        script.content = 'import {createPage} from "@mpxjs/core"\n' +
-          'createPage({})\n'
-        break
-      case 'component':
-        script.content = 'import {createComponent} from "@mpxjs/core"\n' +
-          'createComponent({})\n'
-    }
+    script = { tag: 'script' }
   }
   output += genComponentTag(script, {
     attrs (script) {
@@ -138,9 +123,10 @@ module.exports = function (script, {
   }
   global.__networkTimeout = ${JSON.stringify(jsonConfig.networkTimeout)}
   global.__mpxGenericsMap = {}
+  global.__mpxOptionsMap = {}
   global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
   global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
-  global.__mpxTransRpxFn = ${mpx.webConfig.transRpxFn}\n`
+  global.__mpxTransRpxFn = ${webConfig.transRpxFn}\n`
         if (i18n) {
           const i18nObj = Object.assign({}, i18n)
           content += `  import VueI18n from 'vue-i18n'
@@ -214,19 +200,23 @@ module.exports = function (script, {
         componentsMap[componentName] = `getComponent(require(${componentRequest}), { __mpxBuiltIn: true })`
       })
 
+      content += `  global.currentModuleId = ${JSON.stringify(moduleId)}\n`
       content += `  global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
       if (!isProduction) {
         content += `  global.currentResource = ${JSON.stringify(loaderContext.resourcePath)}\n`
       }
-      // 为了正确获取currentSrcMode便于运行时进行转换，对于src引入的组件script采用require方式引入(由于webpack会将import的执行顺序上升至最顶)，这意味着对于src引入脚本中的named export将不会生效，不过鉴于mpx和小程序中本身也没有在组件script中声明export的用法，所以应该没有影响
-      content += '\n\n\n/** Source start **/\n'
-      content += script.src
-        // 继承单文件组件query避免多个单文件模块实例引用一个src模块，因模块缓存导致createComponent不执行的问题
-        ? `require(${stringifyRequest(addQuery(script.src, queryObj))})\n`
-        : script.content
-      content += '\n/** Source end **/\n\n\n'
+
+      content += '  /** script content **/\n'
+
+      // 传递ctorType以补全js内容
+      const extraOptions = {
+        ctorType
+      }
+      // todo 仅靠vueContentCache保障模块唯一性还是不够严谨，后续需要考虑去除原始query后构建request
+      content += `  ${getRequire('script', script, extraOptions)}\n`
+
       // createApp/Page/Component执行完成后立刻获取当前的option并暂存
-      content += `  const currentOption = global.currentOption\n`
+      content += `  const currentOption = global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
       // 获取pageConfig
       const pageConfig = {}
       if (ctorType === 'page') {
@@ -265,7 +255,6 @@ module.exports = function (script, {
     ${JSON.stringify(componentGenerics)},
     ${JSON.stringify(genericsInfo)},
     getWxsMixin(wxsModules)`
-
       if (ctorType === 'app') {
         content += `,
     Vue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.7.50-alpha.2",
+  "version": "2.7.50",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -80,5 +80,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "1f11736feeec1ad1eace01c32f8b70b296a6896b"
+  "gitHead": "f1fe0f7381ee7e153b0eb7994f25ade5c9f4f0ef"
 }