@umijs/preset-umi 4.0.0-beta.12 → 4.0.0-beta.16

package/dist/commands/build.js

@@ -110,7 +110,7 @@ umi build --clean
                 const { vite } = api.args;
                 const markupArgs = yield (0, getMarkupArgs_1.getMarkupArgs)({ api });
                 // @ts-ignore
-                const markup = yield (0, server_1.getMarkup)(Object.assign(Object.assign({}, markupArgs), { scripts: ['/umi.js'].concat(markupArgs.scripts), esmScript: !!opts.config.esm || vite, path: '/' }));
+                const markup = yield (0, server_1.getMarkup)(Object.assign(Object.assign({}, markupArgs), { styles: ['/umi.css'].concat(markupArgs.styles), scripts: ['/umi.js'].concat(markupArgs.scripts), esmScript: !!opts.config.esm || vite, path: '/' }));
                 (0, fs_1.writeFileSync)((0, path_1.join)(api.paths.absOutputPath, 'index.html'), markup, 'utf-8');
                 utils_1.logger.event('build index.html');
                 // print size

package/dist/commands/dev/createRouteMiddleware.js

@@ -24,11 +24,15 @@ window.__vite_plugin_react_preamble_installed__ = true
 function createRouteMiddleware(opts) {
     return (req, res, next) => __awaiter(this, void 0, void 0, function* () {
         const { vite } = opts.api.args;
+        const viteScripts = [
+            // add noshim attr for skip importmap shim logic for this modules
+            { content: viteRefreshScript, noshim: '' },
+            { src: '/@vite/client', noshim: '' },
+            opts.api.appData.hasSrcDir ? '/src/.umi/umi.ts' : '/.umi/umi.ts',
+        ];
         const markupArgs = yield (0, getMarkupArgs_1.getMarkupArgs)(opts);
         // @ts-ignore
-        const requestHandler = yield (0, server_1.createRequestHandler)(Object.assign(Object.assign({}, markupArgs), { scripts: (vite
-                ? [viteRefreshScript, '/@vite/client', '/.umi/umi.ts']
-                : ['/umi.js']).concat(markupArgs.scripts), esmScript: vite }));
+        const requestHandler = yield (0, server_1.createRequestHandler)(Object.assign(Object.assign({}, markupArgs), { styles: ['/umi.css'].concat(markupArgs.styles), scripts: (vite ? viteScripts : ['/umi.js']).concat(markupArgs.scripts), esmScript: vite }));
         requestHandler(req, res, next);
     });
 }

package/dist/commands/dev/dev.js

@@ -238,7 +238,12 @@ PORT=8888 umi dev
                             key: 'onDevCompileDone',
                             args: opts,
                         });
-                    }, mfsuWithESBuild: (_a = api.config.mfsu) === null || _a === void 0 ? void 0 : _a.esbuild });
+                    }, mfsuWithESBuild: (_a = api.config.mfsu) === null || _a === void 0 ? void 0 : _a.esbuild, cache: {
+                        buildDependencies: [
+                            api.pkgPath,
+                            api.service.configManager.mainConfigFile || '',
+                        ].filter(Boolean),
+                    } });
                 if (enableVite) {
                     yield bundlerVite.dev(opts);
                 }

package/dist/commands/dev/getMarkupArgs.d.ts

@@ -2,6 +2,8 @@ import { IApi } from '../../types';
 export declare function getMarkupArgs(opts: {
     api: IApi;
 }): Promise<{
+    mountElementId: any;
+    base: any;
     routes: any;
     favicon: any;
     headScripts: any;

package/dist/commands/dev/getMarkupArgs.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getMarkupArgs = void 0;
 const cheerio_1 = __importDefault(require("@umijs/utils/compiled/cheerio"));
 function getMarkupArgs(opts) {
+    var _a;
     return __awaiter(this, void 0, void 0, function* () {
         const headScripts = yield opts.api.applyPlugins({
             key: 'addHTMLHeadScripts',
@@ -41,6 +42,8 @@ function getMarkupArgs(opts) {
             initialValue: opts.api.config.favicon,
         });
         return {
+            mountElementId: opts.api.config.mountElementId,
+            base: ((_a = opts.api.config.history) === null || _a === void 0 ? void 0 : _a.type) === 'browser' ? opts.api.config.base : '/',
             routes: opts.api.appData.routes,
             favicon,
             headScripts,

package/dist/features/appData/appData.js

@@ -9,8 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const bundler_utils_1 = require("@umijs/bundler-utils");
 const utils_1 = require("@umijs/utils");
+const fs_1 = require("fs");
 const path_1 = require("path");
+const watch_1 = require("../../commands/dev/watch");
 const routes_1 = require("../tmpFiles/routes");
 exports.default = (api) => {
     api.modifyAppData((memo) => __awaiter(void 0, void 0, void 0, function* () {
@@ -25,6 +28,36 @@ exports.default = (api) => {
         memo.react = {
             version: require((0, path_1.join)(api.config.alias.react, 'package.json')).version,
         };
+        memo.appJS = yield getAppJsInfo();
         return memo;
     }));
+    // Execute earliest, so that other onGenerateFiles can get it
+    api.register({
+        key: 'onGenerateFiles',
+        fn(args) {
+            return __awaiter(this, void 0, void 0, function* () {
+                if (!args.isFirstTime) {
+                    api.appData.appJS = yield getAppJsInfo();
+                }
+            });
+        },
+        stage: Number.NEGATIVE_INFINITY,
+    });
+    function getAppJsInfo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            for (const path of (0, watch_1.expandJSPaths)((0, path_1.join)(api.paths.absSrcPath, 'app'))) {
+                if ((0, fs_1.existsSync)(path)) {
+                    const [_, exports] = yield (0, bundler_utils_1.parseModule)({
+                        path,
+                        content: (0, fs_1.readFileSync)(path, 'utf-8'),
+                    });
+                    return {
+                        path,
+                        exports,
+                    };
+                }
+            }
+            return null;
+        });
+    }
 };

package/dist/features/check/check.js

@@ -31,4 +31,15 @@ exports.default = (api) => {
             },
         });
     }));
+    api.onCheckCode((args) => {
+        // Fixed version import is not allowed
+        // e.g. import { X } from '_@ant-design_icons@4.7.0@ant-design/icons'
+        if (['cnpm', 'tnpm'].includes(api.appData.npmClient)) {
+            args.imports.forEach(({ source }) => {
+                if (/@\d/.test(source)) {
+                    throw new Error(`${source} is not allowed to import.`);
+                }
+            });
+        }
+    });
 };

package/dist/features/configPlugins/configPlugins.js

@@ -16,8 +16,7 @@ function resolveProjectDep(opts) {
 exports.default = (api) => {
     const configDefaults = {
         alias: {
-            umi: process.env.UMI_DIR,
-            '@umijs/renderer-react': (0, path_1.dirname)(require.resolve('@umijs/renderer-react/package.json')),
+            umi: '@@/exports',
             react: resolveProjectDep({
                 pkg: api.pkg,
                 cwd: api.cwd,
@@ -34,6 +33,9 @@ exports.default = (api) => {
         externals: {},
         autoCSSModules: true,
         publicPath: '/',
+        mountElementId: 'root',
+        base: '/',
+        history: { type: 'browser' },
     };
     const bundleSchemas = (0, schema_1.getSchemas)();
     const extraSchemas = (0, schema_2.getSchemas)();
@@ -55,7 +57,9 @@ exports.default = (api) => {
     }
     // api.paths is ready after register
     api.modifyConfig((memo, args) => {
-        memo.alias = Object.assign(Object.assign({}, memo.alias), { '@': args.paths.absSrcPath, '@@': args.paths.absTmpPath });
+        memo.alias = Object.assign(Object.assign({}, memo.alias), { '@': args.paths.absSrcPath, '@@': args.paths.absTmpPath, 
+            // like vite, use to pre-bundling dependencies in vite mode
+            '@fs': '/' });
         return memo;
     });
 };

package/dist/features/configPlugins/schema.js

@@ -4,13 +4,21 @@ exports.getSchemas = void 0;
 const utils_1 = require("@umijs/utils");
 function getSchemas() {
     return {
-        plugins: (Joi) => Joi.array().items(Joi.string()),
-        publicPath: (Joi) => Joi.string().regex(/\/$/).error(new Error('publicPath must end with /')),
+        base: (Joi) => Joi.string(),
         favicon: (Joi) => Joi.string(),
-        headScripts: (Joi) => Joi.array().items(Joi.alternatives(Joi.string())),
-        scripts: (Joi) => Joi.array().items(Joi.alternatives(Joi.string())),
+        headScripts: (Joi) => Joi.array(),
+        history: (Joi) => Joi.object({
+            type: Joi.string().valid('browser', 'hash', 'memory'),
+        }),
+        links: (Joi) => Joi.array(),
+        metas: (Joi) => Joi.array(),
+        mountElementId: (Joi) => Joi.string(),
         npmClient: (Joi) => Joi.string().valid(utils_1.NpmClientEnum.pnpm, utils_1.NpmClientEnum.tnpm, utils_1.NpmClientEnum.cnpm, utils_1.NpmClientEnum.yarn, utils_1.NpmClientEnum.npm),
+        plugins: (Joi) => Joi.array().items(Joi.string()),
+        publicPath: (Joi) => Joi.string().regex(/\/$/).error(new Error('publicPath must end with /')),
         routes: (Joi) => Joi.array().items(Joi.object()),
+        scripts: (Joi) => Joi.array(),
+        styles: (Joi) => Joi.array(),
     };
 }
 exports.getSchemas = getSchemas;

package/dist/features/esmi/Service.d.ts

@@ -38,9 +38,28 @@ export interface IPkgData {
  */
 export default class ESMIService {
     cdnOrigin: string;
+    cacheDir: string;
+    cache: Record<string, IImportmapData>;
     constructor(opts: {
         cdnOrigin: string;
+        cacheDir: string;
     });
+    /**
+     * get cache file path by cache key
+     * @param data  pkg data
+     */
+    static getCacheKey(data: IPkgData): string;
+    /**
+     * get importmap cache by cache key
+     * @param key cache key
+     */
+    getCache(key: string): IImportmapData;
+    /**
+     * set importmap cache
+     * @param key   cache key
+     * @param data  importmap data
+     */
+    setCache(key: string, data: IImportmapData): void;
     /**
      * build importmap from deps tree
      * @param data  package data

package/dist/features/esmi/Service.js

@@ -8,15 +8,64 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("@umijs/utils");
+const crypto_1 = require("crypto");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
 /**
  * class for connect esmi server
  */
 class ESMIService {
     constructor(opts) {
         this.cdnOrigin = '';
+        this.cacheDir = '';
+        this.cache = {};
         this.cdnOrigin = opts.cdnOrigin;
+        this.cacheDir = opts.cacheDir;
+        // restore local cache
+        const cacheFilePath = path_1.default.join(this.cacheDir, 'importmap.json');
+        if (fs_1.default.existsSync(cacheFilePath)) {
+            try {
+                this.cache = require(cacheFilePath);
+            }
+            catch (_a) {
+                /* nothing */
+            }
+        }
+    }
+    /**
+     * get cache file path by cache key
+     * @param data  pkg data
+     */
+    static getCacheKey(data) {
+        const hash = (0, crypto_1.createHash)('md4');
+        hash.update(JSON.stringify(data.pkgInfo.exports));
+        return hash.digest('hex');
+    }
+    /**
+     * get importmap cache by cache key
+     * @param key cache key
+     */
+    getCache(key) {
+        return this.cache[key];
+    }
+    /**
+     * set importmap cache
+     * @param key   cache key
+     * @param data  importmap data
+     */
+    setCache(key, data) {
+        this.cache[key] = data;
+        // create cache dir
+        if (!fs_1.default.existsSync(this.cacheDir)) {
+            fs_1.default.mkdirSync(this.cacheDir, { recursive: true });
+        }
+        // write cache to file system
+        fs_1.default.writeFileSync(path_1.default.join(this.cacheDir, 'importmap.json'), JSON.stringify(this.cache, null, 2));
     }
     /**
      * build importmap from deps tree
@@ -37,16 +86,36 @@ class ESMIService {
      */
     getImportmap(data) {
         return __awaiter(this, void 0, void 0, function* () {
+            const cacheKey = ESMIService.getCacheKey(data);
+            const cache = this.getCache(cacheKey);
+            const stamp = +new Date();
+            // use valid cache first
+            if (cache) {
+                utils_1.logger.info('ESMi cache used');
+                return cache;
+            }
+            // log dependency list
+            utils_1.logger.info(utils_1.chalk.greenBright('Pre-compiling dependencies on esmi:'));
+            data.pkgInfo.exports[0].deps.forEach((dep) => {
+                console.log(utils_1.chalk.yellow(`  ${dep.name}`));
+            });
             // get the build ticket id
             const ticketId = yield this.build(data);
-            // continue to the next request after 1s
+            utils_1.logger.info(`ticketId: ${ticketId}`);
+            // continue to the next request after 2s
             const next = () => new Promise((resolve) => setTimeout(() => resolve(deferrer()), 2000));
             const deferrer = () => {
                 return utils_1.axios
                     .get(`${this.cdnOrigin}/api/v1/esm/importmap/${ticketId}`)
-                    .then((res) => (res.data.success ? res.data.data : next()), next);
+                    .then((res) => {
+                    if (res.data.success) {
+                        this.setCache(cacheKey, res.data.data);
+                        utils_1.logger.info(`Done, took ${((+new Date() - stamp) / 1000).toFixed(1)}s`);
+                        return res.data.data;
+                    }
+                    return next();
+                }, next);
             };
-            // TODO: timeout + time spend log
             return deferrer();
         });
     }

package/dist/features/esmi/esbuildPlugins/requireToImport.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from '@umijs/bundler-utils/compiled/esbuild';
+import type { DepOptimizationOptions } from 'vite';
+/**
+ * transform require call to import
+ */
+export default function requireToImportPlugin({ exclude, }: {
+    exclude: NonNullable<DepOptimizationOptions['exclude']>;
+}): Plugin;

package/dist/features/esmi/esbuildPlugins/requireToImport.js

@@ -0,0 +1,61 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = require("@umijs/utils/compiled/lodash");
+/**
+ * transform require call to import
+ */
+function requireToImportPlugin({ exclude, }) {
+    const regSafeExclude = exclude.map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+    const requireRegExp = new RegExp(`^(${regSafeExclude.join('|')})$`);
+    return {
+        name: 'preset-umi:esmi-require-to-import',
+        setup(build) {
+            // handler require calls for external deps
+            build.onResolve({
+                filter: requireRegExp,
+            }, (args) => __awaiter(this, void 0, void 0, function* () {
+                if (args.kind === 'require-call') {
+                    return {
+                        path: args.path,
+                        namespace: 'esmi-require-to-import',
+                        pluginData: {
+                            resolveDir: args.resolveDir,
+                        },
+                    };
+                }
+            }));
+            // replace load content
+            build.onLoad({
+                filter: /.*/,
+                namespace: 'esmi-require-to-import',
+            }, (args) => {
+                const { resolveDir } = args.pluginData || {};
+                const packageName = args.path;
+                const starSpecifier = `${(0, lodash_1.camelCase)(packageName)}Star`;
+                const defaultSpecifier = `${(0, lodash_1.camelCase)(packageName)}Default`;
+                return {
+                    resolveDir,
+                    contents: [
+                        `import * as ${starSpecifier} from '${packageName}';`,
+                        '',
+                        `const ${defaultSpecifier} = ${starSpecifier}.default ? ${starSpecifier}.default : ${starSpecifier};`,
+                        '',
+                        `export default ${defaultSpecifier};`,
+                        `export * from '${packageName}';`,
+                        '',
+                    ].join('\n'),
+                };
+            });
+        },
+    };
+}
+exports.default = requireToImportPlugin;

package/dist/features/esmi/esbuildPlugins/topLevelExternal.d.ts

@@ -0,0 +1,13 @@
+import { Plugin } from '@umijs/bundler-utils/compiled/esbuild';
+import type { DepOptimizationOptions } from 'vite';
+import type { createResolver } from '../../../libs/scan';
+/**
+ * only external top level import, exclude sub-path imports for esmi
+ * example:
+ *   - import from 'antd' will be externalized
+ *   - import from 'antd/dist/antd.less' will not be externalized
+ */
+export default function topLevelExternal({ exclude, resolver, }: {
+    exclude: NonNullable<DepOptimizationOptions['exclude']>;
+    resolver: ReturnType<typeof createResolver>;
+}): Plugin;

package/dist/features/esmi/esbuildPlugins/topLevelExternal.js

@@ -0,0 +1,37 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * only external top level import, exclude sub-path imports for esmi
+ * example:
+ *   - import from 'antd' will be externalized
+ *   - import from 'antd/dist/antd.less' will not be externalized
+ */
+function topLevelExternal({ exclude, resolver, }) {
+    const regSafeExclude = exclude.map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+    const subImportRegExp = new RegExp(`^(${regSafeExclude.join('|')})/`);
+    const extRegExp = /\.((?<!d)\.ts|jsx?|tsx)$/;
+    return {
+        name: 'preset-umi:esmi-top-level-external',
+        setup(build) {
+            build.onResolve({
+                filter: subImportRegExp,
+            }, (args) => __awaiter(this, void 0, void 0, function* () {
+                const resolved = yield resolver.resolve(args.resolveDir, args.path);
+                // only process javascript-like files
+                if (extRegExp.test(resolved)) {
+                    return { path: resolved };
+                }
+            }));
+        },
+    };
+}
+exports.default = topLevelExternal;

package/dist/features/esmi/esmi.js

@@ -16,8 +16,11 @@ const es_module_lexer_1 = require("@umijs/bundler-utils/compiled/es-module-lexer
 const magic_string_1 = __importDefault(require("magic-string"));
 const path_1 = require("path");
 const scan_1 = require("../../libs/scan");
+const requireToImport_1 = __importDefault(require("./esbuildPlugins/requireToImport"));
+const topLevelExternal_1 = __importDefault(require("./esbuildPlugins/topLevelExternal"));
 const Service_1 = __importDefault(require("./Service"));
 let importmap = { imports: {}, scopes: {} };
+let importmatches = {};
 /**
  * esmi vite plugin
  */
@@ -25,13 +28,36 @@ function esmi(opts) {
     return {
         name: 'preset-umi:esmi',
         configResolved(config) {
+            var _a, _b;
+            var _c, _d;
             const { include, exclude } = config.optimizeDeps;
+            (_a = (_c = config.optimizeDeps).include) !== null && _a !== void 0 ? _a : (_c.include = []);
             // do not pre-compile deps which will be loaded by importmap (for top-level deps)
             if (include === null || include === void 0 ? void 0 : include.length) {
-                config.optimizeDeps.include = include.filter((item) => !importmap.imports[item]);
+                config.optimizeDeps.include = include.filter((item) => !importmatches[item] && !importmap.imports[item]);
             }
-            // exclude pre-compile deps which within importmap by default (for nested deps)
-            config.optimizeDeps.exclude = (exclude || []).concat(Object.keys(importmap.imports).filter((item) => exclude === null || exclude === void 0 ? void 0 : exclude.includes(item)));
+            // exclude pre-compile deps
+            config.optimizeDeps.exclude = [
+                ...new Set([
+                    // deps from user config
+                    ...(exclude || []),
+                    // deps from local scan
+                    ...Object.keys(importmatches),
+                    // deps from esmi analyze result
+                    ...Object.keys(importmap.imports),
+                ]),
+            ];
+            // apply esbuild plugins
+            (_b = (_d = config.optimizeDeps).esbuildOptions) !== null && _b !== void 0 ? _b : (_d.esbuildOptions = {});
+            config.optimizeDeps.esbuildOptions.plugins = [
+                // transform require call to import
+                (0, requireToImport_1.default)({ exclude: config.optimizeDeps.exclude }),
+                // make sure vite only external top-level npm imports, and resolve sub-path npm imports
+                (0, topLevelExternal_1.default)({
+                    exclude: config.optimizeDeps.exclude,
+                    resolver: opts.resolver,
+                }),
+            ].concat(config.optimizeDeps.esbuildOptions.plugins || []);
         },
         transform(source) {
             try {
@@ -42,9 +68,17 @@ function esmi(opts) {
                 imports.forEach((item) => {
                     const { n: specifier, s: start, e: end } = item;
                     // replace npm package to CDN url for matched imports
-                    if (specifier && importmap.imports[specifier]) {
-                        s !== null && s !== void 0 ? s : (s = new magic_string_1.default(source));
-                        s.overwrite(start, end, importmap.imports[specifier]);
+                    if (specifier) {
+                        const replacement = 
+                        // search from local scan matches first (for alias)
+                        (importmatches[specifier] &&
+                            importmap.imports[importmatches[specifier]]) ||
+                            // search from esmi analyze result
+                            importmap.imports[specifier];
+                        if (replacement) {
+                            s !== null && s !== void 0 ? s : (s = new magic_string_1.default(source));
+                            s.overwrite(start, end, replacement);
+                        }
                     }
                 });
                 return (s === null || s === void 0 ? void 0 : s.toString()) || source;
@@ -78,7 +112,11 @@ function generatePkgData(api) {
                     name: 'default',
                     path: 'es/index.js',
                     from: '',
-                    deps: Object.entries(api.appData.deps).map(([name, version]) => ({
+                    deps: Object.entries(api.appData.deps)
+                        // only compile entry imports
+                        .filter(([_, { matches }]) => matches.length)
+                        // convert to esmi config
+                        .map(([name, { version }]) => ({
                         name,
                         version,
                         usedMap: {
@@ -109,13 +147,30 @@ exports.default = (api) => {
             });
             // skip umi by default
             delete api.appData.deps['umi'];
+            // FIXME: force include react & react-dom
+            api.appData.deps['react'].version = api.appData.react.version;
+            api.appData.deps['react-dom'] = {
+                version: api.appData.react.version,
+                matches: ['react-dom'],
+                subpaths: [],
+            };
             const data = generatePkgData(api);
             const deps = data.pkgInfo.exports.reduce((r, exp) => r.concat(exp.deps.map((dep) => dep.name)), []);
             const hasNewDep = deps.some((i) => !importmap.imports[i]);
             // update importmap from esm if there has new import
             if (hasNewDep) {
-                // TODO: add local cache and restore
                 importmap = (_a = (yield service.getImportmap(data))) === null || _a === void 0 ? void 0 : _a.importMap;
+                // update matches map to dep name
+                importmatches = Object.keys(api.appData.deps).reduce((r, dep) => {
+                    // filter subpath imports
+                    if (!api.appData.deps[dep].subpaths.length) {
+                        // map all matches to dep name
+                        api.appData.deps[dep].matches.forEach((m) => {
+                            r[m] = dep;
+                        });
+                    }
+                    return r;
+                }, {});
                 // because we will replaced package name to CDN url in vite plugin
                 // so we must append scope rules for the CDN url like the import specifier
                 // example:
@@ -136,7 +191,10 @@ exports.default = (api) => {
         key: 'esmi',
         config: {
             schema(Joi) {
-                return Joi.object();
+                return Joi.object({
+                    cdnOrigin: Joi.string(),
+                    shimUrl: Joi.string(),
+                });
             },
         },
         enableBy: api.EnableBy.config,
@@ -151,7 +209,10 @@ exports.default = (api) => {
     api.onBeforeCompiler(() => __awaiter(void 0, void 0, void 0, function* () {
         if (api.args.vite) {
             // init esmi service
-            service = new Service_1.default({ cdnOrigin: api.config.esmi.cdnOrigin });
+            service = new Service_1.default({
+                cdnOrigin: api.config.esmi.cdnOrigin,
+                cacheDir: (0, path_1.join)(api.cwd, '.esmi'),
+            });
             // init project resolver
             resolver = (0, scan_1.createResolver)({
                 alias: api.config.alias,
@@ -162,10 +223,17 @@ exports.default = (api) => {
     }));
     // append ipmortmap script for HTML
     api.modifyHTML(($) => {
-        const scp = $('<script type="importmap"></script>');
+        const scp = $('<script type="importmap"></script>\n');
         scp.html(JSON.stringify(importmap, null, 2));
         $('head > script:eq(0)').before(scp);
-        // TODO: polyfill for legacy browser
+        // append importmap shim script
+        if (api.config.esmi.shimUrl) {
+            $('body > script:eq(0)').before($(`<script src="${api.config.esmi.shimUrl}"></script>\n`));
+        }
+        // preload for importmap modules
+        Object.values(importmap.imports).forEach((url) => {
+            scp.before($(`<link rel="modulepreload" href="${url}" />\n`));
+        });
         return $;
     });
     if (api.args.vite) {
@@ -178,6 +246,7 @@ exports.default = (api) => {
                     yield refreshImportMap();
                     // TODO: refresh page when importmap changed
                 }),
+                resolver,
             }));
             return memo;
         });

package/dist/features/favicon/favicon.js

@@ -53,6 +53,8 @@ exports.default = (api) => {
         }
     });
     api.modifyHTMLFavicon((memo) => {
-        return `${api.config.publicPath}${api.appData.faviconFile}` || memo;
+        return api.appData.faviconFile
+            ? `${api.config.publicPath}${api.appData.faviconFile}`
+            : memo;
     });
 };

package/dist/features/lowImport/babelPlugin.d.ts

@@ -3,11 +3,13 @@ import * as t from '@umijs/bundler-utils/compiled/babel/types';
 import { IOpts } from './lowImport';
 interface IPluginOpts {
     opts: IOpts;
+    css: string;
 }
 export default function (): {
     visitor: {
         Identifier(path: Babel.NodePath<t.Identifier>, state: {
             opts: IPluginOpts;
+            file: any;
         }): void;
         MemberExpression(path: Babel.NodePath<t.MemberExpression>, state: {
             opts: IPluginOpts;