fix(mini-runner): 使用 addChunkPages 时，页面引入的组件也需要引用抽离的 chunks，close #5580

packages/taro-mini-runner/src/plugins/MiniPlugin.ts

@@ -14,10 +14,9 @@ import * as t from 'babel-types'
 import traverse from 'babel-traverse'
 import { Config as IConfig, PageConfig } from '@tarojs/taro'
 import * as _ from 'lodash'
-import { SyncHook } from 'tapable'
 
 import { REG_TYPESCRIPT, BUILD_TYPES, PARSE_AST_TYPE, MINI_APP_FILES, NODE_MODULES_REG, CONFIG_MAP, taroJsFramework, taroJsQuickAppComponents, REG_SCRIPTS, processTypeEnum } from '../utils/constants'
-import { IComponentObj, AddPageChunks } from '../utils/types'
+import { IComponentObj, AddPageChunks, IComponent } from '../utils/types'
 import { resolveScriptPath, buildUsingComponents, isNpmPkg, resolveNpmSync, isEmptyObject, promoteRelativePath, printLog, isAliasPath, replaceAliasPath } from '../utils'
 import TaroSingleEntryDependency from '../dependencies/TaroSingleEntryDependency'
 import { getTaroJsQuickAppComponentsPath, generateQuickAppUx, getImportTaroSelfComponents, getImportCustomComponents, generateQuickAppManifest } from '../utils/helper'
@@ -56,14 +55,6 @@ export interface ITaroFileInfo {
   }
 }
 
-interface IComponent {
-  name: string,
-  path: string,
-  isNative: boolean,
-  stylePath?: string,
-  templatePath?: string
-}
-
 const PLUGIN_NAME = 'MiniPlugin'
 
 let taroFileTypeMap: ITaroFileInfo = {}
@@ -161,6 +152,7 @@ export default class MiniPlugin {
   errors: any[]
   changedFileType: PARSE_AST_TYPE | undefined
   addedComponents: Set<IComponent>
+  pageComponentsDependenciesMap: Map<string, Set<IComponentObj>>
 
   constructor (options = {}) {
     this.options = defaults(options || {}, {
@@ -184,6 +176,7 @@ export default class MiniPlugin {
     this.isWatch = false
     this.errors = []
     this.addedComponents = new Set()
+    this.pageComponentsDependenciesMap = new Map()
   }
 
   tryAsync = fn => async (arg, callback) => {
@@ -198,11 +191,19 @@ export default class MiniPlugin {
   apply (compiler) {
     this.context = compiler.context
     this.appEntry = this.getAppEntry(compiler)
-    compiler.hooks.getPages = new SyncHook(['pages'])
     compiler.hooks.run.tapAsync(
 			PLUGIN_NAME,
 			this.tryAsync(async (compiler: webpack.Compiler) => {
-				await this.run(compiler)
+        await this.run(compiler)
+        new TaroLoadChunksPlugin({
+          commonChunks: this.options.commonChunks,
+          buildAdapter: this.options.buildAdapter,
+          isBuildPlugin: this.options.isBuildPlugin,
+          addChunkPages: this.options.addChunkPages,
+          pages: this.pages,
+          depsMap: this.pageComponentsDependenciesMap,
+          sourceDir: this.sourceDir
+        }).apply(compiler)
 			})
     )
 
@@ -215,6 +216,15 @@ export default class MiniPlugin {
         } else {
           await this.watchRun(compiler, changedFiles)
         }
+        new TaroLoadChunksPlugin({
+          commonChunks: this.options.commonChunks,
+          buildAdapter: this.options.buildAdapter,
+          isBuildPlugin: this.options.isBuildPlugin,
+          addChunkPages: this.options.addChunkPages,
+          pages: this.pages,
+          depsMap: this.pageComponentsDependenciesMap,
+          sourceDir: this.sourceDir
+        }).apply(compiler)
 			})
     )
 
@@ -256,13 +266,6 @@ export default class MiniPlugin {
       })
     )
 
-    new TaroLoadChunksPlugin({
-      commonChunks: this.options.commonChunks,
-      buildAdapter: this.options.buildAdapter,
-      isBuildPlugin: this.options.isBuildPlugin,
-      addChunkPages: this.options.addChunkPages
-    }).apply(compiler)
-
     new TaroNormalModulesPlugin().apply(compiler)
   }
 
@@ -530,7 +533,6 @@ export default class MiniPlugin {
           }
         })
       ])
-      ;(compiler.hooks as any).getPages.call(this.pages)
     } catch (error) {
       if (error.codeFrame) {
         this.errors.push(new Error(error.message + '\n' + error.codeFrame))
@@ -771,6 +773,7 @@ export default class MiniPlugin {
           }))
         }
         if (depComponents && depComponents.length) {
+          const componentsList = new Set<IComponentObj>()
           depComponents.forEach(item => {
             const componentPath = resolveScriptPath(path.resolve(path.dirname(file.path), item.path))
             if (fs.existsSync(componentPath) && !Array.from(this.components).some(item => item.path === componentPath)) {
@@ -786,6 +789,8 @@ export default class MiniPlugin {
               }
               this.components.add(componentObj)
               this.addedComponents.add(componentObj)
+              componentsList.add(componentObj)
+              this.pageComponentsDependenciesMap.set(file.path, componentsList)
               this.getComponents(compiler, new Set([componentObj]), false)
             }
           })

packages/taro-mini-runner/src/plugins/TaroLoadChunksPlugin.ts

@@ -6,40 +6,68 @@ import { urlToRequest } from 'loader-utils'
 
 import { PARSE_AST_TYPE, REG_STYLE, BUILD_TYPES } from '../utils/constants'
 import { promoteRelativePath } from '../utils'
-import { AddPageChunks } from '../utils/types'
+import { AddPageChunks, IComponent, IComponentObj } from '../utils/types'
 
 const PLUGIN_NAME = 'TaroLoadChunksPlugin'
 
 interface IOptions {
   commonChunks: string[],
   buildAdapter: BUILD_TYPES,
   isBuildPlugin: boolean,
-  addChunkPages?: AddPageChunks
+  addChunkPages?: AddPageChunks,
+  pages: Set<IComponent>,
+  depsMap: Map<string, Set<IComponentObj>>
+  sourceDir: string
 }
 
 export default class TaroLoadChunksPlugin {
   commonChunks: string[]
   buildAdapter: BUILD_TYPES
   isBuildPlugin: boolean
   addChunkPages?: AddPageChunks
+  pages: Set<IComponent>,
+  depsMap: Map<string, Set<IComponentObj>>
+  sourceDir: string
 
   constructor (options: IOptions) {
     this.commonChunks = options.commonChunks
     this.buildAdapter = options.buildAdapter
     this.isBuildPlugin = options.isBuildPlugin
     this.addChunkPages = options.addChunkPages
+    this.pages = options.pages
+    this.depsMap = options.depsMap
+    this.sourceDir = options.sourceDir
   }
 
   apply (compiler: webpack.Compiler) {
-    let pagesList
-    const addChunkPagesList = new Map<string, string[]>();
-    (compiler.hooks as any).getPages.tap(PLUGIN_NAME, pages => {
-      pagesList = pages
-    })
+    const pagesList = this.pages
+    const addChunkPagesList = new Map<string, string[]>()
+    const depsMap = this.depsMap
     compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation: any) => {
       let commonChunks
+      let fileChunks = new Map()
+      let allDepsComponents = new Set()
       compilation.hooks.afterOptimizeChunks.tap(PLUGIN_NAME, (chunks: compilation.Chunk[]) => {
         commonChunks = chunks.filter(chunk => this.commonChunks.includes(chunk.name)).reverse()
+        this.addChunkPages(addChunkPagesList, Array.from(pagesList).map((item: any) => item.name))
+        chunks.forEach(chunk => {
+          const id = getIdOrName(chunk)
+          addChunkPagesList.forEach((v, k) => {
+            if (k === id) {
+              const depChunks = v.map(v => ({ name: v }))
+              fileChunks.set(id, depChunks)
+              let entryModule = chunk.entryModule.rootModule ? chunk.entryModule.rootModule : chunk.entryModule
+              if (entryModule) {
+                const depsComponents = getAllDepComponents(entryModule.resource, depsMap)
+                depsComponents.forEach(component => {
+                  const id = component.path.replace(this.sourceDir + path.sep, '').replace(path.extname(component.path), '').replace(/\\{1,}/g, '/')
+                  const oriDep = fileChunks.get(id) || []
+                  fileChunks.set(id, Array.from(new Set([...oriDep, ...depChunks])))
+                })
+              }
+            }
+          })
+        })
       })
       compilation.chunkTemplate.hooks.renderWithEntry.tap(PLUGIN_NAME, (modules, chunk) => {
         if (chunk.entryModule) {
@@ -77,13 +105,14 @@ export default class TaroLoadChunksPlugin {
             entryModule.miniType === PARSE_AST_TYPE.COMPONENT)) {
             return addRequireToSource(getIdOrName(chunk), modules, commonChunks)
           }
-          if (typeof this.addChunkPages === 'function' && entryModule.miniType === PARSE_AST_TYPE.PAGE) {
-            const id = getIdOrName(chunk)
+          if (fileChunks.size
+            && (entryModule.miniType === PARSE_AST_TYPE.PAGE
+            || entryModule.miniType === PARSE_AST_TYPE.COMPONENT)) {
             let source
-            this.addChunkPages(addChunkPagesList, Array.from(pagesList).map((item: any) => item.name))
-            addChunkPagesList.forEach((v, k) => {
+            const id = getIdOrName(chunk)
+            fileChunks.forEach((v, k) => {
               if (k === id) {
-                source = addRequireToSource(id, modules, v.map(v => ({ name: v })))
+                source = addRequireToSource(id, modules, v)
               }
             })
             return source
@@ -101,6 +130,19 @@ function getIdOrName (chunk) {
   return chunk.name
 }
 
+function getAllDepComponents (filePath, depsMap) {
+  let componentsList = new Set<IComponentObj>()
+  depsMap.forEach((value, key) => {
+    if (filePath === key) {
+      componentsList = new Set<IComponentObj>([...componentsList, ...value])
+      value.forEach(item => {
+        componentsList = new Set<IComponentObj>([...componentsList, ...getAllDepComponents(item.path, depsMap)])
+      })
+    }
+  })
+  return componentsList
+}
+
 function addRequireToSource (id, modules, commonChunks) {
   const source = new ConcatSource()
   commonChunks.forEach(chunkItem => {

packages/taro-mini-runner/src/utils/types.ts

@@ -15,6 +15,14 @@ export interface IComponentObj {
   type?: string
 }
 
+export interface IComponent {
+  name: string,
+  path: string,
+  isNative: boolean,
+  stylePath?: string,
+  templatePath?: string
+}
+
 export interface IChain {
   [key: string]: any
 }