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

package/src/transform-react-lazy.ts

@@ -0,0 +1,132 @@
+import { PluginObj, NodePath, PluginPass } from '@babel/core'
+import * as types from '@babel/types'
+import { CallExpression, ImportDeclaration, Program, VariableDeclarator } from '@babel/types'
+
+const customLazySource = '@taro-minify-pack/react-lazy-enhanced'
+
+interface State extends PluginPass {
+  reactNamespaces: Set<string>;
+  reactLazyBindings: Set<string>;
+}
+
+export default (): PluginObj<State> => {
+  return {
+    visitor: {
+      Program: {
+        enter (programPath: NodePath<Program>, state: State) {
+          const { filename = '' } = state
+
+          if (new RegExp(customLazySource).test(filename)) return
+
+          state.reactNamespaces = new Set()
+
+          state.reactLazyBindings = new Set()
+
+          programPath.traverse({
+            ImportDeclaration (path: NodePath<ImportDeclaration>) {
+              if (!types.isStringLiteral(path.node.source, { value: 'react' })) return
+
+              const { specifiers } = path.node
+
+              specifiers.forEach((spec) => {
+                const { name } = spec.local
+
+                //  import React from 'react'
+                if (types.isImportDefaultSpecifier(spec)) return state.reactNamespaces.add(name)
+
+                //  import * as React from 'react'
+                if (types.isImportNamespaceSpecifier(spec)) return state.reactNamespaces.add(name)
+
+                // import  { lazy } from 'react'
+                if (types.isImportSpecifier(spec) && types.isIdentifier(spec.imported, { name: 'lazy' })) {
+                  state.reactLazyBindings.add(name)
+                }
+              })
+            }
+          })
+
+          programPath.traverse({
+            VariableDeclarator (path: NodePath<VariableDeclarator>) {
+              const { id, init } = path.node
+
+              // const a = React.lazy
+              if (types.isIdentifier(id)) {
+                if (!types.isMemberExpression(init)) return
+
+                if (!types.isIdentifier(init.object)) return
+
+                if (!types.isIdentifier(init.property, { name: 'lazy' })) return
+
+                if (!state.reactNamespaces.has(init.object.name)) return
+
+                state.reactLazyBindings.add(id.name)
+              }
+
+              // const { lazy: a } = React;
+              if (types.isObjectPattern(id) && types.isIdentifier(init)) {
+                const { properties } = id
+
+                if (!state.reactNamespaces.has(init.name)) return
+
+                properties.forEach((prop) => {
+                  if (!types.isObjectProperty(prop)) return
+
+                  if (!types.isIdentifier(prop.key, { name: 'lazy' })) return
+
+                  if (!types.isIdentifier(prop.value)) return
+
+                  state.reactLazyBindings.add(prop.value.name)
+                })
+              }
+            }
+          })
+        },
+
+        exit (programPath: NodePath<Program>, state: State) {
+          const { filename = '' } = state
+
+          if (new RegExp(customLazySource).test(filename)) return
+
+          let needInject = false
+
+          const customLazyId = programPath.scope.generateUidIdentifier('customLazy')
+
+          programPath.traverse({
+            CallExpression (path: NodePath<CallExpression>) {
+              const { callee } = path.node
+
+              if (types.isMemberExpression(callee)) {
+                if (!types.isIdentifier(callee.object)) return
+
+                if (!state.reactNamespaces.has(callee.object.name)) return
+
+                if (!types.isIdentifier(callee.property, { name: 'lazy' })) return
+
+                path.node.callee = customLazyId
+
+                needInject = true
+              }
+
+              if (types.isIdentifier(callee) && state.reactLazyBindings.has(callee.name)) {
+                path.node.callee = customLazyId
+                needInject = true
+              }
+            }
+          })
+
+          const hasImport = programPath.node.body.some((node) => {
+            return types.isImportDeclaration(node) && node.source.value === customLazySource
+          })
+
+          if (hasImport || !needInject) return
+
+          const specifier = types.importSpecifier(customLazyId, types.identifier('lazy'))
+
+          const nodes = types.importDeclaration([specifier], types.stringLiteral(customLazySource))
+
+          programPath.unshiftContainer('body', nodes)
+        }
+      }
+    }
+  }
+}

package/src/transform-webpack-runtime.ts

@@ -1,10 +1,11 @@
 import { NodePath, template } from '@babel/core'
 import generator from '@babel/generator'
 import * as parser from '@babel/parser'
-import traverse, { Node } from '@babel/traverse'
+import traverse from '@babel/traverse'
 import * as types from '@babel/types'
-import type { AssignmentExpression, VariableDeclarator } from '@babel/types'
+import type { AssignmentExpression, Statement, VariableDeclarator } from '@babel/types'
 import type { CompilationAssets, AsyncPackOpts } from './types'
+import { isDynamicPackageJsAsset, isDynamicPackageWXssAsset } from './utils'
 
 interface Opts extends AsyncPackOpts {
   assets: CompilationAssets;
@@ -35,15 +36,14 @@ const webpackLoadDynamicModuleTemplate = `
       inProgress[dynamicModulePath].push(done);
       return;
     }
-
+    
     const target = { src: dynamicModulePath };
 
     if (loadedDynamicModules[dynamicModulePath]) return done({ type: 'loaded', target });
 
     promiseRetry(function () {
       return loadDynamicModule(dynamicModulePath)
-    })
-    .then(function () {
+    }).then(function () {
       return done({ type: 'loaded', target })
     }).catch(function () {
       return done({ type:'error', target })
@@ -68,45 +68,103 @@ const replaceWebpackLoadScriptFn = (assignmentExpressionNodePath: NodePath<Assig
 
   if (isProcessed) return
 
-  const { assets, dynamicModuleJsDir } = opts
+  const { assets, dynamicPackageNamePrefix } = opts
 
-  const dynamicAssets = Object.keys(assets).filter((assetName) => {
-    return new RegExp(`^${dynamicModuleJsDir}/.`).test(assetName)
+  const dynamicJsAssets = Object.keys(assets).filter((assetName) => {
+    return isDynamicPackageJsAsset(dynamicPackageNamePrefix, 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 templateCodeAst = template.ast(webpackLoadDynamicModuleTemplate) as Statement
 
   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 = `
-loadStylesheet = function () {
-  return Promise.resolve()
+  __webpack_require__.f.miniCss = function (dynamicStylesheetChunkId, promises) {
+    promises.push(loadStylesheet(dynamicStylesheetChunkId))
+  }
+`
+
+const replaceWebpackLoadDynamicModuleStylesheetFn = (
+  assignmentExpressionNodePath: NodePath<AssignmentExpression>
+) => {
+  const { left, right } = assignmentExpressionNodePath.node || {}
+
+  if (!types.isMemberExpression(left)) return
+
+  if (!types.isFunctionExpression(right)) return
+
+  if (!types.isMemberExpression(left.object)) return
+
+  if (!types.isIdentifier(left.object.object, { name: '__webpack_require__' })) return
+
+  if (!types.isIdentifier(left.object.property, { name: 'f' })) return
+
+  if (!types.isIdentifier(left.property, { name: 'miniCss' })) return
+
+  const isProcessed = right.params.some((item) => {
+    return types.isIdentifier(item, { name: 'dynamicStylesheetChunkId' })
+  })
+
+  if (isProcessed) return
+
+  const templateCodeAst = template.expression(webpackLoadDynamicModuleStylesheetTemplate)()
+
+  assignmentExpressionNodePath.replaceWith(templateCodeAst)
+}
+
+const webpackLoadStylesheetTemplate = `
+loadStylesheet = function (chunkId) {
+  const href = __webpack_require__.miniCssF(chunkId);
+  const fullHref = __webpack_require__.p + href;
+  const dynamicPackageNameRegex = DYNAMIC_PACKAGE_NAME_REGEX;
+  const [,dynamicPackageName] = fullHref.match(dynamicPackageNameRegex) || [];
+  const { SingletonPromise } = require('~/singleton-promise.js');
+  return SingletonPromise.wait(dynamicPackageName)
 }
 `
 
-const replaceLoadStylesheetFn = (nodePath: NodePath<VariableDeclarator>) => {
+const replaceLoadStylesheetFn = (nodePath: NodePath<VariableDeclarator>, opts: Opts) => {
   const { id, init } = nodePath.node || {}
   if (!types.isIdentifier(id, { name: 'loadStylesheet' })) return
   if (!types.isFunctionExpression(init)) return
   const isProcessed = !init.params.length
   if (isProcessed) return
-  const templateCodeAst = template.expression(webpackLoadDynamicModuleStylesheetTemplate)()
+  const { dynamicPackageNamePrefix } = opts
+  const DYNAMIC_PACKAGE_NAME_REGEX = types.regExpLiteral(`(${dynamicPackageNamePrefix}(?:-[a-z]{2})?)\\/`)
+  const templateCodeAst = template.expression(webpackLoadStylesheetTemplate)({ DYNAMIC_PACKAGE_NAME_REGEX })
   nodePath.replaceWith(templateCodeAst)
 }
 
@@ -129,7 +187,7 @@ export const transformWebpackRuntime = (code: string, opts: Opts) => {
       replaceWebpackLoadScriptFn(nodePath, opts)
     },
     VariableDeclarator (nodePath: NodePath<VariableDeclarator>) {
-      replaceLoadStylesheetFn(nodePath)
+      replaceLoadStylesheetFn(nodePath, opts)
       removeCreateStylesheetFn(nodePath)
       removeFindStylesheetFn(nodePath)
     }

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';`)
-}