@taro-minify-pack/plugin-async-pack 0.0.4 → 0.0.5-alpha.1

package/dist/transform-webpack-runtime.js

@@ -42,6 +42,7 @@ const generator_1 = __importDefault(require("@babel/generator"));
 const parser = __importStar(require("@babel/parser"));
 const traverse_1 = __importDefault(require("@babel/traverse"));
 const types = __importStar(require("@babel/types"));
+const utils_1 = require("./utils");
 const webpackLoadDynamicModuleTemplateDep = `
   var loadedDynamicModules = {};
   var loadDynamicModule = function (dynamicModulePath) {
@@ -66,15 +67,14 @@ const webpackLoadDynamicModuleTemplate = `
       inProgress[dynamicModulePath].push(done);
       return;
     }
-
+    
     const target = { src: dynamicModulePath };
 
     if (loadedDynamicModules[dynamicModulePath]) return done({ type: 'loaded', target });
 
     promiseRetry(function () {
       return loadDynamicModule(dynamicModulePath)
-    })
-    .then(function () {
+    }).then(function () {
       return done({ type: 'loaded', target })
     }).catch(function () {
       return done({ type:'error', target })
@@ -96,29 +96,73 @@ const replaceWebpackLoadScriptFn = (assignmentExpressionNodePath, opts) => {
     });
     if (isProcessed)
         return;
-    const { assets, dynamicModuleJsDir } = opts;
-    const dynamicAssets = Object.keys(assets).filter((assetName) => {
-        return new RegExp(`^${dynamicModuleJsDir}/.`).test(assetName);
+    const { assets, dynamicPackageNamePrefix } = opts;
+    const dynamicJsAssets = Object.keys(assets).filter((assetName) => {
+        return (0, utils_1.isDynamicPackageJsAsset)(dynamicPackageNamePrefix, assetName);
+    });
+    const dynamicWXssAssets = Object.keys(assets).filter((assetName) => {
+        return (0, utils_1.isDynamicPackageWXssAsset)(dynamicPackageNamePrefix, assetName);
     });
     const loadDynamicModuleFnMapCode = (() => {
-        const tempCode = dynamicAssets.map((dynamicAsset) => {
-            return `'/${dynamicAsset}':function (){ return require.async('${dynamicAsset}'); }`;
+        const dynamicAssetsRequireTempCode = dynamicJsAssets.map((dynamicJsAsset) => {
+            return `'/${dynamicJsAsset}':function (){ return require.async('~/${dynamicJsAsset}'); }`;
         });
-        return `var loadDynamicModuleFnMap = {${tempCode.join(',')}}`;
+        return `var loadDynamicModuleFnMap = {${dynamicAssetsRequireTempCode.join(',')}}`;
+    })();
+    const hasStyleDynamicAssetsListCode = (() => {
+        const hasStyleDynamicAssetsList = dynamicJsAssets.filter((dynamicJsAsset) => {
+            const matchWXssAssets = dynamicJsAsset.replace(/\.js$/, '.wxss');
+            return dynamicWXssAssets.includes(matchWXssAssets);
+        });
+        return `var hasStyleDynamicModuleList = [${hasStyleDynamicAssetsList.map(item => `'/${item}'`).join(',')}]`;
     })();
     const templateCodeAst = core_1.template.ast(webpackLoadDynamicModuleTemplate);
-    const templateCodeDepAst = core_1.template.ast(webpackLoadDynamicModuleTemplateDep);
     const loadDynamicModuleFnMapAst = core_1.template.ast(loadDynamicModuleFnMapCode);
+    const hasStyleDynamicAssetsListAst = core_1.template.ast(hasStyleDynamicAssetsListCode);
+    const templateCodeDepAst = core_1.template.ast(webpackLoadDynamicModuleTemplateDep);
     assignmentExpressionNodePath.replaceWith(templateCodeAst);
-    assignmentExpressionNodePath.insertBefore(templateCodeDepAst);
     assignmentExpressionNodePath.insertBefore(loadDynamicModuleFnMapAst);
+    assignmentExpressionNodePath.insertBefore(hasStyleDynamicAssetsListAst);
+    assignmentExpressionNodePath.insertBefore(templateCodeDepAst);
 };
 const webpackLoadDynamicModuleStylesheetTemplate = `
-loadStylesheet = function () {
-  return Promise.resolve()
+  __webpack_require__.f.miniCss = function (dynamicStylesheetChunkId, promises) {
+    promises.push(loadStylesheet(dynamicStylesheetChunkId))
+  }
+`;
+const replaceWebpackLoadDynamicModuleStylesheetFn = (assignmentExpressionNodePath) => {
+    const { left, right } = assignmentExpressionNodePath.node || {};
+    if (!types.isMemberExpression(left))
+        return;
+    if (!types.isFunctionExpression(right))
+        return;
+    if (!types.isMemberExpression(left.object))
+        return;
+    if (!types.isIdentifier(left.object.object, { name: '__webpack_require__' }))
+        return;
+    if (!types.isIdentifier(left.object.property, { name: 'f' }))
+        return;
+    if (!types.isIdentifier(left.property, { name: 'miniCss' }))
+        return;
+    const isProcessed = right.params.some((item) => {
+        return types.isIdentifier(item, { name: 'dynamicStylesheetChunkId' });
+    });
+    if (isProcessed)
+        return;
+    const templateCodeAst = core_1.template.expression(webpackLoadDynamicModuleStylesheetTemplate)();
+    assignmentExpressionNodePath.replaceWith(templateCodeAst);
+};
+const webpackLoadStylesheetTemplate = `
+loadStylesheet = function (chunkId) {
+  const href = __webpack_require__.miniCssF(chunkId);
+  const fullHref = __webpack_require__.p + href;
+  const dynamicPackageNameRegex = DYNAMIC_PACKAGE_NAME_REGEX;
+  const [,dynamicPackageName] = fullHref.match(dynamicPackageNameRegex) || [];
+  const { SingletonPromise } = require('~/singleton-promise.js');
+  return SingletonPromise.wait(dynamicPackageName)
 }
 `;
-const replaceLoadStylesheetFn = (nodePath) => {
+const replaceLoadStylesheetFn = (nodePath, opts) => {
     const { id, init } = nodePath.node || {};
     if (!types.isIdentifier(id, { name: 'loadStylesheet' }))
         return;
@@ -127,7 +171,9 @@ const replaceLoadStylesheetFn = (nodePath) => {
     const isProcessed = !init.params.length;
     if (isProcessed)
         return;
-    const templateCodeAst = core_1.template.expression(webpackLoadDynamicModuleStylesheetTemplate)();
+    const { dynamicPackageNamePrefix } = opts;
+    const DYNAMIC_PACKAGE_NAME_REGEX = types.regExpLiteral(`(${dynamicPackageNamePrefix}(?:-[a-z]{2})?)\\/`);
+    const templateCodeAst = core_1.template.expression(webpackLoadStylesheetTemplate)({ DYNAMIC_PACKAGE_NAME_REGEX });
     nodePath.replaceWith(templateCodeAst);
 };
 const removeCreateStylesheetFn = (nodePath) => {
@@ -149,7 +195,7 @@ const transformWebpackRuntime = (code, opts) => {
             replaceWebpackLoadScriptFn(nodePath, opts);
         },
         VariableDeclarator(nodePath) {
-            replaceLoadStylesheetFn(nodePath);
+            replaceLoadStylesheetFn(nodePath, opts);
             removeCreateStylesheetFn(nodePath);
             removeFindStylesheetFn(nodePath);
         }

package/dist/transform-webpack-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"transform-webpack-runtime.js","sourceRoot":"","sources":["../src/transform-webpack-runtime.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"transform-webpack-runtime.js","sourceRoot":"","sources":["../src/transform-webpack-runtime.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 import { Source } from 'webpack-sources';
 export interface AsyncPackOpts {
-    dynamicModuleJsDir: string;
-    dynamicModuleStyleFile: string;
+    dynamicPackageNamePrefix: string;
+    dynamicPackageCount: number;
 }
 export type CompilationAssets = Record<string, Source>;

package/dist/utils.d.ts

@@ -0,0 +1,13 @@
+import { AsyncPackOpts } from './types';
+export declare const generateKeyByOrder: (order: number) => string;
+export declare const hashModBigInt: (hash: string, mod: number) => number;
+export declare const isNumber: (val: any) => boolean;
+export declare const isDynamicPackageName: (prefix: string, packageName: string) => boolean;
+export declare const isDynamicPackageJsAsset: (prefix: string, assetName: string) => boolean;
+export declare const isDynamicPackageWXssAsset: (prefix: string, assetName: string) => boolean;
+export declare const isDynamicPackageWXssAssetWithOrder: (opt: AsyncPackOpts & {
+    order?: number;
+}, assetName: string) => boolean;
+export declare const generateDynamicPackageName: (opt: AsyncPackOpts & {
+    order?: number;
+}) => string;

package/dist/utils.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateDynamicPackageName = exports.isDynamicPackageWXssAssetWithOrder = exports.isDynamicPackageWXssAsset = exports.isDynamicPackageJsAsset = exports.isDynamicPackageName = exports.isNumber = exports.hashModBigInt = exports.generateKeyByOrder = void 0;
+const generateKeyByOrder = (order) => {
+    const startStr = 'a'.charCodeAt(0);
+    const firstLetter = String.fromCharCode(startStr + Math.floor(order / 26));
+    const secondLetter = String.fromCharCode(startStr + order % 26);
+    return `${firstLetter}${secondLetter}`;
+};
+exports.generateKeyByOrder = generateKeyByOrder;
+const hashModBigInt = (hash, mod) => {
+    if (!hash)
+        return 0;
+    return Number(BigInt('0x' + hash) % BigInt(mod));
+};
+exports.hashModBigInt = hashModBigInt;
+const isNumber = (val) => {
+    return typeof val === 'number' && Number.isFinite(val);
+};
+exports.isNumber = isNumber;
+const isDynamicPackageName = (prefix, packageName) => {
+    const dynamicModuleRegExp = new RegExp(`^${prefix}(?:-[a-z]{2})?/`);
+    return dynamicModuleRegExp.test(packageName);
+};
+exports.isDynamicPackageName = isDynamicPackageName;
+const isDynamicPackageJsAsset = (prefix, assetName) => {
+    const dynamicJsAssetRegExp = new RegExp(`^${prefix}(?:-[a-z]{2})?\\/.*\\.js$`);
+    return dynamicJsAssetRegExp.test(assetName);
+};
+exports.isDynamicPackageJsAsset = isDynamicPackageJsAsset;
+const isDynamicPackageWXssAsset = (prefix, assetName) => {
+    const dynamicWXssAssetRegExp = new RegExp(`^${prefix}(?:-[a-z]{2})?\\/.*\\.wxss$`);
+    return dynamicWXssAssetRegExp.test(assetName);
+};
+exports.isDynamicPackageWXssAsset = isDynamicPackageWXssAsset;
+const isDynamicPackageWXssAssetWithOrder = (opt, assetName) => {
+    if (!(0, exports.isNumber)(opt.order) || opt.dynamicPackageCount <= 1)
+        return (0, exports.isDynamicPackageWXssAsset)(opt.dynamicPackageNamePrefix, assetName);
+    return new RegExp(`^${opt.dynamicPackageNamePrefix}-${(0, exports.generateKeyByOrder)(opt.order)}\\/.*\\.wxss$`).test(assetName);
+};
+exports.isDynamicPackageWXssAssetWithOrder = isDynamicPackageWXssAssetWithOrder;
+const generateDynamicPackageName = (opt) => {
+    if (!(0, exports.isNumber)(opt.order) || opt.dynamicPackageCount <= 1)
+        return opt.dynamicPackageNamePrefix;
+    return `${opt.dynamicPackageNamePrefix}-${(0, exports.generateKeyByOrder)(opt.order)}`;
+};
+exports.generateDynamicPackageName = generateDynamicPackageName;
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":";;;AAEO,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,EAAE;IAClD,MAAM,QAAQ,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;IAClC,MAAM,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAA;IAC1E,MAAM,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,GAAG,KAAK,GAAG,EAAE,CAAC,CAAA;IAC/D,OAAO,GAAG,WAAW,GAAG,YAAY,EAAE,CAAA;AACxC,CAAC,CAAA;AALY,QAAA,kBAAkB,sBAK9B;AAEM,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,GAAW,EAAE,EAAE;IACzD,IAAI,CAAC,IAAI;QAAE,OAAO,CAAC,CAAA;IACnB,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAA;AAClD,CAAC,CAAA;AAHY,QAAA,aAAa,iBAGzB;AAEM,MAAM,QAAQ,GAAG,CAAC,GAAQ,EAAE,EAAE;IACnC,OAAO,OAAO,GAAG,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;AACxD,CAAC,CAAA;AAFY,QAAA,QAAQ,YAEpB;AAEM,MAAM,oBAAoB,GAAG,CAAC,MAAc,EAAE,WAAmB,EAAE,EAAE;IAC1E,MAAM,mBAAmB,GAAG,IAAI,MAAM,CAAC,IAAI,MAAM,iBAAiB,CAAC,CAAA;IACnE,OAAO,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;AAC9C,CAAC,CAAA;AAHY,QAAA,oBAAoB,wBAGhC;AAEM,MAAM,uBAAuB,GAAG,CAAC,MAAc,EAAE,SAAiB,EAAE,EAAE;IAC3E,MAAM,oBAAoB,GAAG,IAAI,MAAM,CAAC,IAAI,MAAM,2BAA2B,CAAC,CAAA;IAC9E,OAAO,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC7C,CAAC,CAAA;AAHY,QAAA,uBAAuB,2BAGnC;AAEM,MAAM,yBAAyB,GAAG,CAAC,MAAc,EAAE,SAAiB,EAAE,EAAE;IAC7E,MAAM,sBAAsB,GAAG,IAAI,MAAM,CAAC,IAAI,MAAM,6BAA6B,CAAC,CAAA;IAClF,OAAO,sBAAsB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC/C,CAAC,CAAA;AAHY,QAAA,yBAAyB,6BAGrC;AAEM,MAAM,kCAAkC,GAAG,CAAC,GAAuC,EAAE,SAAiB,EAAE,EAAE;IAC/G,IAAI,CAAC,IAAA,gBAAQ,EAAC,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,mBAAmB,IAAI,CAAC;QAAE,OAAO,IAAA,iCAAyB,EAAC,GAAG,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAA;IACnI,OAAO,IAAI,MAAM,CAAC,IAAI,GAAG,CAAC,wBAAwB,IAAI,IAAA,0BAAkB,EAAC,GAAG,CAAC,KAAM,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AACtH,CAAC,CAAA;AAHY,QAAA,kCAAkC,sCAG9C;AAEM,MAAM,0BAA0B,GAAG,CAAC,GAAuC,EAAE,EAAE;IACpF,IAAI,CAAC,IAAA,gBAAQ,EAAC,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,mBAAmB,IAAI,CAAC;QAAE,OAAO,GAAG,CAAC,wBAAwB,CAAA;IAC7F,OAAO,GAAG,GAAG,CAAC,wBAAwB,IAAI,IAAA,0BAAkB,EAAC,GAAG,CAAC,KAAM,CAAC,EAAE,CAAA;AAC5E,CAAC,CAAA;AAHY,QAAA,0BAA0B,8BAGtC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taro-minify-pack/plugin-async-pack",
-  "version": "0.0.4",
+  "version": "0.0.5-alpha.1",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,12 +25,12 @@
     "webpack-sources": "^3.2.3"
   },
   "devDependencies": {
-    "@tarojs/service": "^4.0.9",
+    "@tarojs/service": "^4.0.8",
+    "@tarojs/taro": "^4.0.8",
     "@types/babel__core": "^7.20.5",
     "@types/babel__generator": "^7.6.8",
     "@types/babel__template": "^7.4.4",
     "@types/babel__traverse": "^7.20.6",
-    "@types/md5": "^2.3.5",
     "@types/node": "^18.19.130",
     "@types/webpack-sources": "^3.2.3",
     "@typescript-eslint/eslint-plugin": "^8.26.1",

package/src/index.ts

@@ -1,22 +1,21 @@
 import type { IPluginContext } from '@tarojs/service'
+import type { PathData } from 'webpack'
+import fs from 'fs'
+import path from 'path'
 import { RawSource } from 'webpack-sources'
 import { transformWebpackRuntime } from './transform-webpack-runtime'
-import {
-  TransformOpt,
-  TransformBeforeCompressionPlugin,
-  PLUGIN_NAME as TransformBeforeCompressionPluginName
-} from './transform-before-compression-plugin'
-import { MergeOutputPlugin, PLUGIN_NAME as MergeOutputPluginName } from './merge-output'
+import { TransformOpt, TransformBeforeCompressionPlugin, PLUGIN_NAME as TransformBeforeCompressionPluginName } from './transform-before-compression-plugin'
+import { InjectStyleComponentPlugin, PLUGIN_NAME as InjectStyleComponentPluginName, InjectStyleComponentName } from './inject-style-component'
+import { transformAppConfig } from './transform-app-config'
+import { transformPagesWXml } from './transform-pages-wxml'
+import { generateDynamicPackageName, generateKeyByOrder, hashModBigInt, isDynamicPackageName } from './utils'
 import { AsyncPackOpts } from './types'
-import { transformAppStylesheet } from './transform-app-stylesheet'
-import fs from 'fs'
-import path from 'path'
 
 export { AsyncPackOpts } from './types'
 
 const dynamicPackOptsDefaultOpt: AsyncPackOpts = {
-  dynamicModuleJsDir: 'dynamic-common',
-  dynamicModuleStyleFile: 'dynamic-common'
+  dynamicPackageNamePrefix: 'dynamic-common',
+  dynamicPackageCount: 1
 }
 
 export default (ctx: IPluginContext, pluginOpts: AsyncPackOpts) => {
@@ -34,6 +33,12 @@ export default (ctx: IPluginContext, pluginOpts: AsyncPackOpts) => {
 
     const newVendorsChunks = vendors ? { ...vendors, chunks: 'initial' } : vendors
 
+    const generateChunkFilename = (pathData:PathData, ext:string) => {
+      const { chunk } = pathData
+      const order = hashModBigInt(chunk?.hash || '', finalOpts.dynamicPackageCount)
+      return `${generateDynamicPackageName({ ...finalOpts, order })}/[chunkhash]${ext}`
+    }
+
     chain.optimization.merge({
       splitChunks: {
         ...existingSplitChunks,
@@ -47,7 +52,7 @@ export default (ctx: IPluginContext, pluginOpts: AsyncPackOpts) => {
 
     chain.merge({
       output: {
-        chunkFilename: `${finalOpts.dynamicModuleJsDir}/[chunkhash].js`, // 异步模块输出路径
+        chunkFilename: (pathData:PathData) => generateChunkFilename(pathData, '.js'),
         path: ctx.paths.outputPath,
         clean: true
       }
@@ -56,51 +61,52 @@ export default (ctx: IPluginContext, pluginOpts: AsyncPackOpts) => {
     chain.plugin('miniCssExtractPlugin')
       .tap((args) => {
         const [options] = args
-        const finalOption = { ...options, chunkFilename: `${finalOpts.dynamicModuleStyleFile}/[chunkhash].wxss` }
-        return [finalOption]
+        const chunkFilename = (pathData:PathData) => generateChunkFilename(pathData, '.wxss')
+        return [{ ...options, chunkFilename }]
+      })
+
+    chain.module
+      .rule('script')
+      .use('babelLoader')
+      .tap((opts) => {
+        const pluginConfig = path.resolve(__dirname, './transform-react-lazy')
+        return { ...opts, plugins: [pluginConfig, ...(opts.plugins || [])] }
       })
 
     chain.plugin(TransformBeforeCompressionPluginName).use(TransformBeforeCompressionPlugin, [{
-      test: /^(runtime\.js|app\.wxss)$/,
+      test: /^(runtime\.js)$/,
       transform: (opt: TransformOpt) => {
-        const { source, assetName, assets } = opt
+        const { source, assets } = opt
         const transformOpts = { ...finalOpts, assets }
-        if (/^app\.wxss$/.test(assetName)) return transformAppStylesheet(source as string, transformOpts)
-        if (/^runtime\.js$/.test(assetName)) return transformWebpackRuntime(source as string, transformOpts)
-        return source as string
+        return transformWebpackRuntime(source as string, transformOpts)
       }
     }])
 
-    chain.plugin(MergeOutputPluginName).use(MergeOutputPlugin, [{
-      test: new RegExp(`^${finalOpts.dynamicModuleStyleFile}\\/.*\\.wxss$`),
-      outputFile: `${finalOpts.dynamicModuleStyleFile}.wxss`
-    }])
+    chain.plugin(InjectStyleComponentPluginName).use(InjectStyleComponentPlugin, [finalOpts])
   })
 
   ctx.modifyBuildAssets(({ assets }) => {
-    const curAppJSON = assets['app.json']
+    const hasDynamicModule = Object.keys(assets).some((key) => isDynamicPackageName(finalOpts.dynamicPackageNamePrefix, key))
 
-    if (!curAppJSON) return
+    if (!hasDynamicModule) return
 
-    const curAppJSONContent = JSON.parse(curAppJSON.source())
+    const asyncComponents = (() => {
+      if (finalOpts.dynamicPackageCount <= 1) { return { [InjectStyleComponentName]: `${generateDynamicPackageName(finalOpts)}/${InjectStyleComponentName}` } }
+      return new Array(finalOpts.dynamicPackageCount).fill(null).reduce((result, _, order) => {
+        const dynamicPackageName = generateDynamicPackageName({ ...finalOpts, order })
+        const componentName = `${InjectStyleComponentName}-${generateKeyByOrder(order)}`
+        return { ...result, [componentName]: `${dynamicPackageName}/${InjectStyleComponentName}` }
+      }, {})
+    })()
 
-    const dynamicPackagesConfig = { root: finalOpts.dynamicModuleJsDir, pages: [] }
+    const filePath = path.resolve(__dirname, './singleton-promise.js')
 
-    const hasDynamicModule = Object.keys(assets).some((key) => key.startsWith(`${finalOpts.dynamicModuleJsDir}/`))
+    const fileContent = fs.readFileSync(filePath, { encoding: 'utf-8' })
 
-    const { resolveAlias = {}, subPackages, subpackages, ...otherAppJSON } = curAppJSONContent
+    assets['singleton-promise.js'] = new RawSource(fileContent)
 
-    const finalSubPackages = subPackages || subpackages || []
-
-    const newAppJSONContent = {
-      ...otherAppJSON,
-      subPackages: hasDynamicModule ? [...finalSubPackages, dynamicPackagesConfig] : finalSubPackages,
-      resolveAlias: {
-        ...resolveAlias,
-        [`${finalOpts.dynamicModuleJsDir}/*`]: `/${finalOpts.dynamicModuleJsDir}/*`
-      }
-    }
+    transformAppConfig({ ...finalOpts, assets, asyncComponents })
 
-    assets['app.json'] = new RawSource(JSON.stringify(newAppJSONContent, null, 2))
+    transformPagesWXml({ assets, asyncComponents })
   })
 }

package/src/inject-style-component.ts

@@ -0,0 +1,63 @@
+import { Compiler, Compilation } from 'webpack'
+import path from 'path'
+import { AsyncPackOpts } from './types'
+import template from '@babel/template'
+import generator from '@babel/generator'
+import { generateDynamicPackageName, isDynamicPackageWXssAssetWithOrder } from './utils'
+
+export const PLUGIN_NAME = 'InjectStyleComponent'
+
+export const InjectStyleComponentName = 'inject-style'
+
+const injectStyleComponentCode = `
+const { SingletonPromise } = require('~/singleton-promise.js')
+Component({ 
+  lifetimes: { 
+    attached: () => SingletonPromise.loaded("DYNAMIC_PACKAGE_NAME"),
+    detached: () => SingletonPromise.unloaded("DYNAMIC_PACKAGE_NAME")
+  } 
+})
+`
+
+type Opt = AsyncPackOpts
+
+export class InjectStyleComponentPlugin {
+  private readonly opt: Opt
+
+  private readonly WXmlContent: string = '<block/>'
+
+  private readonly JsonContent:string = '{"component": true,"styleIsolation": "shared"}'
+
+  private readonly JsContent: string = injectStyleComponentCode
+
+  constructor (opt: Opt) {
+    this.opt = opt
+  }
+
+  apply (compiler: Compiler) {
+    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation: Compilation) => {
+      const stage = compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL // 最早阶段，在优化前
+
+      compilation.hooks.processAssets.tap({ name: PLUGIN_NAME, stage }, (assets) => {
+        for (let order = 0; order < this.opt.dynamicPackageCount; order++) {
+          const dynamicPackageName = generateDynamicPackageName({ ...this.opt, order })
+
+          const { code: jsFileContent } = generator(template.program(this.JsContent)({ DYNAMIC_PACKAGE_NAME: dynamicPackageName }))
+          const styleFileContent = Object.keys(assets).reduce((result, assetPath) => {
+            if (!isDynamicPackageWXssAssetWithOrder({ ...this.opt, order }, assetPath)) return result
+            const relativePath = path.relative(dynamicPackageName, assetPath)
+            const code = `@import './${relativePath}';`
+            return result + code + '\n'
+          }, '')
+
+          const { RawSource } = compiler.webpack.sources
+          const componentPath = `${dynamicPackageName}/${InjectStyleComponentName}`
+          compilation.assets[`${componentPath}.js`] = new RawSource(jsFileContent)
+          compilation.assets[`${componentPath}.wxss`] = new RawSource(styleFileContent)
+          compilation.assets[`${componentPath}.wxml`] = new RawSource(this.WXmlContent)
+          compilation.assets[`${componentPath}.json`] = new RawSource(this.JsonContent)
+        }
+      })
+    })
+  }
+}

package/src/singleton-promise.ts

@@ -0,0 +1,41 @@
+export class SingletonPromise {
+  // 静态属性存放单例
+  private static instance?: Record<string, SingletonPromise>
+
+  private loadTimes = 0
+
+  private promise?: Promise<void>
+
+  private resolve?: () => void
+
+  constructor () {
+    this.resetPromise()
+  }
+
+  static getInstance (key:string) {
+    if (!SingletonPromise.instance) SingletonPromise.instance = {}
+    if (!SingletonPromise.instance[key]) SingletonPromise.instance[key] = new SingletonPromise()
+    return SingletonPromise.instance[key]
+  }
+
+  private resetPromise () {
+    this.promise = new Promise<void>((resolve) => {
+      this.resolve = resolve
+    })
+  }
+
+  static wait (key:string) {
+    return this.getInstance(key).promise
+  }
+
+  static loaded (key:string) {
+    this.getInstance(key).resolve?.()
+    this.getInstance(key).loadTimes += 1
+  }
+
+  static unloaded (key:string) {
+    this.getInstance(key).loadTimes -= 1
+    if (this.getInstance(key).loadTimes > 0) return
+    this.getInstance(key).resetPromise()
+  }
+}

package/src/transform-app-config.ts

@@ -0,0 +1,38 @@
+import type { AsyncPackOpts } from './types'
+import { RawSource } from 'webpack-sources'
+import { generateDynamicPackageName } from './utils'
+
+interface Opts extends AsyncPackOpts {
+  assets: Record<string, RawSource>
+  asyncComponents: Record<string, string>
+}
+
+const appConfigAssetKey = 'app.json'
+
+export const transformAppConfig = (opts: Opts) => {
+  const { dynamicPackageCount, asyncComponents, assets } = opts
+
+  const curAppConfig = JSON.parse(assets[appConfigAssetKey].source() as string)
+
+  const { subPackages, subpackages, resolveAlias = {}, usingComponents = {}, componentPlaceholder = {}, ...otherAppJSON } = curAppConfig
+
+  const finalSubPackages = subPackages || subpackages || []
+
+  const dynamicPackagesConfigs = new Array(dynamicPackageCount).fill(null).map((_, order) => {
+    return { root: generateDynamicPackageName({ ...opts, order }), pages: [] }
+  })
+
+  const asyncComponentPlaceholder = Object.keys(asyncComponents).reduce((result, item) => {
+    return { ...result, [item]: 'block' }
+  }, {})
+
+  const finalAppConfig = {
+    ...otherAppJSON,
+    usingComponents: { ...usingComponents, ...asyncComponents },
+    componentPlaceholder: { ...componentPlaceholder, ...asyncComponentPlaceholder },
+    subPackages: [...finalSubPackages, ...dynamicPackagesConfigs],
+    resolveAlias: { ...resolveAlias, '~/*': '/*' }
+  }
+
+  assets[appConfigAssetKey] = new RawSource(JSON.stringify(finalAppConfig))
+}

package/src/transform-pages-wxml.ts

@@ -0,0 +1,35 @@
+import { AppConfig } from '@tarojs/taro'
+import { RawSource } from 'webpack-sources'
+
+interface Opts {
+  assets: Record<string, RawSource>;
+  asyncComponents: Record<string, string>;
+}
+
+const appConfigAssetKey = 'app.json'
+
+export const transformPagesWXml = (opts: Opts) => {
+  const { assets, asyncComponents } = opts
+
+  const curAppConfig: AppConfig = JSON.parse(assets[appConfigAssetKey].source() as string)
+
+  const pagesPath = (() => {
+    const { pages = [], subpackages, subPackages, tabBar } = curAppConfig
+    const tabBarPagePaths = tabBar?.list?.map((item) => item.pagePath) || []
+    const curSubPackages = subPackages || subpackages || []
+    const subPackagePagePaths = curSubPackages.reduce<string[]>((result, item) => {
+      const subPackagePagePath = item.root || ''
+      return [...result, ...(item.pages || []).map((page) => `${subPackagePagePath}/${page}`)]
+    }, [])
+    return [...pages, ...tabBarPagePaths, ...subPackagePagePaths].map((item) => `${item}.wxml`)
+  })()
+
+  const asyncComponentCode = Object.keys(asyncComponents).map((item) => `<${item}/>`)
+
+  Object.keys(assets).forEach((assetPath) => {
+    if (!pagesPath.includes(assetPath)) return
+    const source = assets[assetPath].source() as string
+    const tempCode = [source, ...asyncComponentCode].join('\n')
+    assets[assetPath] = new RawSource(tempCode)
+  })
+}