optimize web splitChunks

didi · Dec 25, 2023 · d2d0cff · d2d0cff
1 parent 5077a6d
commit d2d0cff
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 29 deletions.
diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js
@@ -328,30 +328,38 @@ 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 (this.options.mode === 'web' && optimization.splitChunks !== false) {
+      splitChunksOptions = Object.assign({
+        chunks: 'all',
+        usedExports: optimization.usedExports === true,
+        minChunks: 1,
+        minSize: 1000,
+        enforceSizeThreshold: Infinity,
+        maxAsyncRequests: 30,
+        maxInitialRequests: 30,
+        automaticNameDelimiter: '-'
+      }, optimization.splitChunks)
+      splitChunksOptions.defaultSizeTypes = ['javascript', 'unknown']
+      delete optimization.splitChunks
+      splitChunksPlugin = new SplitChunksPlugin(splitChunksOptions)
+      splitChunksPlugin.apply(compiler)
+    }
 
     // 代理writeFile
     if (this.options.writeMode === 'changed') {
@@ -448,7 +456,6 @@ class MpxWebpackPlugin {
           },
           name: `${packageName}/bundle`,
           minChunks: 2,
-          minSize: 1000,
           priority: 100,
           chunks: 'all'
         }
@@ -953,15 +960,39 @@ 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 (!splitChunksOptions.maxSize && !splitChunksOptions.maxAsyncSize && !splitChunksOptions.maxInitialSize) {
+              splitChunksOptions.maxSize = 500000
               needInit = true
-              splitChunksOptions.cacheGroups[packageName] = getPackageCacheGroup(packageName)
             }
-          })
+            if (!hasOwn(splitChunksOptions.cacheGroups, 'main')) {
+              splitChunksOptions.cacheGroups.main = {
+                chunks: 'initial',
+                name: 'bundle',
+                test: /[\\/]node_modules[\\/]/
+              }
+              needInit = true
+            }
+            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
           }

diff --git a/packages/webpack-plugin/lib/runtime/optionProcessor.js b/packages/webpack-plugin/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)
   }
 }
diff --git a/packages/webpack-plugin/lib/web/processMainScript.js b/packages/webpack-plugin/lib/web/processMainScript.js
@@ -75,7 +75,7 @@ module.exports = function (script, {
     componentsMap: ${shallowStringify(componentsMap)},
     Vue,
     VueRouter,
-    webConfig: ${JSON.stringify(webConfig)}
+    el: ${JSON.stringify(webConfig.el || '#app')}
   })\n`
 
   callback(null, {