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

package/README.md

@@ -1,7 +1,5 @@
 ## @taro-minify-pack/plugin-async-pack
-> 异步加载主包代码, 优化主包体积
->
-> 注：异步模块样式文件无法异步加载，已默认在主包样式文件中引入
+> 异步加载主包代码, 优化主包体积（包含异步模块`js`与样式文件）
 
 ### 安装
 
@@ -49,10 +47,10 @@ module.exports = {
     },
     plugins: [
         ['@taro-minify-pack/plugin-async-pack', {
-            // js 异步分包名
-            dynamicModuleJsDir: 'dynamic-common',
-            // 异步模块样式文件名
-            dynamicModuleStyleFile: 'dynamic-common'
+            // 异步分包名前缀
+            dynamicPackageNamePrefix: 'dynamic-common',
+            // 异步分包数量
+            dynamicPackageCount: 2
         }],
     ],
 };

package/dist/index.js

@@ -1,24 +1,20 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
 const webpack_sources_1 = require("webpack-sources");
 const transform_webpack_runtime_1 = require("./transform-webpack-runtime");
 const transform_before_compression_plugin_1 = require("./transform-before-compression-plugin");
-const merge_output_1 = require("./merge-output");
-const transform_app_stylesheet_1 = require("./transform-app-stylesheet");
+const inject_style_component_1 = require("./inject-style-component");
+const transform_app_config_1 = require("./transform-app-config");
+const transform_pages_wxml_1 = require("./transform-pages-wxml");
+const utils_1 = require("./utils");
 const dynamicPackOptsDefaultOpt = {
-    dynamicModuleJsDir: 'dynamic-common',
-    dynamicModuleStyleFile: 'dynamic-common'
+    dynamicPackageNamePrefix: 'dynamic-common',
+    dynamicPackageCount: 1
 };
 exports.default = (ctx, pluginOpts) => {
     const finalOpts = Object.assign(Object.assign({}, dynamicPackOptsDefaultOpt), pluginOpts);
@@ -30,12 +26,17 @@ exports.default = (ctx, pluginOpts) => {
         const { common, vendors } = existingSplitChunks.cacheGroups;
         const newCommonChunks = common ? Object.assign(Object.assign({}, common), { chunks: 'initial' }) : common;
         const newVendorsChunks = vendors ? Object.assign(Object.assign({}, vendors), { chunks: 'initial' }) : vendors;
+        const generateChunkFilename = (pathData, ext) => {
+            const { chunk } = pathData;
+            const order = (0, utils_1.hashModBigInt)((chunk === null || chunk === void 0 ? void 0 : chunk.hash) || '', finalOpts.dynamicPackageCount);
+            return `${(0, utils_1.generateDynamicPackageName)(Object.assign(Object.assign({}, finalOpts), { order }))}/[chunkhash]${ext}`;
+        };
         chain.optimization.merge({
             splitChunks: Object.assign(Object.assign({}, existingSplitChunks), { cacheGroups: Object.assign(Object.assign({}, existingSplitChunks.cacheGroups), { common: newCommonChunks, vendors: newVendorsChunks }) })
         });
         chain.merge({
             output: {
-                chunkFilename: `${finalOpts.dynamicModuleJsDir}/[chunkhash].js`, // 异步模块输出路径
+                chunkFilename: (pathData) => generateChunkFilename(pathData, '.js'),
                 path: ctx.paths.outputPath,
                 clean: true
             }
@@ -43,37 +44,38 @@ exports.default = (ctx, pluginOpts) => {
         chain.plugin('miniCssExtractPlugin')
             .tap((args) => {
             const [options] = args;
-            const finalOption = Object.assign(Object.assign({}, options), { chunkFilename: `${finalOpts.dynamicModuleStyleFile}/[chunkhash].wxss` });
-            return [finalOption];
+            const chunkFilename = (pathData) => generateChunkFilename(pathData, '.wxss');
+            return [Object.assign(Object.assign({}, options), { chunkFilename })];
         });
         chain.plugin(transform_before_compression_plugin_1.PLUGIN_NAME).use(transform_before_compression_plugin_1.TransformBeforeCompressionPlugin, [{
-                test: /^(runtime\.js|app\.wxss)$/,
+                test: /^(runtime\.js)$/,
                 transform: (opt) => {
-                    const { source, assetName, assets } = opt;
+                    const { source, assets } = opt;
                     const transformOpts = Object.assign(Object.assign({}, finalOpts), { assets });
-                    if (/^app\.wxss$/.test(assetName))
-                        return (0, transform_app_stylesheet_1.transformAppStylesheet)(source, transformOpts);
-                    if (/^runtime\.js$/.test(assetName))
-                        return (0, transform_webpack_runtime_1.transformWebpackRuntime)(source, transformOpts);
-                    return source;
+                    return (0, transform_webpack_runtime_1.transformWebpackRuntime)(source, transformOpts);
                 }
             }]);
-        chain.plugin(merge_output_1.PLUGIN_NAME).use(merge_output_1.MergeOutputPlugin, [{
-                test: new RegExp(`^${finalOpts.dynamicModuleStyleFile}\\/.*\\.wxss$`),
-                outputFile: `${finalOpts.dynamicModuleStyleFile}.wxss`
-            }]);
+        chain.plugin(inject_style_component_1.PLUGIN_NAME).use(inject_style_component_1.InjectStyleComponentPlugin, [finalOpts]);
     });
     ctx.modifyBuildAssets(({ assets }) => {
-        const curAppJSON = assets['app.json'];
-        if (!curAppJSON)
+        const hasDynamicModule = Object.keys(assets).some((key) => (0, utils_1.isDynamicPackageName)(finalOpts.dynamicPackageNamePrefix, key));
+        if (!hasDynamicModule)
             return;
-        const curAppJSONContent = JSON.parse(curAppJSON.source());
-        const dynamicPackagesConfig = { root: finalOpts.dynamicModuleJsDir, pages: [] };
-        const hasDynamicModule = Object.keys(assets).some((key) => key.startsWith(`${finalOpts.dynamicModuleJsDir}/`));
-        const { resolveAlias = {}, subPackages, subpackages } = curAppJSONContent, otherAppJSON = __rest(curAppJSONContent, ["resolveAlias", "subPackages", "subpackages"]);
-        const finalSubPackages = subPackages || subpackages || [];
-        const newAppJSONContent = Object.assign(Object.assign({}, otherAppJSON), { subPackages: hasDynamicModule ? [...finalSubPackages, dynamicPackagesConfig] : finalSubPackages, resolveAlias: Object.assign(Object.assign({}, resolveAlias), { [`${finalOpts.dynamicModuleJsDir}/*`]: `/${finalOpts.dynamicModuleJsDir}/*` }) });
-        assets['app.json'] = new webpack_sources_1.RawSource(JSON.stringify(newAppJSONContent, null, 2));
+        const asyncComponents = (() => {
+            if (finalOpts.dynamicPackageCount <= 1) {
+                return { [inject_style_component_1.InjectStyleComponentName]: `${(0, utils_1.generateDynamicPackageName)(finalOpts)}/${inject_style_component_1.InjectStyleComponentName}` };
+            }
+            return new Array(finalOpts.dynamicPackageCount).fill(null).reduce((result, _, order) => {
+                const dynamicPackageName = (0, utils_1.generateDynamicPackageName)(Object.assign(Object.assign({}, finalOpts), { order }));
+                const componentName = `${inject_style_component_1.InjectStyleComponentName}-${(0, utils_1.generateKeyByOrder)(order)}`;
+                return Object.assign(Object.assign({}, result), { [componentName]: `${dynamicPackageName}/${inject_style_component_1.InjectStyleComponentName}` });
+            }, {});
+        })();
+        const filePath = path_1.default.resolve(__dirname, './singleton-promise.js');
+        const fileContent = fs_1.default.readFileSync(filePath, { encoding: 'utf-8' });
+        assets['singleton-promise.js'] = new webpack_sources_1.RawSource(fileContent);
+        (0, transform_app_config_1.transformAppConfig)(Object.assign(Object.assign({}, finalOpts), { assets, asyncComponents }));
+        (0, transform_pages_wxml_1.transformPagesWXml)({ assets, asyncComponents });
     });
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/inject-style-component.d.ts

@@ -0,0 +1,14 @@
+import { Compiler } from 'webpack';
+import { AsyncPackOpts } from './types';
+export declare const PLUGIN_NAME = "InjectStyleComponent";
+export declare const InjectStyleComponentName = "inject-style";
+type Opt = AsyncPackOpts;
+export declare class InjectStyleComponentPlugin {
+    private readonly opt;
+    private readonly WXmlContent;
+    private readonly JsonContent;
+    private readonly JsContent;
+    constructor(opt: Opt);
+    apply(compiler: Compiler): void;
+}
+export {};

package/dist/inject-style-component.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InjectStyleComponentPlugin = exports.InjectStyleComponentName = exports.PLUGIN_NAME = void 0;
+const path_1 = __importDefault(require("path"));
+const template_1 = __importDefault(require("@babel/template"));
+const generator_1 = __importDefault(require("@babel/generator"));
+const utils_1 = require("./utils");
+exports.PLUGIN_NAME = 'InjectStyleComponent';
+exports.InjectStyleComponentName = 'inject-style';
+const injectStyleComponentCode = `
+const { SingletonPromise } = require('~/singleton-promise.js')
+Component({ lifetimes: { attached: () => SingletonPromise.resolve("DYNAMIC_PACKAGE_NAME") } })
+`;
+class InjectStyleComponentPlugin {
+    constructor(opt) {
+        this.WXmlContent = '<block/>';
+        this.JsonContent = '{"component": true,"styleIsolation": "shared"}';
+        this.JsContent = injectStyleComponentCode;
+        this.opt = opt;
+    }
+    apply(compiler) {
+        compiler.hooks.compilation.tap(exports.PLUGIN_NAME, (compilation) => {
+            const stage = compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL; // 最早阶段，在优化前
+            compilation.hooks.processAssets.tap({ name: exports.PLUGIN_NAME, stage }, (assets) => {
+                for (let order = 0; order < this.opt.dynamicPackageCount; order++) {
+                    const dynamicPackageName = (0, utils_1.generateDynamicPackageName)(Object.assign(Object.assign({}, this.opt), { order }));
+                    const { code: jsFileContent } = (0, generator_1.default)(template_1.default.program(this.JsContent)({ DYNAMIC_PACKAGE_NAME: dynamicPackageName }));
+                    const styleFileContent = Object.keys(assets).reduce((result, assetPath) => {
+                        if (!(0, utils_1.isDynamicPackageWXssAssetWithOrder)(Object.assign(Object.assign({}, this.opt), { order }), assetPath))
+                            return result;
+                        const relativePath = path_1.default.relative(dynamicPackageName, assetPath);
+                        const code = `@import './${relativePath}';`;
+                        return result + code + '\n';
+                    }, '');
+                    const { RawSource } = compiler.webpack.sources;
+                    const componentPath = `${dynamicPackageName}/${exports.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);
+                }
+            });
+        });
+    }
+}
+exports.InjectStyleComponentPlugin = InjectStyleComponentPlugin;
+//# sourceMappingURL=inject-style-component.js.map

package/dist/inject-style-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inject-style-component.js","sourceRoot":"","sources":["../src/inject-style-component.ts"],"names":[],"mappings":";;;;;;AACA,gDAAuB;AAEvB,+DAAsC;AACtC,iEAAwC;AACxC,mCAAwF;AAE3E,QAAA,WAAW,GAAG,sBAAsB,CAAA;AAEpC,QAAA,wBAAwB,GAAG,cAAc,CAAA;AAEtD,MAAM,wBAAwB,GAAG;;;CAGhC,CAAA;AAID,MAAa,0BAA0B;IASrC,YAAa,GAAQ;QANJ,gBAAW,GAAW,UAAU,CAAA;QAEhC,gBAAW,GAAU,gDAAgD,CAAA;QAErE,cAAS,GAAW,wBAAwB,CAAA;QAG3D,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;IAChB,CAAC;IAED,KAAK,CAAE,QAAkB;QACvB,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,mBAAW,EAAE,CAAC,WAAwB,EAAE,EAAE;YACvE,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,+BAA+B,CAAA,CAAC,YAAY;YAEvF,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,mBAAW,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,EAAE,EAAE;gBAC3E,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,KAAK,EAAE,EAAE,CAAC;oBAClE,MAAM,kBAAkB,GAAG,IAAA,kCAA0B,kCAAM,IAAI,CAAC,GAAG,KAAE,KAAK,IAAG,CAAA;oBAE7E,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,IAAA,mBAAS,EAAC,kBAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC,CAAC,CAAA;oBACzH,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE;wBACxE,IAAI,CAAC,IAAA,0CAAkC,kCAAM,IAAI,CAAC,GAAG,KAAE,KAAK,KAAI,SAAS,CAAC;4BAAE,OAAO,MAAM,CAAA;wBACzF,MAAM,YAAY,GAAG,cAAI,CAAC,QAAQ,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAA;wBACjE,MAAM,IAAI,GAAG,cAAc,YAAY,IAAI,CAAA;wBAC3C,OAAO,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;oBAC7B,CAAC,EAAE,EAAE,CAAC,CAAA;oBAEN,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAA;oBAC9C,MAAM,aAAa,GAAG,GAAG,kBAAkB,IAAI,gCAAwB,EAAE,CAAA;oBACzE,WAAW,CAAC,MAAM,CAAC,GAAG,aAAa,KAAK,CAAC,GAAG,IAAI,SAAS,CAAC,aAAa,CAAC,CAAA;oBACxE,WAAW,CAAC,MAAM,CAAC,GAAG,aAAa,OAAO,CAAC,GAAG,IAAI,SAAS,CAAC,gBAAgB,CAAC,CAAA;oBAC7E,WAAW,CAAC,MAAM,CAAC,GAAG,aAAa,OAAO,CAAC,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;oBAC7E,WAAW,CAAC,MAAM,CAAC,GAAG,aAAa,OAAO,CAAC,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;gBAC/E,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AAvCD,gEAuCC"}

package/dist/singleton-promise.d.ts

@@ -0,0 +1,9 @@
+export declare class SingletonPromise {
+    private static instance?;
+    private promise?;
+    private resolve?;
+    constructor();
+    static getInstance(key: string): SingletonPromise;
+    static wait(key: string): Promise<void> | undefined;
+    static resolve(key: string): void;
+}

package/dist/singleton-promise.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingletonPromise = void 0;
+class SingletonPromise {
+    constructor() {
+        this.promise = new Promise(resolve => {
+            this.resolve = resolve;
+        });
+    }
+    static getInstance(key) {
+        if (!SingletonPromise.instance)
+            SingletonPromise.instance = {};
+        if (!SingletonPromise.instance[key])
+            SingletonPromise.instance[key] = new SingletonPromise();
+        return SingletonPromise.instance[key];
+    }
+    static wait(key) {
+        return this.getInstance(key).promise;
+    }
+    static resolve(key) {
+        var _a, _b;
+        (_b = (_a = this.getInstance(key)).resolve) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+}
+exports.SingletonPromise = SingletonPromise;
+//# sourceMappingURL=singleton-promise.js.map

package/dist/singleton-promise.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"singleton-promise.js","sourceRoot":"","sources":["../src/singleton-promise.ts"],"names":[],"mappings":";;;AAAA,MAAa,gBAAgB;IAQ3B;QACE,IAAI,CAAC,OAAO,GAAG,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACzC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACxB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,MAAM,CAAC,WAAW,CAAE,GAAU;QAC5B,IAAI,CAAC,gBAAgB,CAAC,QAAQ;YAAE,gBAAgB,CAAC,QAAQ,GAAG,EAAE,CAAA;QAC9D,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC;YAAE,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,gBAAgB,EAAE,CAAA;QAC5F,OAAO,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;IACvC,CAAC;IAED,MAAM,CAAC,IAAI,CAAE,GAAU;QACrB,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,OAAO,CAAA;IACtC,CAAC;IAED,MAAM,CAAC,OAAO,CAAE,GAAU;;QACxB,MAAA,MAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAC,OAAO,kDAAI,CAAA;IACnC,CAAC;CACF;AA3BD,4CA2BC"}

package/dist/transform-app-config.d.ts

@@ -0,0 +1,8 @@
+import type { AsyncPackOpts } from './types';
+import { RawSource } from 'webpack-sources';
+interface Opts extends AsyncPackOpts {
+    assets: Record<string, RawSource>;
+    asyncComponents: Record<string, string>;
+}
+export declare const transformAppConfig: (opts: Opts) => void;
+export {};

package/dist/transform-app-config.js

@@ -0,0 +1,33 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformAppConfig = void 0;
+const webpack_sources_1 = require("webpack-sources");
+const utils_1 = require("./utils");
+const appConfigAssetKey = 'app.json';
+const transformAppConfig = (opts) => {
+    const { dynamicPackageCount, asyncComponents, assets } = opts;
+    const curAppConfig = JSON.parse(assets[appConfigAssetKey].source());
+    const { subPackages, subpackages, resolveAlias = {}, usingComponents = {}, componentPlaceholder = {} } = curAppConfig, otherAppJSON = __rest(curAppConfig, ["subPackages", "subpackages", "resolveAlias", "usingComponents", "componentPlaceholder"]);
+    const finalSubPackages = subPackages || subpackages || [];
+    const dynamicPackagesConfigs = new Array(dynamicPackageCount).fill(null).map((_, order) => {
+        return { root: (0, utils_1.generateDynamicPackageName)(Object.assign(Object.assign({}, opts), { order })), pages: [] };
+    });
+    const asyncComponentPlaceholder = Object.keys(asyncComponents).reduce((result, item) => {
+        return Object.assign(Object.assign({}, result), { [item]: 'block' });
+    }, {});
+    const finalAppConfig = Object.assign(Object.assign({}, otherAppJSON), { usingComponents: Object.assign(Object.assign({}, usingComponents), asyncComponents), componentPlaceholder: Object.assign(Object.assign({}, componentPlaceholder), asyncComponentPlaceholder), subPackages: [...finalSubPackages, ...dynamicPackagesConfigs], resolveAlias: Object.assign(Object.assign({}, resolveAlias), { '~/*': '/*' }) });
+    assets[appConfigAssetKey] = new webpack_sources_1.RawSource(JSON.stringify(finalAppConfig));
+};
+exports.transformAppConfig = transformAppConfig;
+//# sourceMappingURL=transform-app-config.js.map

package/dist/transform-app-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform-app-config.js","sourceRoot":"","sources":["../src/transform-app-config.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,qDAA2C;AAC3C,mCAAoD;AAOpD,MAAM,iBAAiB,GAAG,UAAU,CAAA;AAE7B,MAAM,kBAAkB,GAAG,CAAC,IAAU,EAAE,EAAE;IAC/C,MAAM,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;IAE7D,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,MAAM,EAAY,CAAC,CAAA;IAE7E,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,GAAG,EAAE,EAAE,eAAe,GAAG,EAAE,EAAE,oBAAoB,GAAG,EAAE,KAAsB,YAAY,EAA7B,YAAY,UAAK,YAAY,EAAhI,yFAAiH,CAAe,CAAA;IAEtI,MAAM,gBAAgB,GAAG,WAAW,IAAI,WAAW,IAAI,EAAE,CAAA;IAEzD,MAAM,sBAAsB,GAAG,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QACxF,OAAO,EAAE,IAAI,EAAE,IAAA,kCAA0B,kCAAM,IAAI,KAAE,KAAK,IAAG,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;IAC5E,CAAC,CAAC,CAAA;IAEF,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;QACrF,uCAAY,MAAM,KAAE,CAAC,IAAI,CAAC,EAAE,OAAO,IAAE;IACvC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,cAAc,mCACf,YAAY,KACf,eAAe,kCAAO,eAAe,GAAK,eAAe,GACzD,oBAAoB,kCAAO,oBAAoB,GAAK,yBAAyB,GAC7E,WAAW,EAAE,CAAC,GAAG,gBAAgB,EAAE,GAAG,sBAAsB,CAAC,EAC7D,YAAY,kCACP,YAAY,KACf,KAAK,EAAE,IAAI,MAEd,CAAA;IAED,MAAM,CAAC,iBAAiB,CAAC,GAAG,IAAI,2BAAS,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AAC3E,CAAC,CAAA;AA7BY,QAAA,kBAAkB,sBA6B9B"}

package/dist/transform-pages-wxml.d.ts

@@ -0,0 +1,7 @@
+import { RawSource } from 'webpack-sources';
+interface Opts {
+    assets: Record<string, RawSource>;
+    asyncComponents: Record<string, string>;
+}
+export declare const transformPagesWXml: (opts: Opts) => void;
+export {};

package/dist/transform-pages-wxml.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformPagesWXml = void 0;
+const webpack_sources_1 = require("webpack-sources");
+const appConfigAssetKey = 'app.json';
+const transformPagesWXml = (opts) => {
+    const { assets, asyncComponents } = opts;
+    const curAppConfig = JSON.parse(assets[appConfigAssetKey].source());
+    const pagesPath = (() => {
+        var _a;
+        const { pages = [], subpackages, subPackages, tabBar } = curAppConfig;
+        const tabBarPagePaths = ((_a = tabBar === null || tabBar === void 0 ? void 0 : tabBar.list) === null || _a === void 0 ? void 0 : _a.map((item) => item.pagePath)) || [];
+        const curSubPackages = subPackages || subpackages || [];
+        const subPackagePagePaths = curSubPackages.reduce((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();
+        const tempCode = [source, ...asyncComponentCode].join('\n');
+        assets[assetPath] = new webpack_sources_1.RawSource(tempCode);
+    });
+};
+exports.transformPagesWXml = transformPagesWXml;
+//# sourceMappingURL=transform-pages-wxml.js.map

package/dist/transform-pages-wxml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform-pages-wxml.js","sourceRoot":"","sources":["../src/transform-pages-wxml.ts"],"names":[],"mappings":";;;AACA,qDAA2C;AAO3C,MAAM,iBAAiB,GAAG,UAAU,CAAA;AAE7B,MAAM,kBAAkB,GAAG,CAAC,IAAU,EAAE,EAAE;IAC/C,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAA;IAExC,MAAM,YAAY,GAAc,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,MAAM,EAAY,CAAC,CAAA;IAExF,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE;;QACtB,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,YAAY,CAAA;QACrE,MAAM,eAAe,GAAG,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAI,EAAE,CAAA;QACxE,MAAM,cAAc,GAAG,WAAW,IAAI,WAAW,IAAI,EAAE,CAAA;QACvD,MAAM,mBAAmB,GAAG,cAAc,CAAC,MAAM,CAAW,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;YAC3E,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;YAC1C,OAAO,CAAC,GAAG,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,kBAAkB,IAAI,IAAI,EAAE,CAAC,CAAC,CAAA;QAC1F,CAAC,EAAE,EAAE,CAAC,CAAA;QACN,OAAO,CAAC,GAAG,KAAK,EAAE,GAAG,eAAe,EAAE,GAAG,mBAAmB,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,OAAO,CAAC,CAAA;IAC7F,CAAC,CAAC,EAAE,CAAA;IAEJ,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC,CAAA;IAEnF,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;YAAE,OAAM;QAC1C,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,EAAY,CAAA;QACnD,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC3D,MAAM,CAAC,SAAS,CAAC,GAAG,IAAI,2BAAS,CAAC,QAAQ,CAAC,CAAA;IAC7C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAxBY,QAAA,kBAAkB,sBAwB9B"}

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,19 +67,29 @@ const webpackLoadDynamicModuleTemplate = `
       inProgress[dynamicModulePath].push(done);
       return;
     }
+    
+    const dynamicPackageNameRegex = DYNAMIC_PACKAGE_NAME_REGEX;
+    
+    const [,dynamicPackageName] = dynamicModulePath.match(dynamicPackageNameRegex) || [];
 
     const target = { src: dynamicModulePath };
 
     if (loadedDynamicModules[dynamicModulePath]) return done({ type: 'loaded', target });
-
-    promiseRetry(function () {
-      return loadDynamicModule(dynamicModulePath)
+    
+    const { SingletonPromise } = require('~/singleton-promise.js');
+    
+    const waitStyle = hasStyleDynamicModuleList.includes(dynamicModulePath)?SingletonPromise.wait(dynamicPackageName):Promise.resolve();
+    
+    waitStyle.then(()=>{
+      promiseRetry(function () {
+        return loadDynamicModule(dynamicModulePath)
+      })
+      .then(function () {
+        return done({ type: 'loaded', target })
+      }).catch(function () {
+        return done({ type:'error', target })
+      });
     })
-    .then(function () {
-      return done({ type: 'loaded', target })
-    }).catch(function () {
-      return done({ type:'error', target })
-    });
   };
 `;
 const replaceWebpackLoadScriptFn = (assignmentExpressionNodePath, opts) => {
@@ -96,22 +107,35 @@ 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 templateCodeAst = core_1.template.ast(webpackLoadDynamicModuleTemplate);
-    const templateCodeDepAst = core_1.template.ast(webpackLoadDynamicModuleTemplateDep);
+    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 DYNAMIC_PACKAGE_NAME_REGEX = types.regExpLiteral(`(${dynamicPackageNamePrefix}(?:-[a-z]{2})?)\\/`);
+    const templateCodeAst = core_1.template.statement(webpackLoadDynamicModuleTemplate)({ DYNAMIC_PACKAGE_NAME_REGEX });
     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 () {

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.0",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,7 +25,8 @@
     "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",

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,44 @@ 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.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']
-
-    if (!curAppJSON) return
+    const hasDynamicModule = Object.keys(assets).some((key) => isDynamicPackageName(finalOpts.dynamicPackageNamePrefix, key))
 
-    const curAppJSONContent = JSON.parse(curAppJSON.source())
+    if (!hasDynamicModule) return
 
-    const dynamicPackagesConfig = { root: finalOpts.dynamicModuleJsDir, pages: [] }
+    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 hasDynamicModule = Object.keys(assets).some((key) => key.startsWith(`${finalOpts.dynamicModuleJsDir}/`))
+    const filePath = path.resolve(__dirname, './singleton-promise.js')
 
-    const { resolveAlias = {}, subPackages, subpackages, ...otherAppJSON } = curAppJSONContent
+    const fileContent = fs.readFileSync(filePath, { encoding: 'utf-8' })
 
-    const finalSubPackages = subPackages || subpackages || []
+    assets['singleton-promise.js'] = new RawSource(fileContent)
 
-    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,58 @@
+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.resolve("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,28 @@
+export class SingletonPromise {
+  // 静态属性存放单例
+  private static instance?: Record<string, SingletonPromise>
+
+  private promise?: Promise<void>
+
+  private resolve?: () => void
+
+  constructor () {
+    this.promise = new Promise<void>(resolve => {
+      this.resolve = resolve
+    })
+  }
+
+  static getInstance (key:string) {
+    if (!SingletonPromise.instance) SingletonPromise.instance = {}
+    if (!SingletonPromise.instance[key]) SingletonPromise.instance[key] = new SingletonPromise()
+    return SingletonPromise.instance[key]
+  }
+
+  static wait (key:string) {
+    return this.getInstance(key).promise
+  }
+
+  static resolve (key:string) {
+    this.getInstance(key).resolve?.()
+  }
+}

package/src/transform-app-config.ts

@@ -0,0 +1,41 @@
+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)
+  })
+}

package/src/transform-webpack-runtime.ts

@@ -5,6 +5,7 @@ import traverse, { Node } from '@babel/traverse'
 import * as types from '@babel/types'
 import type { AssignmentExpression, VariableDeclarator } from '@babel/types'
 import type { CompilationAssets, AsyncPackOpts } from './types'
+import { isDynamicPackageJsAsset, isDynamicPackageWXssAsset } from './utils'
 
 interface Opts extends AsyncPackOpts {
   assets: CompilationAssets;
@@ -35,19 +36,29 @@ const webpackLoadDynamicModuleTemplate = `
       inProgress[dynamicModulePath].push(done);
       return;
     }
+    
+    const dynamicPackageNameRegex = DYNAMIC_PACKAGE_NAME_REGEX;
+    
+    const [,dynamicPackageName] = dynamicModulePath.match(dynamicPackageNameRegex) || [];
 
     const target = { src: dynamicModulePath };
 
     if (loadedDynamicModules[dynamicModulePath]) return done({ type: 'loaded', target });
-
-    promiseRetry(function () {
-      return loadDynamicModule(dynamicModulePath)
+    
+    const { SingletonPromise } = require('~/singleton-promise.js');
+    
+    const waitStyle = hasStyleDynamicModuleList.includes(dynamicModulePath)?SingletonPromise.wait(dynamicPackageName):Promise.resolve();
+    
+    waitStyle.then(()=>{
+      promiseRetry(function () {
+        return loadDynamicModule(dynamicModulePath)
+      })
+      .then(function () {
+        return done({ type: 'loaded', target })
+      }).catch(function () {
+        return done({ type:'error', target })
+      });
     })
-    .then(function () {
-      return done({ type: 'loaded', target })
-    }).catch(function () {
-      return done({ type:'error', target })
-    });
   };
 `
 
@@ -68,30 +79,49 @@ const replaceWebpackLoadScriptFn = (assignmentExpressionNodePath: NodePath<Assig
 
   if (isProcessed) return
 
-  const { assets, dynamicModuleJsDir } = opts
+  const { assets, dynamicPackageNamePrefix } = opts
+
+  const dynamicJsAssets = Object.keys(assets).filter((assetName) => {
+    return isDynamicPackageJsAsset(dynamicPackageNamePrefix, assetName)
+  })
 
-  const dynamicAssets = Object.keys(assets).filter((assetName) => {
-    return new RegExp(`^${dynamicModuleJsDir}/.`).test(assetName)
+  const dynamicWXssAssets = Object.keys(assets).filter((assetName) => {
+    return 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 templateCodeAst = template.ast(webpackLoadDynamicModuleTemplate)
+  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 templateCodeDepAst = template.ast(webpackLoadDynamicModuleTemplateDep)
+  const DYNAMIC_PACKAGE_NAME_REGEX = types.regExpLiteral(`(${dynamicPackageNamePrefix}(?:-[a-z]{2})?)\\/`)
+
+  const templateCodeAst = template.statement(webpackLoadDynamicModuleTemplate)({ DYNAMIC_PACKAGE_NAME_REGEX })
 
   const loadDynamicModuleFnMapAst = template.ast(loadDynamicModuleFnMapCode)
 
-  assignmentExpressionNodePath.replaceWith(templateCodeAst as Node)
+  const hasStyleDynamicAssetsListAst = template.ast(hasStyleDynamicAssetsListCode)
 
-  assignmentExpressionNodePath.insertBefore(templateCodeDepAst)
+  const templateCodeDepAst = template.ast(webpackLoadDynamicModuleTemplateDep)
+
+  assignmentExpressionNodePath.replaceWith(templateCodeAst)
 
   assignmentExpressionNodePath.insertBefore(loadDynamicModuleFnMapAst)
+
+  assignmentExpressionNodePath.insertBefore(hasStyleDynamicAssetsListAst)
+
+  assignmentExpressionNodePath.insertBefore(templateCodeDepAst)
 }
 
 const webpackLoadDynamicModuleStylesheetTemplate = `

package/src/types.ts

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

package/src/utils.ts

@@ -0,0 +1,42 @@
+import { AsyncPackOpts } from './types'
+
+export const generateKeyByOrder = (order: number) => {
+  const startStr = 'a'.charCodeAt(0)
+  const firstLetter = String.fromCharCode(startStr + Math.floor(order / 26))
+  const secondLetter = String.fromCharCode(startStr + order % 26)
+  return `${firstLetter}${secondLetter}`
+}
+
+export const hashModBigInt = (hash: string, mod: number) => {
+  if (!hash) return 0
+  return Number(BigInt('0x' + hash) % BigInt(mod))
+}
+
+export const isNumber = (val: any) => {
+  return typeof val === 'number' && Number.isFinite(val)
+}
+
+export const isDynamicPackageName = (prefix: string, packageName: string) => {
+  const dynamicModuleRegExp = new RegExp(`^${prefix}(?:-[a-z]{2})?/`)
+  return dynamicModuleRegExp.test(packageName)
+}
+
+export const isDynamicPackageJsAsset = (prefix: string, assetName: string) => {
+  const dynamicJsAssetRegExp = new RegExp(`^${prefix}(?:-[a-z]{2})?\\/.*\\.js$`)
+  return dynamicJsAssetRegExp.test(assetName)
+}
+
+export const isDynamicPackageWXssAsset = (prefix: string, assetName: string) => {
+  const dynamicWXssAssetRegExp = new RegExp(`^${prefix}(?:-[a-z]{2})?\\/.*\\.wxss$`)
+  return dynamicWXssAssetRegExp.test(assetName)
+}
+
+export const isDynamicPackageWXssAssetWithOrder = (opt: AsyncPackOpts & { order?: number }, assetName: string) => {
+  if (!isNumber(opt.order) || opt.dynamicPackageCount <= 1) return isDynamicPackageWXssAsset(opt.dynamicPackageNamePrefix, assetName)
+  return new RegExp(`^${opt.dynamicPackageNamePrefix}-${generateKeyByOrder(opt.order!)}\\/.*\\.wxss$`).test(assetName)
+}
+
+export const generateDynamicPackageName = (opt: AsyncPackOpts & { order?: number }) => {
+  if (!isNumber(opt.order) || opt.dynamicPackageCount <= 1) return opt.dynamicPackageNamePrefix
+  return `${opt.dynamicPackageNamePrefix}-${generateKeyByOrder(opt.order!)}`
+}

package/dist/merge-output.d.ts

@@ -1,12 +0,0 @@
-import { Compiler } from 'webpack';
-export declare const PLUGIN_NAME = "MergeOutput";
-interface MergeOutputOpt {
-    test: RegExp;
-    outputFile: string;
-}
-export declare class MergeOutputPlugin {
-    private readonly opts;
-    constructor(opts: MergeOutputOpt);
-    apply(compiler: Compiler): void;
-}
-export {};

package/dist/merge-output.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MergeOutputPlugin = exports.PLUGIN_NAME = void 0;
-exports.PLUGIN_NAME = 'MergeOutput';
-class MergeOutputPlugin {
-    constructor(opts) {
-        this.opts = opts;
-    }
-    apply(compiler) {
-        compiler.hooks.compilation.tap(exports.PLUGIN_NAME, (compilation) => {
-            const stage = compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL; // 最早阶段，在优化前
-            compilation.hooks.processAssets.tap({ name: exports.PLUGIN_NAME, stage }, (assets) => {
-                const mergedResult = Object.keys(assets).reduce((result, item) => {
-                    if (!this.opts.test.test(item))
-                        return result;
-                    const code = assets[item].source().toString();
-                    delete assets[item];
-                    return result + code + '\n';
-                }, '');
-                compilation.assets[this.opts.outputFile] = new compiler.webpack.sources.RawSource(mergedResult);
-            });
-        });
-    }
-}
-exports.MergeOutputPlugin = MergeOutputPlugin;
-//# sourceMappingURL=merge-output.js.map

package/dist/merge-output.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"merge-output.js","sourceRoot":"","sources":["../src/merge-output.ts"],"names":[],"mappings":";;;AAEa,QAAA,WAAW,GAAG,aAAa,CAAA;AAOxC,MAAa,iBAAiB;IAG5B,YAAa,IAAoB;QAC/B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;IAClB,CAAC;IAED,KAAK,CAAE,QAAkB;QACvB,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,mBAAW,EAAE,CAAC,WAAwB,EAAE,EAAE;YACvE,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,+BAA+B,CAAA,CAAC,YAAY;YAEvF,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,mBAAW,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,EAAE,EAAE;gBAC3E,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;oBAC/D,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;wBAAE,OAAO,MAAM,CAAA;oBAC7C,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAA;oBAC7C,OAAO,MAAM,CAAC,IAAI,CAAC,CAAA;oBACnB,OAAO,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;gBAC7B,CAAC,EAAE,EAAE,CAAC,CAAA;gBAEN,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA;YAClG,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AAvBD,8CAuBC"}

package/dist/transform-app-stylesheet.d.ts

@@ -1,6 +0,0 @@
-import type { CompilationAssets, AsyncPackOpts } from './types';
-interface Opts extends AsyncPackOpts {
-    assets: CompilationAssets;
-}
-export declare const transformAppStylesheet: (code: string, opts: Opts) => string;
-export {};

package/dist/transform-app-stylesheet.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformAppStylesheet = void 0;
-const transformAppStylesheet = (code, opts) => {
-    const { dynamicModuleStyleFile, assets } = opts;
-    const isDynamicModuleStyleFileExist = Object.keys(assets).some(assetName => {
-        return new RegExp(`${dynamicModuleStyleFile}\\.wxss`).test(assetName);
-    });
-    if (!isDynamicModuleStyleFileExist)
-        return code;
-    return code.concat(`@import './${dynamicModuleStyleFile}.wxss';`);
-};
-exports.transformAppStylesheet = transformAppStylesheet;
-//# sourceMappingURL=transform-app-stylesheet.js.map

package/dist/transform-app-stylesheet.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"transform-app-stylesheet.js","sourceRoot":"","sources":["../src/transform-app-stylesheet.ts"],"names":[],"mappings":";;;AAMO,MAAM,sBAAsB,GAAG,CAAC,IAAY,EAAE,IAAU,EAAE,EAAE;IACjE,MAAM,EAAE,sBAAsB,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;IAE/C,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;QACzE,OAAO,IAAI,MAAM,CAAC,GAAG,sBAAsB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACvE,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,6BAA6B;QAAE,OAAO,IAAI,CAAA;IAE/C,OAAO,IAAI,CAAC,MAAM,CAAC,cAAc,sBAAsB,SAAS,CAAC,CAAA;AACnE,CAAC,CAAA;AAVY,QAAA,sBAAsB,0BAUlC"}

package/src/merge-output.ts

@@ -1,33 +0,0 @@
-import { Compiler, Compilation } from 'webpack'
-
-export const PLUGIN_NAME = 'MergeOutput'
-
-interface MergeOutputOpt {
-    test: RegExp,
-    outputFile: string,
-}
-
-export class MergeOutputPlugin {
-  private readonly opts: MergeOutputOpt
-
-  constructor (opts: MergeOutputOpt) {
-    this.opts = opts
-  }
-
-  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) => {
-        const mergedResult = Object.keys(assets).reduce((result, item) => {
-          if (!this.opts.test.test(item)) return result
-          const code = assets[item].source().toString()
-          delete assets[item]
-          return result + code + '\n'
-        }, '')
-
-        compilation.assets[this.opts.outputFile!] = new compiler.webpack.sources.RawSource(mergedResult)
-      })
-    })
-  }
-}

package/src/transform-app-stylesheet.ts

@@ -1,17 +0,0 @@
-import type { CompilationAssets, AsyncPackOpts } from './types'
-
-interface Opts extends AsyncPackOpts {
-    assets: CompilationAssets;
-}
-
-export const transformAppStylesheet = (code: string, opts: Opts) => {
-  const { dynamicModuleStyleFile, assets } = opts
-
-  const isDynamicModuleStyleFileExist = Object.keys(assets).some(assetName => {
-    return new RegExp(`${dynamicModuleStyleFile}\\.wxss`).test(assetName)
-  })
-
-  if (!isDynamicModuleStyleFileExist) return code
-
-  return code.concat(`@import './${dynamicModuleStyleFile}.wxss';`)
-}