@taro-minify-pack/plugin-async-pack 0.1.2 → 0.1.3-alpha.1

package/README.md

@@ -57,10 +57,19 @@ module.exports = {
     },
     plugins: [
         ['@taro-minify-pack/plugin-async-pack', {
-            // 异步分包名前缀，默认为 'dynamic-common'
-            dynamicPackageNamePrefix: 'dynamic-common',
+            // 异步分包名前缀，默认为 'dynamic-package'
+            dynamicPackageNamePrefix: 'dynamic-package',
             // 异步分包数量，默认为 1
-            dynamicPackageCount: 2
+            dynamicPackageCount: 2,
+            // 自定义异步分包，最终输出目录格式为 `${dynamicPackageNamePrefix}-${name}`
+            customDynamicPackages: [
+                {
+                    name: 'report',
+                    test: (module) => /src[\\/]pages[\\/]report[\\/]/.test(module.resource || ''),
+                    // 异步分包是否异步加载样式，默认为 false，设置为 true 后，该分包下的样式文件会被异步加载（由于异步加载样式存在延时时机不可控，建议仅用于非页面首屏组件）
+                    asyncStyle: true
+                }
+            ]
         }],
     ],
 };
@@ -120,8 +129,11 @@ const AsyncComponent = defineAsyncComponent(() => import('./async-component')
    - 修改 `runtime.js` 输出，确保异步模块的`js`文件能通过`require.async`正确引入
 
 2. **样式处理**：
-   - 为每个异步分包生成样式组件
-   - 自动收集该分包下的所有样式文件并通过 `@import` 引入主包`app.wxss`同步引入
+   - 默认会先把未开启异步样式的分包样式合并成 `${dynamicPackageNamePrefix}.wxss`
+   - 编译 `app.wxss` 时自动补上一条 `@import './${dynamicPackageNamePrefix}.wxss'`，让这部分样式继续跟随主包同步加载
+   - 当 `customDynamicPackages[].asyncStyle = true` 时，会在对应自定义分包下额外生成一个 `inject-style` 组件
+   - 这个组件会收集该分包目录下的所有 `.wxss` 文件，并生成多个 `@import './xxx.wxss'` 引用，让样式跟随分包一起下发
+   - 构建结束后会继续改写 `app.json` 和页面 `wxml`：把 `inject-style` 注册到 `usingComponents` / `componentPlaceholder`，再把组件节点追加到页面模板中，借此触发该分包样式的异步加载
 
 3. **小程序配置修改**：
    - 自动修改 `app.json`，添加异步分包配置
@@ -133,14 +145,52 @@ const AsyncComponent = defineAsyncComponent(() => import('./async-component')
 3. **Babel 配置**：需要正确配置 Babel 的 `dynamic-import-node` 选项
 4. **Webpack 版本**：仅支持 Webpack 5 编译器
 5. **分包数量**：根据项目实际情况配置 `dynamicPackageCount`，过多的分包可能会影响性能
-6. **版本要求**：插件版本`0.0.5-alpha.x`尝试实现样式文件异步加载受微信机制影响存在无法优化的「闪屏样式丢失」,故`0.0.5`及以后版本不支持样式文件异步加载。
 
 ## 🔧 配置选项
 
-| 选项名                        | 类型       | 默认值                | 描述       |
-|----------------------------|----------|--------------------|----------|
-| `dynamicPackageNamePrefix` | `string` | `'dynamic-common'` | 异步分包名称前缀 |
-| `dynamicPackageCount`      | `number` | `1`                | 异步分包数量   |
+| 选项名                        | 类型                       | 默认值                | 描述        |
+|----------------------------|--------------------------|--------------------|-----------|
+| `dynamicPackageNamePrefix` | `string`                 | `'dynamic-package'` | 异步分包名称前缀  |
+| `dynamicPackageCount`      | `number`                 | `1`                | 异步分包数量    |
+| `customDynamicPackages`    | `CustomDynamicPackage[]` | `[]`               | 自定义异步分包配置 |
+
+### `customDynamicPackages` 配置说明
+
+```ts
+interface CustomDynamicPackage {
+  name: string
+  test: string | RegExp | ((module, context) => boolean)
+  asyncStyle?: boolean
+}
+```
+
+- `name`：自定义异步分包标识，最终会拼成 `${dynamicPackageNamePrefix}-${name}`，例如 `dynamic-package-report`
+- `test`：直接透传给 webpack `splitChunks.cacheGroups[packageName].test`，命中的异步模块会被拆到该分包
+- `asyncStyle`：默认 `false`。开启后会为该分包额外生成 `inject-style` 组件，并自动注入到页面模板中，让该分包内样式跟随组件异步加载
+
+### `customDynamicPackages` 配置示例
+
+```js
+plugins: [
+  ['@taro-minify-pack/plugin-async-pack', {
+    dynamicPackageNamePrefix: 'dynamic-package',
+    dynamicPackageCount: 2,
+    customDynamicPackages: [
+      {
+        name: 'sync-style', 
+        test: (module) => /src[\\/]pages[\\/]sync-style[\\/]/.test(module.resource || ''),
+      },
+      {
+        name: 'async-style',
+        test: (module) => /src[\\/]pages[\\/]async-style[\\/]/.test(module.resource || ''),
+        asyncStyle: true
+      }
+    ]
+  }]
+]
+```
+
+上述配置会额外生成 `dynamic-package-sync-style` 和 `dynamic-package-async-style` 两个异步分包；其中 `async-style` 分包会同时产出 `inject-style` 组件，并在编译时自动追加到 `app.json` 与页面模板中。
 
 ## 🤝 常见问题
 
@@ -176,4 +226,3 @@ MIT License
 欢迎提交 Issue 和 Pull Request！
 
 > 该插件是 @taro-minify-pack 系列插件的一部分，致力于提供完整的 Taro 项目优化解决方案。
-

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { IPluginContext } from '@tarojs/service';
 import { AsyncPackOpts } from './types';
 export { AsyncPackOpts } from './types';
-declare const _default: (ctx: IPluginContext, pluginOpts: AsyncPackOpts) => void;
+declare const _default: (ctx: IPluginContext, pluginOpts: Partial<AsyncPackOpts>) => void;
 export default _default;

package/dist/index.js

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const transform_webpack_runtime_1 = require("./transform-webpack-runtime");
 const transform_before_compression_plugin_1 = require("./transform-before-compression-plugin");
+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 transform_app_stylesheet_1 = require("./transform-app-stylesheet");
 const merge_output_1 = require("./merge-output");
 const dynamicPackOptsDefaultOpt = {
-    dynamicPackageNamePrefix: 'dynamic-common',
-    dynamicPackageCount: 1
+    dynamicPackageNamePrefix: 'dynamic-package',
+    dynamicPackageCount: 1,
+    customDynamicPackages: []
 };
 exports.default = (ctx, pluginOpts) => {
     const finalOpts = Object.assign(Object.assign({}, dynamicPackOptsDefaultOpt), pluginOpts);
@@ -20,17 +23,19 @@ 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}`;
-        };
+        const customPackageCacheGroups = finalOpts.customDynamicPackages.reduce((result, item) => {
+            const { name: packageName, test } = item;
+            const customDynamicPackageName = (0, utils_1.generateCustomDynamicPackageName)(finalOpts, packageName);
+            const name = (module) => { var _a; return `${customDynamicPackageName}/${((_a = module.buildInfo) === null || _a === void 0 ? void 0 : _a.hash) || module.id}`; };
+            const cacheGroup = { chunks: 'async', test, name };
+            return Object.assign(Object.assign({}, result), { [customDynamicPackageName]: cacheGroup });
+        }, {});
         chain.optimization.merge({
-            splitChunks: Object.assign(Object.assign({}, existingSplitChunks), { cacheGroups: Object.assign(Object.assign({}, existingSplitChunks.cacheGroups), { common: newCommonChunks, vendors: newVendorsChunks }) })
+            splitChunks: Object.assign(Object.assign({}, existingSplitChunks), { cacheGroups: Object.assign(Object.assign(Object.assign({}, customPackageCacheGroups), existingSplitChunks.cacheGroups), { common: newCommonChunks, vendors: newVendorsChunks }) })
         });
         chain.merge({
             output: {
-                chunkFilename: (pathData) => generateChunkFilename(pathData, '.js'),
+                chunkFilename: (pathData) => (0, utils_1.generateChunkFilename)(Object.assign(Object.assign({}, finalOpts), { pathData, ext: '.js' })),
                 path: ctx.paths.outputPath,
                 clean: true
             }
@@ -38,7 +43,7 @@ exports.default = (ctx, pluginOpts) => {
         chain.plugin('miniCssExtractPlugin')
             .tap((args) => {
             const [options] = args;
-            const chunkFilename = (pathData) => generateChunkFilename(pathData, '.wxss');
+            const chunkFilename = (pathData) => (0, utils_1.generateChunkFilename)(Object.assign(Object.assign({}, finalOpts), { pathData, ext: '.wxss' }));
             return [Object.assign(Object.assign({}, options), { chunkFilename })];
         });
         chain.plugin(transform_before_compression_plugin_1.PLUGIN_NAME).use(transform_before_compression_plugin_1.TransformBeforeCompressionPlugin, [{
@@ -54,15 +59,23 @@ exports.default = (ctx, pluginOpts) => {
                 }
             }]);
         chain.plugin(merge_output_1.PLUGIN_NAME).use(merge_output_1.MergeOutputPlugin, [{
-                test: (assetName) => (0, utils_1.isDynamicPackageWXssAsset)(finalOpts.dynamicPackageNamePrefix, assetName),
+                test: (assetName) => (0, utils_1.matchSuffix)('wxss', assetName) && (0, utils_1.isSyncStyleDynamicPackageAsset)(finalOpts, assetName),
                 outputFile: `${finalOpts.dynamicPackageNamePrefix}.wxss`
             }]);
+        chain.plugin(inject_style_component_1.PLUGIN_NAME).use(inject_style_component_1.InjectStyleComponentPlugin, [finalOpts]);
     });
     ctx.modifyBuildAssets(({ assets }) => {
-        const hasDynamicModule = Object.keys(assets).some((key) => (0, utils_1.isDynamicPackageName)(finalOpts.dynamicPackageNamePrefix, key));
+        const hasDynamicModule = Object.keys(assets).some((key) => (0, utils_1.isDynamicPackageAsset)(finalOpts, key));
         if (!hasDynamicModule)
             return;
-        (0, transform_app_config_1.transformAppConfig)(Object.assign(Object.assign({}, finalOpts), { assets }));
+        const asyncComponents = finalOpts.customDynamicPackages.filter(item => item.asyncStyle).reduce((result, item) => {
+            const { name: packageName } = item;
+            const componentName = `${inject_style_component_1.InjectStyleComponentName}-${packageName}`;
+            const customDynamicPackageName = (0, utils_1.generateCustomDynamicPackageName)(finalOpts, packageName);
+            return Object.assign(Object.assign({}, result), { [componentName]: `${customDynamicPackageName}/${inject_style_component_1.InjectStyleComponentName}` });
+        }, {});
+        (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,46 @@
+"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 webpack_sources_1 = require("webpack-sources");
+const utils_1 = require("./utils");
+exports.PLUGIN_NAME = 'InjectStyleComponent';
+exports.InjectStyleComponentName = 'inject-style';
+class InjectStyleComponentPlugin {
+    constructor(opt) {
+        this.WXmlContent = '<block/>';
+        this.JsonContent = '{"component": true,"styleIsolation": "shared"}';
+        this.JsContent = 'Component({})';
+        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) => {
+                const { customDynamicPackages } = this.opt;
+                customDynamicPackages.forEach(customDynamicPackageItem => {
+                    if (!customDynamicPackageItem.asyncStyle)
+                        return;
+                    const customDynamicPackageName = (0, utils_1.generateCustomDynamicPackageName)(this.opt, customDynamicPackageItem.name);
+                    const styleFileContent = Object.keys(assets).reduce((result, assetPath) => {
+                        if (!new RegExp(`^${customDynamicPackageName}\\/.*\\.wxss$`).test(assetPath))
+                            return result;
+                        const relativePath = path_1.default.posix.relative(customDynamicPackageName, assetPath);
+                        const code = `@import './${relativePath}';`;
+                        return result + code + '\n';
+                    }, '');
+                    const componentPath = `${customDynamicPackageName}/${exports.InjectStyleComponentName}`;
+                    compilation.assets[`${componentPath}.wxss`] = new webpack_sources_1.RawSource(styleFileContent);
+                    compilation.assets[`${componentPath}.wxml`] = new webpack_sources_1.RawSource(this.WXmlContent);
+                    compilation.assets[`${componentPath}.json`] = new webpack_sources_1.RawSource(this.JsonContent);
+                    compilation.assets[`${componentPath}.js`] = new webpack_sources_1.RawSource(this.JsContent);
+                });
+            });
+        });
+    }
+}
+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,qDAA2C;AAC3C,mCAA0D;AAE7C,QAAA,WAAW,GAAG,sBAAsB,CAAA;AAEpC,QAAA,wBAAwB,GAAG,cAAc,CAAA;AAItD,MAAa,0BAA0B;IASrC,YAAa,GAAQ;QANJ,gBAAW,GAAW,UAAU,CAAA;QAEhC,gBAAW,GAAU,gDAAgD,CAAA;QAErE,cAAS,GAAW,eAAe,CAAA;QAGlD,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,MAAM,EAAE,qBAAqB,EAAE,GAAG,IAAI,CAAC,GAAG,CAAA;gBAE1C,qBAAqB,CAAC,OAAO,CAAC,wBAAwB,CAAC,EAAE;oBACvD,IAAI,CAAC,wBAAwB,CAAC,UAAU;wBAAE,OAAM;oBAEhD,MAAM,wBAAwB,GAAG,IAAA,wCAAgC,EAAC,IAAI,CAAC,GAAG,EAAE,wBAAwB,CAAC,IAAI,CAAC,CAAA;oBAE1G,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE;wBACxE,IAAI,CAAC,IAAI,MAAM,CAAC,IAAI,wBAAwB,eAAe,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;4BAAE,OAAO,MAAM,CAAA;wBAC3F,MAAM,YAAY,GAAG,cAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAA;wBAC7E,MAAM,IAAI,GAAG,cAAc,YAAY,IAAI,CAAA;wBAC3C,OAAO,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;oBAC7B,CAAC,EAAE,EAAE,CAAC,CAAA;oBAEN,MAAM,aAAa,GAAG,GAAG,wBAAwB,IAAI,gCAAwB,EAAE,CAAA;oBAC/E,WAAW,CAAC,MAAM,CAAC,GAAG,aAAa,OAAO,CAAC,GAAG,IAAI,2BAAS,CAAC,gBAAgB,CAAC,CAAA;oBAC7E,WAAW,CAAC,MAAM,CAAC,GAAG,aAAa,OAAO,CAAC,GAAG,IAAI,2BAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;oBAC7E,WAAW,CAAC,MAAM,CAAC,GAAG,aAAa,OAAO,CAAC,GAAG,IAAI,2BAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;oBAC7E,WAAW,CAAC,MAAM,CAAC,GAAG,aAAa,KAAK,CAAC,GAAG,IAAI,2BAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;gBAC3E,CAAC,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AAzCD,gEAyCC"}

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

@@ -2,6 +2,7 @@ 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

@@ -16,14 +16,20 @@ const webpack_sources_1 = require("webpack-sources");
 const utils_1 = require("./utils");
 const appConfigAssetKey = 'app.json';
 const transformAppConfig = (opts) => {
-    const { dynamicPackageCount, assets } = opts;
+    const { dynamicPackageCount, customDynamicPackages, 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 defaultDynamicPackagesConfig = new Array(dynamicPackageCount).fill(null).map((_, order) => {
+        return { root: (0, utils_1.generateDefaultDynamicPackageName)(Object.assign(Object.assign({}, opts), { order })), pages: [] };
     });
-    const finalAppConfig = Object.assign(Object.assign({}, otherAppJSON), { subPackages: [...finalSubPackages, ...dynamicPackagesConfigs], resolveAlias: Object.assign(Object.assign({}, resolveAlias), { '~/*': '/*' }) });
+    const customDynamicPackagesConfig = customDynamicPackages.map(customDynamicPackageItem => {
+        return { root: (0, utils_1.generateCustomDynamicPackageName)(opts, customDynamicPackageItem.name), 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, ...defaultDynamicPackagesConfig, ...customDynamicPackagesConfig], resolveAlias: Object.assign(Object.assign({}, resolveAlias), { '~/*': '/*' }) });
     assets[appConfigAssetKey] = new webpack_sources_1.RawSource(JSON.stringify(finalAppConfig));
 };
 exports.transformAppConfig = transformAppConfig;

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

@@ -1 +1 @@
-{"version":3,"file":"transform-app-config.js","sourceRoot":"","sources":["../src/transform-app-config.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,qDAA2C;AAC3C,mCAAoD;AAMpD,MAAM,iBAAiB,GAAG,UAAU,CAAA;AAE7B,MAAM,kBAAkB,GAAG,CAAC,IAAU,EAAE,EAAE;IAC/C,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;IAE5C,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,cAAc,mCACf,YAAY,KACf,WAAW,EAAE,CAAC,GAAG,gBAAgB,EAAE,GAAG,sBAAsB,CAAC,EAC7D,YAAY,kCAAO,YAAY,KAAE,KAAK,EAAE,IAAI,MAC7C,CAAA;IAED,MAAM,CAAC,iBAAiB,CAAC,GAAG,IAAI,2BAAS,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AAC3E,CAAC,CAAA;AApBY,QAAA,kBAAkB,sBAoB9B"}
+{"version":3,"file":"transform-app-config.js","sourceRoot":"","sources":["../src/transform-app-config.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,qDAA2C;AAC3C,mCAA6F;AAO7F,MAAM,iBAAiB,GAAG,UAAU,CAAA;AAE7B,MAAM,kBAAkB,GAAG,CAAC,IAAU,EAAE,EAAE;IAC/C,MAAM,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;IAEpF,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,4BAA4B,GAAG,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QAC9F,OAAO,EAAE,IAAI,EAAE,IAAA,yCAAiC,kCAAM,IAAI,KAAE,KAAK,IAAG,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;IACnF,CAAC,CAAC,CAAA;IAEF,MAAM,2BAA2B,GAAG,qBAAqB,CAAC,GAAG,CAAC,wBAAwB,CAAC,EAAE;QACvF,OAAO,EAAE,IAAI,EAAE,IAAA,wCAAgC,EAAC,IAAI,EAAE,wBAAwB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;IACnG,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,4BAA4B,EAAE,GAAG,2BAA2B,CAAC,EACnG,YAAY,kCAAO,YAAY,KAAE,KAAK,EAAE,IAAI,MAC7C,CAAA;IAED,MAAM,CAAC,iBAAiB,CAAC,GAAG,IAAI,2BAAS,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AAC3E,CAAC,CAAA;AA9BY,QAAA,kBAAkB,sBA8B9B"}

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 pageWXmlPaths = (() => {
+        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`);
+    })();
+    Object.keys(assets).forEach((assetPath) => {
+        if (!pageWXmlPaths.includes(assetPath))
+            return;
+        const source = assets[assetPath].source();
+        const asyncComponentCode = Object.keys(asyncComponents).map((item) => `<${item}/>`);
+        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,aAAa,GAAG,CAAC,GAAG,EAAE;;QAC1B,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,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;QACxC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC;YAAE,OAAM;QAC9C,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,EAAY,CAAA;QACnD,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC,CAAA;QACnF,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;AAvBY,QAAA,kBAAkB,sBAuB9B"}

package/dist/transform-webpack-runtime.js

@@ -96,9 +96,9 @@ const replaceWebpackLoadScriptFn = (assignmentExpressionNodePath, opts) => {
     });
     if (isProcessed)
         return;
-    const { assets, dynamicPackageNamePrefix } = opts;
+    const { assets } = opts;
     const dynamicJsAssets = Object.keys(assets).filter((assetName) => {
-        return (0, utils_1.isDynamicPackageJsAsset)(dynamicPackageNamePrefix, assetName);
+        return (0, utils_1.isDynamicPackageAsset)(opts, assetName) && (0, utils_1.matchSuffix)('js', assetName);
     });
     const loadDynamicModuleFnMapCode = (() => {
         const dynamicAssetsRequireTempCode = dynamicJsAssets.map((dynamicJsAsset) => {

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,18 @@
 import { Source } from 'webpack-sources';
+import type { ChunkGraph, Module, ModuleGraph } from 'webpack';
+interface CacheGroupsContext {
+    moduleGraph: ModuleGraph;
+    chunkGraph: ChunkGraph;
+}
+interface CustomDynamicPackage {
+    name: string;
+    asyncStyle?: boolean;
+    test: string | RegExp | ((module: Module, context: CacheGroupsContext) => boolean);
+}
 export interface AsyncPackOpts {
     dynamicPackageNamePrefix: string;
     dynamicPackageCount: number;
+    customDynamicPackages: CustomDynamicPackage[];
 }
 export type CompilationAssets = Record<string, Source>;
+export {};

package/dist/utils.d.ts

@@ -1,10 +1,19 @@
 import { AsyncPackOpts } from './types';
-export declare const generateKeyByOrder: (order: number) => string;
+import type { PathData } from 'webpack';
 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 generateDynamicPackageName: (opt: AsyncPackOpts & {
+export declare const generateKeyByOrder: (order: number) => string;
+export declare const generateDefaultDynamicPackageName: (opt: AsyncPackOpts & {
     order?: number;
 }) => string;
+export declare const generateCustomDynamicPackageName: (opt: AsyncPackOpts, packageName: string) => string;
+export declare const generateChunkFilename: (opt: AsyncPackOpts & {
+    pathData: PathData;
+    ext: string;
+}) => string;
+export declare const isNumber: (val: any) => boolean;
+export declare const isDefaultDynamicPackageAsset: (opt: AsyncPackOpts, assetName: string) => boolean;
+export declare const isCustomDynamicPackageAsset: (opt: AsyncPackOpts, assetName: string) => boolean;
+export declare const isDynamicPackageAsset: (opt: AsyncPackOpts, assetName: string) => boolean;
+export declare const isAsyncStyleDynamicPackageAsset: (opt: AsyncPackOpts, assetName: string) => boolean;
+export declare const isSyncStyleDynamicPackageAsset: (opt: AsyncPackOpts, assetName: string) => boolean;
+export declare const matchSuffix: (suffix: string, assetName: string) => boolean;

package/dist/utils.js

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateDynamicPackageName = exports.isDynamicPackageWXssAsset = exports.isDynamicPackageJsAsset = exports.isDynamicPackageName = exports.isNumber = exports.hashModBigInt = exports.generateKeyByOrder = void 0;
+exports.matchSuffix = exports.isSyncStyleDynamicPackageAsset = exports.isAsyncStyleDynamicPackageAsset = exports.isDynamicPackageAsset = exports.isCustomDynamicPackageAsset = exports.isDefaultDynamicPackageAsset = exports.isNumber = exports.generateChunkFilename = exports.generateCustomDynamicPackageName = exports.generateDefaultDynamicPackageName = exports.generateKeyByOrder = exports.hashModBigInt = void 0;
+const hashModBigInt = (hash, mod) => {
+    if (!hash || mod <= 0)
+        return 0;
+    return Number(BigInt('0x' + hash) % BigInt(mod));
+};
+exports.hashModBigInt = hashModBigInt;
 const generateKeyByOrder = (order) => {
     const startStr = 'a'.charCodeAt(0);
     const firstLetter = String.fromCharCode(startStr + Math.floor(order / 26));
@@ -8,35 +14,57 @@ const generateKeyByOrder = (order) => {
     return `${firstLetter}${secondLetter}`;
 };
 exports.generateKeyByOrder = generateKeyByOrder;
-const hashModBigInt = (hash, mod) => {
-    if (!hash)
-        return 0;
-    return Number(BigInt('0x' + hash) % BigInt(mod));
+const generateDefaultDynamicPackageName = (opt) => {
+    if (!(0, exports.isNumber)(opt.order) || opt.dynamicPackageCount <= 1)
+        return opt.dynamicPackageNamePrefix;
+    return `${opt.dynamicPackageNamePrefix}-${(0, exports.generateKeyByOrder)(opt.order)}`;
 };
-exports.hashModBigInt = hashModBigInt;
+exports.generateDefaultDynamicPackageName = generateDefaultDynamicPackageName;
+const generateCustomDynamicPackageName = (opt, packageName) => {
+    return `${opt.dynamicPackageNamePrefix}-${packageName}`;
+};
+exports.generateCustomDynamicPackageName = generateCustomDynamicPackageName;
+const generateChunkFilename = (opt) => {
+    const { chunk } = opt.pathData;
+    if (chunk === null || chunk === void 0 ? void 0 : chunk.name)
+        return `${chunk === null || chunk === void 0 ? void 0 : chunk.name}${opt.ext}`;
+    const order = (0, exports.hashModBigInt)((chunk === null || chunk === void 0 ? void 0 : chunk.hash) || '', opt.dynamicPackageCount);
+    return `${(0, exports.generateDefaultDynamicPackageName)(Object.assign(Object.assign({}, opt), { order }))}/[chunkhash]${opt.ext}`;
+};
+exports.generateChunkFilename = generateChunkFilename;
 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 generateDynamicPackageName = (opt) => {
-    if (!(0, exports.isNumber)(opt.order) || opt.dynamicPackageCount <= 1)
-        return opt.dynamicPackageNamePrefix;
-    return `${opt.dynamicPackageNamePrefix}-${(0, exports.generateKeyByOrder)(opt.order)}`;
+const isDefaultDynamicPackageAsset = (opt, assetName) => {
+    const dynamicModuleRegExp = new RegExp(`^${opt.dynamicPackageNamePrefix}(?:-[a-z]{2})?/`);
+    return dynamicModuleRegExp.test(assetName);
+};
+exports.isDefaultDynamicPackageAsset = isDefaultDynamicPackageAsset;
+const isCustomDynamicPackageAsset = (opt, assetName) => {
+    const customDynamicPackageNames = opt.customDynamicPackages.map(item => (0, exports.generateCustomDynamicPackageName)(opt, item.name));
+    if (!customDynamicPackageNames.length)
+        return false;
+    return new RegExp(`^(${customDynamicPackageNames.join('|')})/`).test(assetName);
+};
+exports.isCustomDynamicPackageAsset = isCustomDynamicPackageAsset;
+const isDynamicPackageAsset = (opt, assetName) => {
+    return (0, exports.isDefaultDynamicPackageAsset)(opt, assetName) || (0, exports.isCustomDynamicPackageAsset)(opt, assetName);
+};
+exports.isDynamicPackageAsset = isDynamicPackageAsset;
+const isAsyncStyleDynamicPackageAsset = (opt, assetName) => {
+    const asyncStylDynamicPackageNames = opt.customDynamicPackages.filter(item => item.asyncStyle).map(item => `${opt.dynamicPackageNamePrefix}-${item.name}`);
+    if (!asyncStylDynamicPackageNames.length)
+        return false;
+    return new RegExp(`^(${asyncStylDynamicPackageNames.join('|')})/`).test(assetName);
+};
+exports.isAsyncStyleDynamicPackageAsset = isAsyncStyleDynamicPackageAsset;
+const isSyncStyleDynamicPackageAsset = (opt, assetName) => {
+    return (0, exports.isDynamicPackageAsset)(opt, assetName) && !(0, exports.isAsyncStyleDynamicPackageAsset)(opt, assetName);
+};
+exports.isSyncStyleDynamicPackageAsset = isSyncStyleDynamicPackageAsset;
+const matchSuffix = (suffix, assetName) => {
+    return new RegExp(`\\.${suffix}$`).test(assetName);
 };
-exports.generateDynamicPackageName = generateDynamicPackageName;
+exports.matchSuffix = matchSuffix;
 //# sourceMappingURL=utils.js.map

package/dist/utils.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taro-minify-pack/plugin-async-pack",
-  "version": "0.1.2",
+  "version": "0.1.3-alpha.1",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/index.ts

@@ -1,9 +1,23 @@
 import type { IPluginContext } from '@tarojs/service'
-import type { PathData } from 'webpack'
+import type { Module, PathData } from 'webpack'
 import { transformWebpackRuntime } from './transform-webpack-runtime'
-import { TransformOpt, TransformBeforeCompressionPlugin, PLUGIN_NAME as TransformBeforeCompressionPluginName } from './transform-before-compression-plugin'
+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 { generateDynamicPackageName, hashModBigInt, isDynamicPackageName, isDynamicPackageWXssAsset } from './utils'
+import { transformPagesWXml } from './transform-pages-wxml'
+import {
+  generateChunkFilename,
+  isSyncStyleDynamicPackageAsset, isDynamicPackageAsset,
+  matchSuffix, generateCustomDynamicPackageName
+} from './utils'
 import { AsyncPackOpts } from './types'
 import { transformAppStylesheet } from './transform-app-stylesheet'
 import { MergeOutputPlugin, PLUGIN_NAME as MergeOutputPluginName } from './merge-output'
@@ -11,11 +25,12 @@ import { MergeOutputPlugin, PLUGIN_NAME as MergeOutputPluginName } from './merge
 export { AsyncPackOpts } from './types'
 
 const dynamicPackOptsDefaultOpt: AsyncPackOpts = {
-  dynamicPackageNamePrefix: 'dynamic-common',
-  dynamicPackageCount: 1
+  dynamicPackageNamePrefix: 'dynamic-package',
+  dynamicPackageCount: 1,
+  customDynamicPackages: []
 }
 
-export default (ctx: IPluginContext, pluginOpts: AsyncPackOpts) => {
+export default (ctx: IPluginContext, pluginOpts: Partial<AsyncPackOpts>) => {
   const finalOpts = { ...dynamicPackOptsDefaultOpt, ...pluginOpts }
 
   if (process.env.TARO_ENV !== 'weapp') return
@@ -30,16 +45,19 @@ 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}`
-    }
+    const customPackageCacheGroups = finalOpts.customDynamicPackages.reduce((result, item) => {
+      const { name: packageName, test } = item
+      const customDynamicPackageName = generateCustomDynamicPackageName(finalOpts, packageName)
+      const name = (module: Module) => `${customDynamicPackageName}/${module.buildInfo?.hash || module.id}`
+      const cacheGroup = { chunks: 'async', test, name }
+      return { ...result, [customDynamicPackageName]: cacheGroup }
+    }, {})
 
     chain.optimization.merge({
       splitChunks: {
         ...existingSplitChunks,
         cacheGroups: {
+          ...customPackageCacheGroups,
           ...existingSplitChunks.cacheGroups,
           common: newCommonChunks,
           vendors: newVendorsChunks
@@ -49,7 +67,7 @@ export default (ctx: IPluginContext, pluginOpts: AsyncPackOpts) => {
 
     chain.merge({
       output: {
-        chunkFilename: (pathData:PathData) => generateChunkFilename(pathData, '.js'),
+        chunkFilename: (pathData: PathData) => generateChunkFilename({ ...finalOpts, pathData, ext: '.js' }),
         path: ctx.paths.outputPath,
         clean: true
       }
@@ -58,7 +76,7 @@ export default (ctx: IPluginContext, pluginOpts: AsyncPackOpts) => {
     chain.plugin('miniCssExtractPlugin')
       .tap((args) => {
         const [options] = args
-        const chunkFilename = (pathData:PathData) => generateChunkFilename(pathData, '.wxss')
+        const chunkFilename = (pathData: PathData) => generateChunkFilename({ ...finalOpts, pathData, ext: '.wxss' })
         return [{ ...options, chunkFilename }]
       })
 
@@ -74,16 +92,27 @@ export default (ctx: IPluginContext, pluginOpts: AsyncPackOpts) => {
     }])
 
     chain.plugin(MergeOutputPluginName).use(MergeOutputPlugin, [{
-      test: (assetName: string) => isDynamicPackageWXssAsset(finalOpts.dynamicPackageNamePrefix, assetName),
+      test: (assetName: string) => matchSuffix('wxss', assetName) && isSyncStyleDynamicPackageAsset(finalOpts, assetName),
       outputFile: `${finalOpts.dynamicPackageNamePrefix}.wxss`
     }])
+
+    chain.plugin(InjectStyleComponentPluginName).use(InjectStyleComponentPlugin, [finalOpts])
   })
 
   ctx.modifyBuildAssets(({ assets }) => {
-    const hasDynamicModule = Object.keys(assets).some((key) => isDynamicPackageName(finalOpts.dynamicPackageNamePrefix, key))
+    const hasDynamicModule = Object.keys(assets).some((key) => isDynamicPackageAsset(finalOpts, key))
 
     if (!hasDynamicModule) return
 
-    transformAppConfig({ ...finalOpts, assets })
+    const asyncComponents = finalOpts.customDynamicPackages.filter(item => item.asyncStyle).reduce((result, item) => {
+      const { name: packageName } = item
+      const componentName = `${InjectStyleComponentName}-${packageName}`
+      const customDynamicPackageName = generateCustomDynamicPackageName(finalOpts, packageName)
+      return { ...result, [componentName]: `${customDynamicPackageName}/${InjectStyleComponentName}` }
+    }, {})
+
+    transformAppConfig({ ...finalOpts, assets, asyncComponents })
+
+    transformPagesWXml({ assets, asyncComponents })
   })
 }

package/src/inject-style-component.ts

@@ -0,0 +1,54 @@
+import { Compiler, Compilation } from 'webpack'
+import path from 'path'
+import { AsyncPackOpts } from './types'
+import { RawSource } from 'webpack-sources'
+import { generateCustomDynamicPackageName } from './utils'
+
+export const PLUGIN_NAME = 'InjectStyleComponent'
+
+export const InjectStyleComponentName = 'inject-style'
+
+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 = 'Component({})'
+
+  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) => {
+        const { customDynamicPackages } = this.opt
+
+        customDynamicPackages.forEach(customDynamicPackageItem => {
+          if (!customDynamicPackageItem.asyncStyle) return
+
+          const customDynamicPackageName = generateCustomDynamicPackageName(this.opt, customDynamicPackageItem.name)
+
+          const styleFileContent = Object.keys(assets).reduce((result, assetPath) => {
+            if (!new RegExp(`^${customDynamicPackageName}\\/.*\\.wxss$`).test(assetPath)) return result
+            const relativePath = path.posix.relative(customDynamicPackageName, assetPath)
+            const code = `@import './${relativePath}';`
+            return result + code + '\n'
+          }, '')
+
+          const componentPath = `${customDynamicPackageName}/${InjectStyleComponentName}`
+          compilation.assets[`${componentPath}.wxss`] = new RawSource(styleFileContent)
+          compilation.assets[`${componentPath}.wxml`] = new RawSource(this.WXmlContent)
+          compilation.assets[`${componentPath}.json`] = new RawSource(this.JsonContent)
+          compilation.assets[`${componentPath}.js`] = new RawSource(this.JsContent)
+        })
+      })
+    })
+  }
+}

package/src/transform-app-config.ts

@@ -1,15 +1,16 @@
 import type { AsyncPackOpts } from './types'
 import { RawSource } from 'webpack-sources'
-import { generateDynamicPackageName } from './utils'
+import { generateCustomDynamicPackageName, generateDefaultDynamicPackageName } 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, assets } = opts
+  const { dynamicPackageCount, customDynamicPackages, asyncComponents, assets } = opts
 
   const curAppConfig = JSON.parse(assets[appConfigAssetKey].source() as string)
 
@@ -17,13 +18,23 @@ export const transformAppConfig = (opts: Opts) => {
 
   const finalSubPackages = subPackages || subpackages || []
 
-  const dynamicPackagesConfigs = new Array(dynamicPackageCount).fill(null).map((_, order) => {
-    return { root: generateDynamicPackageName({ ...opts, order }), pages: [] }
+  const defaultDynamicPackagesConfig = new Array(dynamicPackageCount).fill(null).map((_, order) => {
+    return { root: generateDefaultDynamicPackageName({ ...opts, order }), pages: [] }
   })
 
+  const customDynamicPackagesConfig = customDynamicPackages.map(customDynamicPackageItem => {
+    return { root: generateCustomDynamicPackageName(opts, customDynamicPackageItem.name), pages: [] }
+  })
+
+  const asyncComponentPlaceholder = Object.keys(asyncComponents).reduce((result, item) => {
+    return { ...result, [item]: 'block' }
+  }, {})
+
   const finalAppConfig = {
     ...otherAppJSON,
-    subPackages: [...finalSubPackages, ...dynamicPackagesConfigs],
+    usingComponents: { ...usingComponents, ...asyncComponents },
+    componentPlaceholder: { ...componentPlaceholder, ...asyncComponentPlaceholder },
+    subPackages: [...finalSubPackages, ...defaultDynamicPackagesConfig, ...customDynamicPackagesConfig],
     resolveAlias: { ...resolveAlias, '~/*': '/*' }
   }
 

package/src/transform-pages-wxml.ts

@@ -0,0 +1,34 @@
+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 pageWXmlPaths = (() => {
+    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`)
+  })()
+
+  Object.keys(assets).forEach((assetPath) => {
+    if (!pageWXmlPaths.includes(assetPath)) return
+    const source = assets[assetPath].source() as string
+    const asyncComponentCode = Object.keys(asyncComponents).map((item) => `<${item}/>`)
+    const tempCode = [source, ...asyncComponentCode].join('\n')
+    assets[assetPath] = new RawSource(tempCode)
+  })
+}

package/src/transform-webpack-runtime.ts

@@ -8,7 +8,7 @@ import type {
   Statement, UnaryExpression
 } from '@babel/types'
 import type { CompilationAssets, AsyncPackOpts } from './types'
-import { isDynamicPackageJsAsset } from './utils'
+import { isDynamicPackageAsset, matchSuffix } from './utils'
 
 interface Opts extends AsyncPackOpts {
   assets: CompilationAssets;
@@ -71,10 +71,10 @@ const replaceWebpackLoadScriptFn = (assignmentExpressionNodePath: NodePath<Assig
 
   if (isProcessed) return
 
-  const { assets, dynamicPackageNamePrefix } = opts
+  const { assets } = opts
 
   const dynamicJsAssets = Object.keys(assets).filter((assetName) => {
-    return isDynamicPackageJsAsset(dynamicPackageNamePrefix, assetName)
+    return isDynamicPackageAsset(opts, assetName) && matchSuffix('js', assetName)
   })
 
   const loadDynamicModuleFnMapCode = (() => {

package/src/types.ts

@@ -1,8 +1,21 @@
 import { Source } from 'webpack-sources'
+import type { ChunkGraph, Module, ModuleGraph } from 'webpack'
+
+interface CacheGroupsContext {
+    moduleGraph: ModuleGraph;
+    chunkGraph: ChunkGraph;
+}
+
+interface CustomDynamicPackage {
+    name: string
+    asyncStyle?: boolean
+    test: string | RegExp | ((module: Module, context: CacheGroupsContext) => boolean);
+}
 
 export interface AsyncPackOpts {
     dynamicPackageNamePrefix: string;
     dynamicPackageCount: number;
+    customDynamicPackages: CustomDynamicPackage[]
 }
 
 export type CompilationAssets = Record<string, Source>;

package/src/utils.ts

@@ -1,4 +1,10 @@
 import { AsyncPackOpts } from './types'
+import type { PathData } from 'webpack'
+
+export const hashModBigInt = (hash: string, mod: number) => {
+  if (!hash || mod <= 0) return 0
+  return Number(BigInt('0x' + hash) % BigInt(mod))
+}
 
 export const generateKeyByOrder = (order: number) => {
   const startStr = 'a'.charCodeAt(0)
@@ -7,31 +13,51 @@ export const generateKeyByOrder = (order: number) => {
   return `${firstLetter}${secondLetter}`
 }
 
-export const hashModBigInt = (hash: string, mod: number) => {
-  if (!hash) return 0
-  return Number(BigInt('0x' + hash) % BigInt(mod))
+export const generateDefaultDynamicPackageName = (opt: AsyncPackOpts & { order?: number }) => {
+  if (!isNumber(opt.order) || opt.dynamicPackageCount <= 1) return opt.dynamicPackageNamePrefix
+  return `${opt.dynamicPackageNamePrefix}-${generateKeyByOrder(opt.order!)}`
+}
+
+export const generateCustomDynamicPackageName = (opt: AsyncPackOpts, packageName: string) => {
+  return `${opt.dynamicPackageNamePrefix}-${packageName}`
+}
+
+export const generateChunkFilename = (opt: AsyncPackOpts & { pathData: PathData, ext: string }) => {
+  const { chunk } = opt.pathData
+  if (chunk?.name) return `${chunk?.name}${opt.ext}`
+  const order = hashModBigInt(chunk?.hash || '', opt.dynamicPackageCount)
+  return `${generateDefaultDynamicPackageName({ ...opt, order })}/[chunkhash]${opt.ext}`
 }
 
 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 isDefaultDynamicPackageAsset = (opt: AsyncPackOpts, assetName: string) => {
+  const dynamicModuleRegExp = new RegExp(`^${opt.dynamicPackageNamePrefix}(?:-[a-z]{2})?/`)
+  return dynamicModuleRegExp.test(assetName)
 }
 
-export const isDynamicPackageJsAsset = (prefix: string, assetName: string) => {
-  const dynamicJsAssetRegExp = new RegExp(`^${prefix}(?:-[a-z]{2})?\\/.*\\.js$`)
-  return dynamicJsAssetRegExp.test(assetName)
+export const isCustomDynamicPackageAsset = (opt: AsyncPackOpts, assetName: string) => {
+  const customDynamicPackageNames = opt.customDynamicPackages.map(item => generateCustomDynamicPackageName(opt, item.name))
+  if (!customDynamicPackageNames.length) return false
+  return new RegExp(`^(${customDynamicPackageNames.join('|')})/`).test(assetName)
 }
 
-export const isDynamicPackageWXssAsset = (prefix: string, assetName: string) => {
-  const dynamicWXssAssetRegExp = new RegExp(`^${prefix}(?:-[a-z]{2})?\\/.*\\.wxss$`)
-  return dynamicWXssAssetRegExp.test(assetName)
+export const isDynamicPackageAsset = (opt: AsyncPackOpts, assetName: string) => {
+  return isDefaultDynamicPackageAsset(opt, assetName) || isCustomDynamicPackageAsset(opt, assetName)
 }
 
-export const generateDynamicPackageName = (opt: AsyncPackOpts & { order?: number }) => {
-  if (!isNumber(opt.order) || opt.dynamicPackageCount <= 1) return opt.dynamicPackageNamePrefix
-  return `${opt.dynamicPackageNamePrefix}-${generateKeyByOrder(opt.order!)}`
+export const isAsyncStyleDynamicPackageAsset = (opt: AsyncPackOpts, assetName: string) => {
+  const asyncStylDynamicPackageNames = opt.customDynamicPackages.filter(item => item.asyncStyle).map(item => `${opt.dynamicPackageNamePrefix}-${item.name}`)
+  if (!asyncStylDynamicPackageNames.length) return false
+  return new RegExp(`^(${asyncStylDynamicPackageNames.join('|')})/`).test(assetName)
+}
+
+export const isSyncStyleDynamicPackageAsset = (opt: AsyncPackOpts, assetName: string) => {
+  return isDynamicPackageAsset(opt, assetName) && !isAsyncStyleDynamicPackageAsset(opt, assetName)
+}
+
+export const matchSuffix = (suffix: string, assetName: string) => {
+  return new RegExp(`\\.${suffix}$`).test(assetName)
 }