@mpxjs/webpack-plugin 2.9.9 → 2.9.12

package/lib/index.js

@@ -328,30 +328,39 @@ class MpxWebpackPlugin {
     compiler.options.resolve.plugins.push(new FixDescriptionInfoPlugin())
 
     const optimization = compiler.options.optimization
-    optimization.runtimeChunk = {
-      name: (entrypoint) => {
-        for (const packageName in mpx.independentSubpackagesMap) {
-          if (hasOwn(mpx.independentSubpackagesMap, packageName) && isChunkInPackage(entrypoint.name, packageName)) {
-            return `${packageName}/bundle`
+    if (this.options.mode !== 'web') {
+      optimization.runtimeChunk = {
+        name: (entrypoint) => {
+          for (const packageName in mpx.independentSubpackagesMap) {
+            if (hasOwn(mpx.independentSubpackagesMap, packageName) && isChunkInPackage(entrypoint.name, packageName)) {
+              return `${packageName}/bundle`
+            }
           }
+          return 'bundle'
         }
-        return 'bundle'
       }
     }
-    const splitChunksOptions = Object.assign({
-      defaultSizeTypes: ['javascript', 'unknown'],
-      chunks: 'all',
-      usedExports: optimization.usedExports === true,
-      minChunks: 1,
-      minSize: 1000,
-      enforceSizeThreshold: Infinity,
-      maxAsyncRequests: 30,
-      maxInitialRequests: 30,
-      automaticNameDelimiter: '-'
-    }, optimization.splitChunks)
-    delete optimization.splitChunks
-    const splitChunksPlugin = new SplitChunksPlugin(splitChunksOptions)
-    splitChunksPlugin.apply(compiler)
+
+    let splitChunksOptions = null
+    let splitChunksPlugin = null
+    // 输出web ssr需要将optimization.splitChunks设置为false以关闭splitChunks
+    if (optimization.splitChunks !== false) {
+      splitChunksOptions = Object.assign({
+        chunks: 'all',
+        usedExports: optimization.usedExports === true,
+        minChunks: 1,
+        minSize: 1000,
+        enforceSizeThreshold: Infinity,
+        maxAsyncRequests: 30,
+        maxInitialRequests: 30,
+        automaticNameDelimiter: '-',
+        cacheGroups: {}
+      }, optimization.splitChunks)
+      splitChunksOptions.defaultSizeTypes = ['javascript', 'unknown']
+      delete optimization.splitChunks
+      splitChunksPlugin = new SplitChunksPlugin(splitChunksOptions)
+      splitChunksPlugin.apply(compiler)
+    }
 
     // 代理writeFile
     if (this.options.writeMode === 'changed') {
@@ -448,7 +457,6 @@ class MpxWebpackPlugin {
           },
           name: `${packageName}/bundle`,
           minChunks: 2,
-          minSize: 1000,
           priority: 100,
           chunks: 'all'
         }
@@ -953,15 +961,35 @@ class MpxWebpackPlugin {
             }
           }
         }
-        // 自动跟进分包配置修改splitChunksPlugin配置
+        // 自动使用分包配置修改splitChunksPlugin配置
         if (splitChunksPlugin) {
           let needInit = false
-          Object.keys(mpx.componentsMap).forEach((packageName) => {
-            if (!hasOwn(splitChunksOptions.cacheGroups, packageName)) {
+          if (mpx.mode === 'web') {
+            // web独立处理splitChunk
+            if (!hasOwn(splitChunksOptions.cacheGroups, 'main')) {
+              splitChunksOptions.cacheGroups.main = {
+                chunks: 'initial',
+                name: 'bundle',
+                test: /[\\/]node_modules[\\/]/
+              }
               needInit = true
-              splitChunksOptions.cacheGroups[packageName] = getPackageCacheGroup(packageName)
             }
-          })
+            if (!hasOwn(splitChunksOptions.cacheGroups, 'async')) {
+              splitChunksOptions.cacheGroups.async = {
+                chunks: 'async',
+                name: 'async',
+                minChunks: 2
+              }
+              needInit = true
+            }
+          } else {
+            Object.keys(mpx.componentsMap).forEach((packageName) => {
+              if (!hasOwn(splitChunksOptions.cacheGroups, packageName)) {
+                splitChunksOptions.cacheGroups[packageName] = getPackageCacheGroup(packageName)
+                needInit = true
+              }
+            })
+          }
           if (needInit) {
             splitChunksPlugin.options = new SplitChunksPlugin(splitChunksOptions).options
           }

package/lib/runtime/components/web/mpx-keep-alive.vue

@@ -39,7 +39,7 @@
     render: function render () {
       const slot = this.$slots.default
       const vnode = getFirstComponentChild(slot)
-      if (!isBrowser) {
+      if (!isBrowser || !vnode) {
         return vnode || (slot && slot[0])
       }
       const router = global.__mpxRouter

package/lib/runtime/optionProcessor.js

@@ -325,7 +325,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
   }
 }
 
-export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue, VueRouter, tabBarMap, webConfig }) {
+export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue, VueRouter, tabBarMap, el }) {
   if (!isBrowser) {
     return context => {
       const { app, router, pinia = {} } = createApp({
@@ -364,6 +364,6 @@ export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue
     if (window.__INITIAL_STATE__ && pinia) {
       pinia.state.value = window.__INITIAL_STATE__
     }
-    app.$mount(webConfig.el || '#app')
+    app.$mount(el)
   }
 }

package/lib/style-compiler/index.js

@@ -82,9 +82,9 @@ module.exports = function (css, map) {
       }
     }
 
-    plugins.push(...config.plugins) // push user config plugins
+    const finalPlugins = config.prePlugins.concat(plugins, config.plugins)
 
-    return postcss(plugins)
+    return postcss(finalPlugins)
       .process(css, options)
       .then(result => {
         // ali环境添加全局样式抹平root差异

package/lib/style-compiler/load-postcss-config.js

@@ -1,4 +1,5 @@
 const load = require('postcss-load-config')
+const loadPlugins = require('postcss-load-config/src/plugins')
 
 let loaded
 
@@ -28,19 +29,26 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
     })
   }
 
-  return loaded.then(config => {
+  return loaded.then((config = {}) => {
     let plugins = inlineConfig.plugins || []
     let options = inlineConfig.options || {}
+    let prePlugins = inlineConfig.prePlugins || []
 
     // merge postcss config file
-    if (config && config.plugins) {
+    if (config.plugins) {
       plugins = plugins.concat(config.plugins)
     }
-    if (config && config.options) {
+    if (config.options) {
+      if (config.options.mpxPrePlugins) {
+        // 使入参和postcss格式保持一致
+        prePlugins = prePlugins.concat(loadPlugins({ plugins: config.options.mpxPrePlugins }, config.file))
+        delete config.options.mpxPrePlugins
+      }
       options = Object.assign({}, config.options, options)
     }
 
     return {
+      prePlugins,
       plugins,
       options
     }

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

@@ -121,24 +121,19 @@ function checkDelAndGetPath (path) {
     }
 
     if (t.isLogicalExpression(container)) { // case: a || ((b || c) && d)
-      ignore = true
-      break
-    }
-
-    // case: a ??= b
-    if (
-      key === 'right' &&
-      t.isAssignmentExpression(container) &&
-      ['??=', '||=', '&&='].includes(container.operator)
-    ) {
+      canDel = false
       ignore = true
       break
     }
 
     if (t.isConditionalExpression(container)) {
-      if (key === 'test') canDel = false
-      else ignore = true
-      break
+      if (key === 'test') {
+        canDel = false
+        break
+      } else {
+        ignore = true
+        replace = true
+      }
     }
 
     if (
@@ -229,11 +224,10 @@ module.exports = {
           // 删除局部作用域的变量
           if (scopeBinding) {
             if (renderReduce) {
-              const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path)
-              if (canDel && !ignore) {
+              const { delPath, canDel, replace } = checkDelAndGetPath(path)
+              if (canDel) {
                 delPath.delInfo = {
                   isLocal: true,
-                  canDel,
                   replace
                 }
               }
@@ -252,14 +246,16 @@ module.exports = {
           if (!renderReduce) return
 
           const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path)
-          if (ignore) return
 
-          delPath.delInfo = {
-            keyPath,
-            canDel,
-            replace
+          if (canDel) {
+            delPath.delInfo = {
+              keyPath,
+              replace
+            }
           }
 
+          if (ignore) return // ignore不计数，不需要被统计
+
           const { bindings } = bindingsMap.get(currentBlock)
           const target = bindings[keyPath] || []
           target.push({
@@ -310,28 +306,26 @@ module.exports = {
       enter (path) {
         // 删除重复变量
         if (path.delInfo) {
-          const { keyPath, canDel, isLocal, replace } = path.delInfo
+          const { keyPath, isLocal, replace } = path.delInfo
           delete path.delInfo
 
-          if (canDel) {
-            if (isLocal) { // 局部作用域里的变量，可直接删除
-              dealRemove(path, replace)
-              return
-            }
-            const data = bindingsMap.get(currentBlock)
-            const { bindings, pBindings } = data
-            const allBindings = Object.assign({}, pBindings, bindings)
-
-            // 优先判断前缀，再判断全等
-            if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) {
-              dealRemove(path, replace)
-            } 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)
-                }
+          if (isLocal) { // 局部作用域里的变量，可直接删除
+            dealRemove(path, replace)
+            return
+          }
+          const data = bindingsMap.get(currentBlock)
+          const { bindings, pBindings } = data
+          const allBindings = Object.assign({}, pBindings, bindings)
+
+          // 优先判断前缀，再判断全等
+          if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) {
+            dealRemove(path, replace)
+          } 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)
               }
             }
           }

package/lib/web/processMainScript.js

@@ -1,3 +1,4 @@
+// 该文件下的字符串语句需要使用 es5 语法
 const addQuery = require('../utils/add-query')
 const normalize = require('../utils/normalize')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
@@ -64,7 +65,7 @@ module.exports = function (script, {
     globalTabBar
   })
 
-  output += `\n  const App = require(${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}).default\n`
+  output += `\n  var App = require(${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}).default\n`
 
   output += `
   export default processAppOption({
@@ -75,7 +76,7 @@ module.exports = function (script, {
     componentsMap: ${shallowStringify(componentsMap)},
     Vue,
     VueRouter,
-    webConfig: ${JSON.stringify(webConfig)}
+    el: ${JSON.stringify(webConfig.el || '#app')}
   })\n`
 
   callback(null, {

package/lib/web/script-helper.js

@@ -69,7 +69,9 @@ function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBa
       if (pageCfg) {
         const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
         if (pageCfg.async) {
-          tabBarPagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)}${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+          tabBarPagesMap[pagePath] = `function() {
+            return import(${getAsyncChunkName(pageCfg.async)}${pageRequest}).then(function(res) {return getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} })});
+          }`
         } else {
           tabBarPagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
         }
@@ -94,7 +96,9 @@ function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBa
       pagesMap[pagePath] = `getComponent(require(${stringifyRequest(loaderContext, tabBarContainerPath)}), { __mpxBuiltIn: true })`
     } else {
       if (pageCfg.async) {
-        pagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+        pagesMap[pagePath] = `function() {
+          return import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(function(res){ return getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} })});
+        }`
       } else {
         // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
         pagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
@@ -132,12 +136,12 @@ function buildGlobalParams ({ moduleId, scriptSrcMode, loaderContext, isProducti
     if (!(typeof window !== 'undefined')) {
       console.error('[Mpx runtime error]: Dangerous API! global.getCurrentPages is running in non browser environment, It may cause some problems, please use this method with caution')
     }
-    const router = global.__mpxRouter
+    var router = global.__mpxRouter
     if(!router) return []
     // @ts-ignore
-    return (router.lastStack || router.stack).map(item => {
-      let page
-      const vnode = item.vnode
+    return (router.lastStack || router.stack).map(function(item){
+      var page
+      var vnode = item.vnode
       if (vnode && vnode.componentInstance) {
         page = vnode.tag.endsWith('mpx-tab-bar-container') ? vnode.componentInstance.$refs.tabBarPage : vnode.componentInstance
       }
@@ -178,13 +182,13 @@ function buildI18n ({ i18n, loaderContext }) {
       delete i18nObj[`${key}Path`]
     }
   })
-  i18nContent += `  const i18nCfg = ${JSON.stringify(i18nObj)}\n`
+  i18nContent += `  var i18nCfg = ${JSON.stringify(i18nObj)}\n`
   Object.keys(requestObj).forEach((key) => {
     i18nContent += `  i18nCfg.${key} = require(${requestObj[key]})\n`
   })
   i18nContent += `
   i18nCfg.legacy = false
-  const i18n = createI18n(i18nCfg, VueI18n)
+  var i18n = createI18n(i18nCfg, VueI18n)
   Vue.use(i18n)
   Mpx.i18n = i18n\n`
   return i18nContent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.9",
+  "version": "2.9.12",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -83,5 +83,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "7ec6526f024c00f9c6b935c631bfdc61be27b69b"
+  "gitHead": "f4f0a46610bed836be92b95417c6d66087d7cb0d"
 }