@mpxjs/webpack-plugin 2.8.48 → 2.8.50

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/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,6 +8,7 @@ const ReplaceDependency = require('./dependencies/ReplaceDependency')
 const NullFactory = require('webpack/lib/NullFactory')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const CommonJsAsyncDependency = require('./dependencies/CommonJsAsyncDependency')
+const CommonJsExtractDependency = require('./dependencies/CommonJsExtractDependency')
 const harmonySpecifierTag = require('webpack/lib/dependencies/HarmonyImportDependencyParserPlugin').harmonySpecifierTag
 const NormalModule = require('webpack/lib/NormalModule')
 const EntryPlugin = require('webpack/lib/EntryPlugin')
@@ -124,6 +125,7 @@ class MpxWebpackPlugin {
     options.resolveMode = options.resolveMode || 'webpack'
     options.writeMode = options.writeMode || 'changed'
     options.autoScopeRules = options.autoScopeRules || {}
+    options.renderOptimizeRules = options.renderOptimizeRules || {}
     options.autoVirtualHostRules = options.autoVirtualHostRules || {}
     options.forceDisableProxyCtor = options.forceDisableProxyCtor || false
     options.transMpxRules = options.transMpxRules || {
@@ -405,13 +407,13 @@ class MpxWebpackPlugin {
               name: 'MpxPartialCompilePlugin',
               stage: -100
             }, (obj, resolverContext, callback) => {
-              if (obj.path.startsWith(require.resolve('./json-compiler/default-page.mpx'))) {
+              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('./json-compiler/default-page.mpx')
+                obj.path = require.resolve('./runtime/components/wx/default-page.mpx')
               }
               callback(null, obj)
             })
@@ -554,6 +556,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())
     })
@@ -628,6 +633,7 @@ class MpxWebpackPlugin {
           appTitle: 'Mpx homepage',
           attributes: this.options.attributes,
           externals: this.options.externals,
+          renderOptimizeRules: this.options.renderOptimizeRules,
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
@@ -923,6 +929,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
@@ -1096,6 +1113,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)) {

package/lib/json-compiler/helper.js

@@ -22,6 +22,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
 
   const isUrlRequest = r => isUrlRequestRaw(r, root, externals)
   const urlToRequest = r => loaderUtils.urlToRequest(r)
+  const isScript = ext => /\.(ts|js)$/.test(ext)
 
   const dynamicEntryMap = new Map()
 
@@ -73,7 +74,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
       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) {
@@ -91,7 +92,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
           outputPath = getOutputPath(resourcePath, 'component')
         }
       }
-      if (ext === '.js' && mode !== 'web') {
+      if (isScript(ext) && mode !== 'web') {
         resource = `!!${nativeLoaderPath}!${resource}`
       }
 
@@ -131,7 +132,7 @@ 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)

package/lib/json-compiler/index.js

@@ -250,7 +250,7 @@ module.exports = function (content) {
     const localPages = []
     const subPackagesCfg = {}
     const pageKeySet = new Set()
-    const defaultPagePath = require.resolve('./default-page.mpx')
+    const defaultPagePath = require.resolve('../runtime/components/wx/default-page.mpx')
     const processPages = (pages, context, tarRoot = '', callback) => {
       if (pages) {
         const pagesCache = []

package/lib/native-loader.js

@@ -8,7 +8,7 @@ const async = require('async')
 const { matchCondition } = require('./utils/match-condition')
 const { JSON_JS_EXT } = require('./utils/const')
 const getRulesRunner = require('./platform')
-
+// todo native-loader考虑与mpx-loader或加强复用，原生组件约等于4个区块都为src的.mpx文件
 module.exports = function (content) {
   this.cacheable()
 
@@ -44,6 +44,8 @@ module.exports = function (content) {
     scss: '.scss'
   }
 
+  const TS_EXT = '.ts'
+
   let useJSONJS = false
   let cssLang = ''
   const hasScoped = (queryObj.scoped || autoScope) && mode === 'ali'
@@ -54,7 +56,7 @@ module.exports = function (content) {
     this.resolve(parsed.dir, resourceName + extName, callback)
   }
 
-  function checkCSSLangFiles (callback) {
+  function checkCSSLangFile (callback) {
     const langs = mpx.nativeConfig.cssLangs || ['less', 'stylus', 'scss', 'sass']
     const results = []
     async.eachOf(langs, function (lang, i, callback) {
@@ -89,6 +91,15 @@ module.exports = function (content) {
     })
   }
 
+  function checkTSFile (callback) {
+    checkFileExists(TS_EXT, (err, result) => {
+      if (!err && result) {
+        typeResourceMap.script = result
+      }
+      callback()
+    })
+  }
+
   const emitWarning = (msg) => {
     this.emitWarning(
       new Error('[native-loader][' + this.resource + ']: ' + msg)
@@ -105,15 +116,16 @@ module.exports = function (content) {
   async.waterfall([
     (callback) => {
       async.parallel([
-        checkCSSLangFiles,
-        checkJSONJSFile
+        checkCSSLangFile,
+        checkJSONJSFile,
+        checkTSFile
       ], (err) => {
         callback(err)
       })
     },
     (callback) => {
       async.forEachOf(typeExtMap, (ext, key, callback) => {
-        // 检测到jsonjs或cssLang时跳过对应类型文件检测
+        // 对应资源存在预处理类型文件时跳过对应的标准文件检测
         if (typeResourceMap[key]) {
           return callback()
         }

package/lib/platform/json/wx/index.js

@@ -3,6 +3,7 @@ const normalizeTest = require('../normalize-test')
 const changeKey = require('../change-key')
 const normalize = require('../../../utils/normalize')
 const { capitalToHyphen } = require('../../../utils/string')
+const { isOriginTag } = require('../../../utils/dom-tag-config')
 
 const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
 const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
@@ -70,6 +71,19 @@ module.exports = function getSpec ({ warn, error }) {
     return input
   }
 
+  // 校验输出支付宝 componentGenerics 配置的正确性
+  function aliComponentGenericsValidate (input) {
+    const componentGenerics = input.componentGenerics
+    if (componentGenerics && typeof componentGenerics === 'object') {
+      Object.keys(componentGenerics).forEach(key => {
+        if (!componentGenerics[key].default) {
+          error(`Ali environment componentGenerics need to specify a default custom component! please check the configuration of component ${key}`)
+        }
+      })
+    }
+    return input
+  }
+
   function fillGlobalComponents (input, { globalComponents }) {
     if (globalComponents) {
       Object.assign(globalComponents, input.usingComponents)
@@ -112,10 +126,30 @@ module.exports = function getSpec ({ warn, error }) {
     }
   }
 
+  /**
+   * 将小程序代码中使用的与原生 HTML tag 同名组件进行转化，以解决与原生tag命名冲突问题。
+   * @param {string} type usingComponents
+   * @returns input
+   */
+  function webHTMLTagProcesser (type) {
+    return function (input) {
+      const usingComponents = input[type]
+      if (usingComponents) {
+        Object.keys(usingComponents).forEach(tag => {
+          if (isOriginTag(tag)) {
+            usingComponents[`mpx-com-${tag}`] = usingComponents[tag]
+            delete usingComponents[tag]
+          }
+        })
+      }
+      return input
+    }
+  }
+
   const componentRules = [
     {
       test: 'componentGenerics',
-      ali: deletePath(true)
+      ali: aliComponentGenericsValidate
     },
     {
       test: 'componentPlaceholder',
@@ -124,6 +158,10 @@ module.exports = function getSpec ({ warn, error }) {
       tt: deletePath(),
       jd: deletePath()
     },
+    {
+      test: 'usingComponents',
+      web: webHTMLTagProcesser('usingComponents')
+    },
     {
       test: 'usingComponents',
       ali: componentNameCapitalToHyphen('usingComponents'),
@@ -224,7 +262,7 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd'],
+    supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd', 'web'],
     normalizeTest,
     page: [
       ...windowRules,
@@ -325,6 +363,10 @@ module.exports = function getSpec ({ warn, error }) {
         tt: deletePath(),
         jd: deletePath(true)
       },
+      {
+        test: 'usingComponents',
+        web: webHTMLTagProcesser('usingComponents')
+      },
       {
         test: 'usingComponents',
         ali: componentNameCapitalToHyphen('usingComponents'),

package/lib/platform/run-rules.js

@@ -32,7 +32,8 @@ module.exports = function runRules (rules = [], input, options = {}) {
       if (result !== undefined) {
         input = result
       }
-      if (!waterfall) break
+      // rule 内外 waterfall 均为 false 时跳过
+      if (!rule.waterfall && !waterfall) break
     }
   }
   return input

package/lib/platform/template/normalize-component-rules.js

@@ -11,6 +11,8 @@ module.exports = function normalizeComponentRules (cfgs, spec) {
     if (cfg.test) {
       result.test = cfg.test
     }
+    // 透传 waterfall 信息
+    if (cfg.waterfall) result.waterfall = cfg.waterfall
     const supportedModes = cfg.supportedModes || spec.supportedModes
     // 合并component-config中组件的event 与index中公共的event规则
     const eventRules = (cfg.event || []).concat(spec.event.rules)

package/lib/platform/template/wx/component-config/fix-html-tag.js

@@ -0,0 +1,17 @@
+const { isOriginTag } = require('../../../../utils/dom-tag-config')
+
+module.exports = function () {
+  return {
+    waterfall: true,
+    test: (input) => isOriginTag(input),
+    // 处理原生tag
+    web (tag, data = {}) {
+      // @see packages/webpack-plugin/lib/platform/json/wx/index.js webHTMLTagProcesser
+      const newTag = `mpx-com-${tag}`
+      const usingComponents = data.usingComponents || []
+      // 存在同名组件，则返回新tag
+      if (usingComponents.includes(newTag)) return newTag
+      return tag
+    }
+  }
+}

package/lib/platform/template/wx/component-config/index.js

@@ -39,6 +39,7 @@ const view = require('./view')
 const webView = require('./web-view')
 const wxs = require('./wxs')
 const component = require('./component')
+const fixHTMLTag = require('./fix-html-tag')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -79,6 +80,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
 
   // 转换规则只需以微信为基准配置微信和支付宝的差异部分，比如微信和支付宝都支持但是写法不一致，或者微信支持而支付宝不支持的部分(抛出错误或警告)
   return [
+    fixHTMLTag(),
     ...Nonsupport({ print }),
     ad({ print }),
     view({ print }),

package/lib/runtime/components/web/filterTag.js

@@ -1,3 +1,12 @@
+const {
+  isRichTextTag,
+  isUnaryTag,
+  isSpace,
+  isContWidth,
+  isContHeight,
+  isContConRow
+} = require('../../../utils/dom-tag-config')
+
 // eslint-disable-next-line
 const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/ // useless escape
 const ncname = '[a-zA-Z_][\\w\\-\\.]*'
@@ -11,36 +20,6 @@ const comment = /^<!\--/
 const invalidAttributeRE = /[\s"'<>\/=]/
 let currentParent
 
-function makeMap (str, expectsLowerCase) {
-  const map = Object.create(null)
-  const list = str.split(',')
-  for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true
-  }
-  return expectsLowerCase
-    ? val => map[val.toLowerCase()]
-    : val => map[val]
-}
-
-const isRichTextTag = makeMap(
-  'a,abbr,address,article,aside,b,bdi,bdo,big,blockquote,br,caption,' +
-  'center,cite,code,col,colgroup,dd,del,div,dl,dt,em,fieldset,' +
-  'font,footer,h1,h2,h3,h4,h5,h6,header,hr,i,img,ins,label,legend,' +
-  'li,mark,nav,ol,p,pre,q,rt,ruby,s,section,small,span,strong,sub,sup,' +
-  'table,tbody,td,tfoot,th,thead,tr,tt,u,ul'
-)
-const isUnaryTag = makeMap(
-  'area,base,br,col,embed,frame,hr,img,input,isindex,keygen,' +
-  'link,meta,param,source,track,wbr'
-)
-const isSpace = makeMap('ensp,emsp,nbsp')
-
-const isContWidth = makeMap('col,colgroup,img,table,td,th,tr')
-
-const isContHeight = makeMap('img,td,th,tr')
-
-const isContConRow = makeMap('td,th,tr')
-
 function makeAttrsMap (attrs) {
   const map = {}
   for (let i = 0, l = attrs.length; i < l; i++) {

package/lib/runtime/components/web/getInnerListeners.js

@@ -144,20 +144,8 @@ export function inheritEvent (type, oe, detail = {}) {
 }
 
 export function getCustomEvent (type, detail = {}, target = null) {
-  const targetInfo = {}
-  if (target) {
-    const targetEl = target.$el || {}
-    const info = {
-      id: targetEl.id || '',
-      dataset: targetEl.dataset || {},
-      offsetTop: targetEl.offsetTop || 0,
-      offsetLeft: targetEl.offsetLeft || 0
-    }
-    Object.assign(targetInfo, {
-      target: info,
-      currentTarget: info
-    })
-  }
+  const targetEl = (target && target.$el) || null
+  const targetInfo = targetEl ? { target: targetEl, currentTarget: targetEl } : {}
   return {
     type,
     detail,

package/lib/runtime/components/web/mpx-movable-view.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="mpx-movable-scroll-content" ref="scrollContent">
-        <div class="mpx-movable-scroll-item">
-            <slot></slot>
-        </div>
+  <div class="mpx-movable-scroll-content" ref="scrollContent">
+    <div class="mpx-movable-scroll-item">
+      <slot></slot>
     </div>
+  </div>
 </template>
 
 <script type="text/ecmascript-6">
-  import {getCustomEvent} from './getInnerListeners'
+  import {getCustomEvent, extendEvent} from './getInnerListeners'
   import BScroll from '@better-scroll/core'
   import Movable from '@better-scroll/movable'
   import Zoom from '@better-scroll/zoom'
@@ -121,6 +121,13 @@
           newVal = 0.5
         }
         this.bs.zoomTo(newVal, 'center', 'center')
+      },
+      disabled (newVal) {
+        if (newVal) {
+          this.bs && this.bs.disable()
+        } else {
+          this.bs && this.bs.enable()
+        }
       }
     },
     mounted () {
@@ -204,6 +211,14 @@
             this.bs.movingDirectionY = -1
           }
         })
+        actionsHandlerHooks.on('start', (e) => {
+          extendEvent(e, { detail: Object.assign({}, e.detail) })
+          this.$emit('touchstart', e)
+        })
+        actionsHandlerHooks.on('end', (e) => {
+          extendEvent(e, { detail: Object.assign({}, e.detail) })
+          this.$emit('touchend', e)
+        })
         actionsHandlerHooks.on('move', ({ deltaX, deltaY, e }) => {
           if (this.isZooming) {
             return
@@ -215,7 +230,9 @@
               this.touchEvent = 'vtouchmove'
             }
           }
-          this.$emit(this.touchEvent, getCustomEvent(this.touchEvent, {}, this))
+          extendEvent(e, { detail: Object.assign({}, e.detail), currentTarget: e.target })
+          this.$emit(this.touchEvent, e)
+          this.$emit('touchmove', e)
           this.isFirstTouch = false
         })
         if (this.inertia) { // movable-view是否带有惯性
@@ -302,7 +319,9 @@
   }
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
-    .mpx-movable-scroll-content {
-        position: absolute
-    }
+  .mpx-movable-scroll-content
+    position: absolute
+    .mpx-movable-scroll-item
+      width: 100%
+      height: 100%
 </style>

package/lib/runtime/components/web/mpx-picker-view.vue

@@ -163,7 +163,7 @@
     height: 100%
     overflow: hidden
     text-align: center
-    font-size: 14px
+    font-size: 16px
     position: relative
 
     &.mpx-picker-fade-enter, &.mpx-picker-fade-leave-active

package/lib/runtime/components/web/mpx-scroll-view.vue

@@ -264,10 +264,9 @@
       },
       initLayerComputed () {
         const wrapper = this.$refs.wrapper
-        const wrapperWidth = wrapper.offsetWidth
-        const wrapperHeight = wrapper.offsetHeight
-        this.$refs.innerWrapper.style.width = `${wrapperWidth}px`
-        this.$refs.innerWrapper.style.height = `${wrapperHeight}px`
+        const computedStyle = getComputedStyle(wrapper)
+        this.$refs.innerWrapper.style.width = `${computedStyle.clientWidth -  parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
+        this.$refs.innerWrapper.style.height = `${computedStyle.clientHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom)}px`
         const innerWrapper = this.$refs.innerWrapper
         const childrenArr = Array.from(innerWrapper.children)
 

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

@@ -146,6 +146,11 @@
         classList: ''
       }
     },
+    watch: {
+      muted (val) {
+        this.mutedCopy = val
+      }
+    },
     mounted () {
       this.initStyle()
       this.initEvent()

package/lib/runtime/components/wx/default-page.mpx

@@ -0,0 +1,27 @@
+<template>
+  <view>局部构建兜底页面</view>
+  <view>当前路由：{{currentRoute}}</view>
+</template>
+
+<script>
+import { onLoad } from '@mpxjs/core'
+import { createPage } from '@mpxjs/core'
+
+createPage({
+  data() {
+    return {
+      currentRoute: '',
+    }
+  },
+  onLoad() {
+    this.getPagePath()
+  },
+  methods: {
+    getPagePath() {
+      const pages = getCurrentPages() || []
+      const currPage = pages[pages.length - 1]
+      this.currentRoute = currPage && currPage.route || ''
+    },
+  }
+})
+</script>

package/lib/template-compiler/bind-this.js

@@ -19,9 +19,159 @@ dangerousKeys.split(',').forEach((key) => {
   dangerousKeyMap[key] = true
 })
 
+// 判断 Identifier 是否需要处理
+function checkBindThis (path) {
+  return !(t.isDeclaration(path.parent) && path.parentKey === 'id') &&
+    !(t.isFunction(path.parent) && path.listKey === 'params') &&
+    !(t.isMethod(path.parent) && path.parentKey === 'key' && !path.parent.computed) &&
+    !(t.isProperty(path.parent) && path.parentKey === 'key' && !path.parent.computed) &&
+    !(t.isMemberExpression(path.parent) && path.parentKey === 'property' && !path.parent.computed) &&
+    !t.isArrayPattern(path.parent) &&
+    !t.isObjectPattern(path.parent) &&
+    !hash[path.node.name]
+}
+
+// 计算访问路径
+function calPropName (path) {
+  let current = path.parentPath
+  let last = path
+  let keyPath = '' + path.node.name
+
+  while (current.isMemberExpression() && last.parentKey !== 'property') {
+    if (current.node.computed) {
+      if (t.isLiteral(current.node.property)) {
+        if (t.isStringLiteral(current.node.property)) {
+          if (dangerousKeyMap[current.node.property.value]) {
+            break
+          }
+          keyPath += `.${current.node.property.value}`
+        } else {
+          keyPath += `[${current.node.property.value}]`
+        }
+      } else {
+        break
+      }
+    } else {
+      if (dangerousKeyMap[current.node.property.name]) {
+        break
+      }
+      keyPath += `.${current.node.property.name}`
+    }
+    last = current
+    current = current.parentPath
+  }
+
+  return {
+    last,
+    keyPath
+  }
+}
+
+function checkDelAndGetPath (path) {
+  let current = path
+  let delPath = path
+  let canDel = true
+  let ignore = false
+  let replace = false
+
+  // 确定删除路径
+  while (!t.isBlockStatement(current)) {
+    // case: !!a
+    if (t.isUnaryExpression(current.parent) && current.key === 'argument') {
+      delPath = current.parentPath
+    } else if (t.isCallExpression(current.parent)) {
+      // case: String(a) || this._p(a)
+      const args = current.node.arguments || current.parent.arguments || []
+      if (args.length === 1) {
+        delPath = current.parentPath
+      } else {
+        // case: this._i(a, function() {})
+        canDel = false
+        break
+      }
+    } else if (t.isMemberExpression(current.parent)) { // case: String(a,'123').b.c
+      if (current.parent.computed && !t.isLiteral(current.parent.property)) { // case: a[b] or a.b[c.d]
+        canDel = false
+        break
+      } else {
+        delPath = current.parentPath
+      }
+    } else {
+      break
+    }
+
+    current = current.parentPath
+  }
+
+  // 确定是否可删除
+  while (!t.isBlockStatement(current) && canDel) {
+    const { key, container } = current
+    if (
+      t.isLogicalExpression(container) || // a && b
+      (t.isIfStatement(container) && key === 'test') // if (a) {}
+    ) {
+      canDel = false
+      break
+    }
+
+    if (t.isConditionalExpression(container)) {
+      if (key === 'test') canDel = false
+      else ignore = true
+      break
+    }
+
+    if (
+      t.isBinaryExpression(container) || // 运算 a + b
+      (key === 'value' && t.isObjectProperty(container) && canDel) // ({ name: a })
+    ) {
+      canDel = true
+      replace = true
+      // 不能break，case: if (a + b) {}
+    }
+
+    current = current.parentPath
+  }
+
+  return {
+    delPath,
+    canDel,
+    ignore,
+    replace
+  }
+}
+
+// 判断前缀是否存在(只判断前缀，全等的情况，会返回false)
+function checkPrefix (keys, key) {
+  for (let i = 0; i < keys.length; i++) {
+    const str = keys[i]
+    if (key === str) continue
+    // 确保判断当前标识是完整的单词
+    if (key.startsWith(str) && (key[str.length] === '.' || key[str.length] === '[')) return true
+  }
+  return false
+}
+
+function dealRemove (path, replace) {
+  while (path.key === 'expression' && t.isExpressionStatement(path.parentPath)) {
+    path = path.parentPath
+  }
+
+  try {
+    if (replace) {
+      path.replaceWith(t.stringLiteral(''))
+    } else {
+      t.validate(path, path.key, null)
+      path.remove()
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
 module.exports = {
   transform (code, {
     needCollect = false,
+    renderReduce = false,
     ignoreMap = {}
   } = {}) {
     const ast = babylon.parse(code, {
@@ -30,10 +180,71 @@ module.exports = {
       ]
     })
 
+    let currentBlock = null
+    const bindingsMap = new Map()
+
     const propKeys = []
     let isProps = false
 
+    const collectVisitor = {
+      BlockStatement: {
+        enter (path) { // 收集作用域下所有变量(keyPath)
+          bindingsMap.set(path, {
+            parent: currentBlock,
+            bindings: {}
+          })
+          currentBlock = path
+        },
+        exit (path) {
+          currentBlock = bindingsMap.get(path).parent
+        }
+      },
+      Identifier (path) {
+        if (
+          checkBindThis(path) &&
+          !path.scope.hasBinding(path.node.name) &&
+          !ignoreMap[path.node.name]
+        ) {
+          const { last, keyPath } = calPropName(path)
+          path.needBind = true
+          if (needCollect) {
+            last.collectPath = t.stringLiteral(keyPath)
+          }
+
+          if (!renderReduce) return
+
+          const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path)
+          if (ignore) return
+
+          delPath.delInfo = {
+            keyPath,
+            canDel,
+            replace
+          }
+
+          const { bindings } = bindingsMap.get(currentBlock)
+          const target = bindings[keyPath] || []
+          target.push({
+            path: delPath,
+            canDel
+          })
+          bindings[keyPath] = target
+        }
+      }
+    }
+
     const bindThisVisitor = {
+      BlockStatement: {
+        enter (path) {
+          const scope = bindingsMap.get(path)
+          const parentScope = bindingsMap.get(scope.parent)
+          scope.pBindings = parentScope ? Object.assign({}, parentScope.bindings, parentScope.pBindings) : {}
+          currentBlock = path
+        },
+        exit (path) {
+          currentBlock = bindingsMap.get(path).parent
+        }
+      },
       // 标记收集props数据
       CallExpression: {
         enter (path) {
@@ -50,76 +261,65 @@ module.exports = {
         exit (path) {
           if (path.isProps) {
             // 移除无意义的__props调用
-            path.replaceWith(path.node.arguments[0])
+            const args = path.node.arguments[0]
+            path.replaceWith(args)
             isProps = false
             delete path.isProps
           }
         }
       },
-      Identifier (path) {
-        if (
-          !(t.isDeclaration(path.parent) && path.parentKey === 'id') &&
-          !(t.isFunction(path.parent) && path.listKey === 'params') &&
-          !(t.isMethod(path.parent) && path.parentKey === 'key' && !path.parent.computed) &&
-          !(t.isProperty(path.parent) && path.parentKey === 'key' && !path.parent.computed) &&
-          !(t.isMemberExpression(path.parent) && path.parentKey === 'property' && !path.parent.computed) &&
-          !t.isArrayPattern(path.parent) &&
-          !t.isObjectPattern(path.parent) &&
-          !hash[path.node.name]
-        ) {
-          let current
-          let last
-          if (!path.scope.hasBinding(path.node.name) && !ignoreMap[path.node.name]) {
-            // bind this
-            path.replaceWith(t.memberExpression(t.thisExpression(), path.node))
+      // enter 先于特定标识执行
+      enter (path) {
+        // 删除重复变量
+        if (path.delInfo) {
+          const { keyPath, canDel, replace } = path.delInfo
+          delete path.delInfo
 
-            if (isProps) {
-              propKeys.push(path.node.property.name)
-            }
+          if (canDel) {
+            const data = bindingsMap.get(currentBlock)
+            const { bindings, pBindings } = data
+            const allBindings = Object.assign({}, pBindings, bindings)
 
-            if (needCollect) {
-              // 找到访问路径
-              current = path.parentPath
-              last = path
-              let keyPath = '' + path.node.property.name
-              while (current.isMemberExpression() && last.parentKey !== 'property') {
-                if (current.node.computed) {
-                  if (t.isLiteral(current.node.property)) {
-                    if (t.isStringLiteral(current.node.property)) {
-                      if (dangerousKeyMap[current.node.property.value]) {
-                        break
-                      }
-                      keyPath += `.${current.node.property.value}`
-                    } else {
-                      keyPath += `[${current.node.property.value}]`
-                    }
-                  } else {
-                    break
-                  }
-                } else {
-                  if (dangerousKeyMap[current.node.property.name]) {
-                    break
-                  }
-                  keyPath += `.${current.node.property.name}`
+            // 优先判断前缀，再判断全等
+            if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) {
+              dealRemove(path, replace)
+              return
+            } else {
+              const currentBlockVars = bindings[keyPath]
+              if (currentBlockVars.length > 1) {
+                const index = currentBlockVars.findIndex(item => !item.canDel)
+                if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量
+                  dealRemove(path, replace)
+                  return
                 }
-                last = current
-                current = current.parentPath
               }
-              last.collectPath = t.stringLiteral(keyPath)
             }
           }
         }
+
+        // bind this 将 a 转换成 this.a
+        if (path.needBind) {
+          const name = path.node.name
+          if (name) { // 确保path没有被删除 且 没有被替换成字符串
+            if (isProps) {
+              propKeys.push(name)
+            }
+            path.replaceWith(t.memberExpression(t.thisExpression(), path.node))
+          }
+          delete path.needBind
+        }
       },
       MemberExpression: {
         exit (path) {
           if (path.collectPath) {
-            path.replaceWith(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('_c')), [path.collectPath, path.node]))
+            path.node && path.replaceWith(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('_c')), [path.collectPath, path.node]))
             delete path.collectPath
           }
         }
       }
     }
 
+    traverse(ast, collectVisitor)
     traverse(ast, bindThisVisitor)
 
     return {

package/lib/template-compiler/compiler.js

@@ -10,40 +10,13 @@ const getRulesRunner = require('../platform/index')
 const addQuery = require('../utils/add-query')
 const transDynamicClassExpr = require('./trans-dynamic-class-expr')
 const dash2hump = require('../utils/hump-dash').dash2hump
-
-/**
- * Make a map and return a function for checking if a key
- * is in that map.
- */
-function makeMap (str, expectsLowerCase) {
-  const map = Object.create(null)
-  const list = str.split(',')
-  for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true
-  }
-  return expectsLowerCase
-    ? function (val) {
-      return map[val.toLowerCase()]
-    }
-    : function (val) {
-      return map[val]
-    }
-}
+const makeMap = require('../utils/make-map')
+const { isNonPhrasingTag } = require('../utils/dom-tag-config')
 
 const no = function () {
   return false
 }
 
-// HTML5 tags https://html.spec.whatwg.org/multipage/indices.html#elements-3
-// Phrasing Content https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
-const isNonPhrasingTag = makeMap(
-  'address,article,aside,base,blockquote,body,caption,col,colgroup,dd,' +
-  'details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,' +
-  'h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,' +
-  'optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,' +
-  'title,tr,track'
-)
-
 /*!
  * HTML Parser By John Resig (ejohn.org)
  * Modified by Juriy "kangax" Zaytsev
@@ -653,6 +626,9 @@ function parse (template, options) {
     srcMode,
     type: 'template',
     testKey: 'tag',
+    data: {
+      usingComponents: options.usingComponents
+    },
     warn: _warn,
     error: _error
   })

package/lib/template-compiler/index.js

@@ -20,6 +20,7 @@ module.exports = function (raw) {
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
   const componentsMap = mpx.componentsMap[packageName]
   const wxsContentMap = mpx.wxsContentMap
+  const renderOptimizeRules = mpx.renderOptimizeRules
   const usingComponents = queryObj.usingComponents || []
   const componentPlaceholder = queryObj.componentPlaceholder || []
   const hasComment = queryObj.hasComment
@@ -97,6 +98,7 @@ global.currentInject = {
   try {
     bindResult = bindThis(rawCode, {
       needCollect: true,
+      renderReduce: matchCondition(resourcePath, renderOptimizeRules),
       ignoreMap: meta.wxsModuleMap
     })
   } catch (e) {

package/lib/utils/dom-tag-config.js

@@ -0,0 +1,101 @@
+// These tag configs are shared between compiler-dom and runtime-dom, so they
+// must be extracted in shared to avoid creating a dependency between the two.
+const makeMap = require('./make-map')
+
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+const HTML_TAGS =
+  'html,body,base,head,link,meta,style,title,address,article,aside,footer,' +
+  'header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,' +
+  'figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,' +
+  'data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,' +
+  'time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,' +
+  'canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,' +
+  'th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,' +
+  'option,output,progress,select,textarea,details,dialog,menu,' +
+  'summary,template,blockquote,iframe,tfoot'
+
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Element
+const SVG_TAGS =
+  'svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,' +
+  'defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,' +
+  'feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,' +
+  'feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,' +
+  'feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,' +
+  'fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,' +
+  'foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,' +
+  'mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,' +
+  'polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,' +
+  'text,textPath,title,tspan,unknown,use,view'
+
+const VOID_TAGS =
+  'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr'
+
+// HTML5 tags https://html.spec.whatwg.org/multipage/indices.html#elements-3
+// Phrasing Content https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
+const isNonPhrasingTag = makeMap(
+  'address,article,aside,base,blockquote,body,caption,col,colgroup,dd,' +
+  'details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,' +
+  'h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,' +
+  'optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,' +
+  'title,tr,track'
+)
+
+const isRichTextTag = makeMap(
+  'a,abbr,address,article,aside,b,bdi,bdo,big,blockquote,br,caption,' +
+  'center,cite,code,col,colgroup,dd,del,div,dl,dt,em,fieldset,' +
+  'font,footer,h1,h2,h3,h4,h5,h6,header,hr,i,img,ins,label,legend,' +
+  'li,mark,nav,ol,p,pre,q,rt,ruby,s,section,small,span,strong,sub,sup,' +
+  'table,tbody,td,tfoot,th,thead,tr,tt,u,ul'
+)
+
+const isUnaryTag = makeMap(
+  'area,base,br,col,embed,frame,hr,img,input,isindex,keygen,' +
+  'link,meta,param,source,track,wbr'
+)
+
+// https://developers.weixin.qq.com/miniprogram/dev/component/
+// 以后可能在框架中原生支持这些标签，所以需要进行判断
+const isNativeMiniTag = makeMap(
+  'cover-image,cover-view,match-media,movable-area,movable-view,' +
+  'page-container,root-portal,scroll-view,swiper,swiper-item,view,' +
+  'icon,progress,rich-text,text,button,checkbox,checkbox-group,editor,' +
+  'form,input,keyboard-accessory,label,picker,picker-view,' +
+  'picker-view-column,radio,radio-group,slider,switch,textarea,' +
+  'grid-view,list-view,share-element,snapshot,span,sticky-header,' +
+  'sticky-section,functional-page-navigator,navigator,audio,camera,' +
+  'channel-live,channel-video,image,live-player,live-pusher,video,' +
+  'voip-room,map,canvas,web-view,ad,ad-custom,official-account,' +
+  'open-data,native-component,aria-component,page-meta'
+)
+
+const isSpace = makeMap('ensp,emsp,nbsp')
+
+const isContWidth = makeMap('col,colgroup,img,table,td,th,tr')
+
+const isContHeight = makeMap('img,td,th,tr')
+
+const isContConRow = makeMap('td,th,tr')
+
+const isHTMLTag = makeMap(HTML_TAGS)
+
+const isSVGTag = makeMap(SVG_TAGS)
+
+const isVoidTag = makeMap(VOID_TAGS)
+
+// 是否为原始tag，包括 html tag 和小程序原生 tag
+const isOriginTag = (tag) => isHTMLTag(tag) || isSVGTag(tag) || isVoidTag(tag) || isNativeMiniTag(tag)
+
+module.exports = {
+  isOriginTag,
+  isHTMLTag,
+  isSVGTag,
+  isVoidTag,
+  isNonPhrasingTag,
+  isRichTextTag,
+  isUnaryTag,
+  isSpace,
+  isContWidth,
+  isContHeight,
+  isNativeMiniTag,
+  isContConRow
+}

package/lib/utils/make-map.js

@@ -0,0 +1,12 @@
+/**
+ * Make a map and return a function for checking if a key
+ * is in that map.
+ */
+module.exports = function makeMap (str, expectsLowerCase) {
+  const map = Object.create(null)
+  const list = str.split(',')
+  for (let i = 0; i < list.length; i++) {
+    map[list[i]] = true
+  }
+  return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val]
+}

package/lib/utils/string.js

@@ -23,8 +23,14 @@ function capitalToHyphen (v) {
   return ret
 }
 
+// 删除空行
+function trimBlankRow (str) {
+  return str.replace(/^\s*[\r\n]/gm, '')
+}
+
 module.exports = {
   isCapital,
   isMustache,
-  capitalToHyphen
+  capitalToHyphen,
+  trimBlankRow
 }

package/lib/web/processJSON.js

@@ -9,8 +9,10 @@ const parseComponent = require('../parser')
 const getJSONContent = require('../utils/get-json-content')
 const resolve = require('../utils/resolve')
 const createJSONHelper = require('../json-compiler/helper')
+const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
+const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalComponentsDependency')
 
 module.exports = function (json, {
   loaderContext,
@@ -26,6 +28,7 @@ module.exports = function (json, {
   const mpx = loaderContext.getMpx()
   const {
     mode,
+    srcMode,
     env,
     projectRoot
   } = mpx
@@ -75,12 +78,44 @@ module.exports = function (json, {
     })
   }
 
+  const { resourcePath } = parseRequest(loaderContext.resource)
+  const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
+
   if (!json) {
     return callback()
   }
   // 由于json需要提前读取在template处理中使用，src的场景已经在loader中处理了，此处无需考虑json.src的场景
   try {
     jsonObj = JSON5.parse(json.content)
+    // 处理runner
+    const rulesRunnerOptions = {
+      mode,
+      srcMode,
+      type: 'json',
+      waterfall: true,
+      warn: emitWarning,
+      error: emitError,
+      data: {
+        // polyfill global usingComponents & record globalComponents
+        globalComponents: mpx.usingComponents
+      }
+    }
+
+    if (!isApp) {
+      rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
+    }
+
+    const rulesRunner = getRulesRunner(rulesRunnerOptions)
+
+    if (rulesRunner) {
+      rulesRunner(jsonObj)
+    }
+    if (isApp) {
+      // 收集全局组件
+      Object.assign(mpx.usingComponents, jsonObj.usingComponents)
+      // 在 rulesRunner 运行后保存全局注册组件
+      loaderContext._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.usingComponents, loaderContext.context))
+    }
   } catch (e) {
     return callback(e)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.48",
+  "version": "2.8.50",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -29,7 +29,6 @@
     "@better-scroll/zoom": "^2.5.1",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
-    "consolidate": "^0.15.1",
     "css": "^2.2.1",
     "css-selector-tokenizer": "^0.7.0",
     "cssnano": "^5.0.16",
@@ -82,5 +81,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "4cbd364322aadc0e9727a0d852ca3ca1c8e0b1ca"
+  "gitHead": "32f30631cc5f37503fb7791cb3b0d6c901ee2b27"
 }

package/lib/json-compiler/default-page.mpx

@@ -1,3 +0,0 @@
-<template>
-  <view>局部构建兜底页面</view>
-</template>

package/lib/template-compiler/preprocessor.js

@@ -1,29 +0,0 @@
-// loader for pre-processing templates with e.g. pug
-
-const cons = require('consolidate')
-const loaderUtils = require('loader-utils')
-
-module.exports = function (content) {
-  this.cacheable && this.cacheable()
-  const callback = this.async()
-  const opt = loaderUtils.getOptions(this) || {}
-
-  if (!cons[opt.engine]) {
-    return callback(new Error(
-      'Template engine \'' + opt.engine + '\' ' +
-      'isn\'t available in Consolidate.js'
-    ))
-  }
-
-  const templateOption = opt.templateOption
-
-  // for relative includes
-  templateOption.filename = this.resourcePath
-
-  cons[opt.engine].render(content, templateOption, function (err, html) {
-    if (err) {
-      return callback(err)
-    }
-    callback(null, html)
-  })
-}