perf(build): 异步检索loader路径优化性能 (#234)

packages/config-img-loader/src/index.ts

@@ -2,7 +2,7 @@ import {RuleSetUseItem} from 'webpack';
 import gif from 'imagemin-gifsicle';
 import jpeg from 'imagemin-mozjpeg';
 import png from 'imagemin-optipng';
-import {resolveSync} from '@reskript/core';
+import {resolve} from '@reskript/core';
 
 const pluginOptions = {
     gifsicle: {
@@ -18,15 +18,15 @@ const pluginOptions = {
     },
 };
 
-export default (): RuleSetUseItem => {
+export default async (): Promise<RuleSetUseItem> => {
     const plugins = [
         gif(pluginOptions.gifsicle),
         jpeg(pluginOptions.mozjpeg),
         png(pluginOptions.optipng),
     ];
 
     return {
-        loader: resolveSync('img-loader'),
+        loader: await resolve('img-loader'),
         options: {plugins},
     };
 };

packages/config-webpack/src/loaders/babel.ts

@@ -1,4 +1,4 @@
-import {resolveSync} from '@reskript/core';
+import {resolve} from '@reskript/core';
 import {getBabelConfig, BabelConfigOptions} from '@reskript/config-babel';
 import {BuildEntry, warnAndExitOnInvalidFinalizeReturn} from '@reskript/settings';
 import {LoaderFactory} from '../interface.js';
@@ -24,7 +24,7 @@ const factory: LoaderFactory = async (entry: BuildEntry) => {
     warnAndExitOnInvalidFinalizeReturn(finalizedBabelConfig, 'build.script');
 
     return {
-        loader: resolveSync('babel-loader'),
+        loader: await resolve('babel-loader'),
         // webpack的缓存够强了，所有其它的缓存都可以不开
         options: {
             ...finalizedBabelConfig,

packages/config-webpack/src/loaders/classNames.ts

@@ -1,12 +1,15 @@
-import {resolveSync} from '@reskript/core';
+import {resolve} from '@reskript/core';
 import {LoaderFactory} from '../interface.js';
 
 const factory: LoaderFactory = async () => {
+    const resolving = [
+        resolve('@ecomfe/class-names-loader'),
+        resolve('classnames'),
+    ] as const;
+    const [loader, classNamesModule] = await Promise.all(resolving);
     return {
-        loader: resolveSync('@ecomfe/class-names-loader'),
-        options: {
-            classNamesModule: resolveSync('classnames'),
-        },
+        loader,
+        options: {classNamesModule},
     };
 };
 

packages/config-webpack/src/loaders/css.ts

@@ -1,9 +1,9 @@
-import {resolveSync} from '@reskript/core';
+import {resolve} from '@reskript/core';
 import {LoaderFactory} from '../interface.js';
 
 const factory: LoaderFactory = async entry => {
     return {
-        loader: resolveSync('css-loader'),
+        loader: await resolve('css-loader'),
         options: {
             sourceMap: entry.projectSettings.build.style.extract,
             modules: false,

packages/config-webpack/src/loaders/cssExtract.ts

@@ -1,7 +1,8 @@
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import {LoaderFactory} from '../interface.js';
 
 const factory: LoaderFactory = async () => {
+    const {default: MiniCssExtractPlugin} = await import('mini-css-extract-plugin');
+
     return {
         loader: MiniCssExtractPlugin.loader,
     };

packages/config-webpack/src/loaders/cssModules.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import {resolveSync} from '@reskript/core';
+import {resolve} from '@reskript/core';
 // @ts-expect-error
 import hasha from 'hasha';
 import {paramCase} from 'change-case';
@@ -15,7 +15,7 @@ const generateScopedStyleName = (name: string, filename: string): string => {
 
 const factory: LoaderFactory = async entry => {
     return {
-        loader: resolveSync('css-loader'),
+        loader: await resolve('css-loader'),
         options: {
             sourceMap: entry.projectSettings.build.style.extract,
             importLoaders: true,

packages/config-webpack/src/loaders/less.ts

@@ -1,13 +1,17 @@
-import {resolveSync} from '@reskript/core';
-import NpmImport from 'less-plugin-npm-import';
-import LessPluginFunctions from 'less-plugin-functions';
+import {resolve} from '@reskript/core';
 import {LoaderFactory} from '../interface.js';
 
 const factory: LoaderFactory = async ({projectSettings}) => {
+    const importing = [
+        resolve('less-loader'),
+        import('less-plugin-npm-import'),
+        import('less-plugin-functions'),
+    ] as const;
+    const [loader, {default: NpmImport}, {default: LessPluginFunctions}] = await Promise.all(importing);
     const {build: {style: {lessVariables, extract}}} = projectSettings;
 
     return {
-        loader: resolveSync('less-loader'),
+        loader,
         options: {
             sourceMap: extract,
             lessOptions: {

packages/config-webpack/src/loaders/lessSafe.ts

@@ -1,9 +1,9 @@
-import {resolveSync} from '@reskript/core';
+import {resolve} from '@reskript/core';
 import {LoaderFactory} from '../interface.js';
 
 const factory: LoaderFactory = async () => {
     return {
-        loader: resolveSync('@reskript/less-safe-loader'),
+        loader: await resolve('@reskript/less-safe-loader'),
     };
 };
 

packages/config-webpack/src/loaders/postcss.ts

@@ -1,4 +1,4 @@
-import {resolveSync, compact, resolveFrom} from '@reskript/core';
+import {resolve, compact, resolveFrom} from '@reskript/core';
 import postCSS from 'postcss';
 import presetEnv from 'postcss-preset-env';
 import nano from 'cssnano';
@@ -20,7 +20,7 @@ const factory: LoaderFactory = async ({mode, projectSettings}) => {
     ];
 
     return {
-        loader: resolveSync('postcss-loader'),
+        loader: await resolve('postcss-loader'),
         options: {
             sourceMap: extract,
             implementation: postCSS,

packages/config-webpack/src/loaders/style.ts

@@ -1,9 +1,9 @@
-import {resolveSync} from '@reskript/core';
+import {resolve} from '@reskript/core';
 import {LoaderFactory} from '../interface.js';
 
 const factory: LoaderFactory = async () => {
     return {
-        loader: resolveSync('style-loader'),
+        loader: await resolve('style-loader'),
     };
 };
 

packages/config-webpack/src/loaders/styleResources.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import {resolveSync, compact} from '@reskript/core';
+import {resolve, compact} from '@reskript/core';
 import unixify from 'unixify';
 import {LoaderFactory} from '../interface.js';
 
@@ -11,7 +11,7 @@ const factory: LoaderFactory = async ({cwd, srcDirectory, projectSettings}) => {
     ];
 
     return {
-        loader: resolveSync('style-resources-loader'),
+        loader: await resolve('style-resources-loader'),
         options: {
             patterns: compact(patterns),
             injector: 'append',

packages/config-webpack/src/loaders/svgToComponent.ts

@@ -1,11 +1,11 @@
-import {resolveSync} from '@reskript/core';
+import {resolve} from '@reskript/core';
 import {LoaderFactory} from '../interface.js';
 
 const factory: LoaderFactory = async entry => {
     const {mode, projectSettings: {build: {script: {displayName}}}} = entry;
 
     return {
-        loader: resolveSync('@reskript/svg-to-component-loader'),
+        loader: await resolve('@reskript/svg-to-component-loader'),
         options: {
             displayName: displayName === 'auto' ? mode === 'development' : displayName,
         },

packages/config-webpack/src/loaders/svgo.ts

@@ -1,9 +1,9 @@
-import {resolveSync} from '@reskript/core';
+import {resolve} from '@reskript/core';
 import {LoaderFactory} from '../interface.js';
 
 const factory: LoaderFactory = async () => {
     return {
-        loader: resolveSync('svgo-loader'),
+        loader: await resolve('svgo-loader'),
         options: {
             // 取了一个相对安全的插件集合
             plugins: [

packages/config-webpack/src/loaders/worker.ts

@@ -1,9 +1,9 @@
-import {resolveSync} from '@reskript/core';
+import {resolve} from '@reskript/core';
 import {LoaderFactory} from '../interface.js';
 
 const factory: LoaderFactory = async () => {
     return {
-        loader: resolveSync('worker-loader'),
+        loader: await resolve('worker-loader'),
         options: {
             filename: '[name].[contenthash].js',
             inline: 'no-fallback',

packages/core/src/index.ts

@@ -16,7 +16,7 @@ import {prepareEnvironment} from './env.js';
 import {Flag, isFlagEnabled, isInDebugMode} from './flag.js';
 import {deprecatedWarn} from './deprecate.js';
 import {pFilter, pMap, pReduce} from './async.js';
-import {resolveFrom, resolveSync, dirFromImportMeta, importUserModule} from './resolve.js';
+import {resolveFrom, resolve, resolveSync, dirFromImportMeta, importUserModule} from './resolve.js';
 import {GitStatusResult, gitStatus} from './git/index.js';
 import {compact} from './lang.js';
 
@@ -46,10 +46,11 @@ export {
     pMap,
     pReduce,
     resolveFrom,
+    resolve,
+    resolveSync,
     importUserModule,
     GitStatusResult,
     gitStatus,
     compact,
     dirFromImportMeta,
-    resolveSync,
 };

packages/core/src/resolve.ts

@@ -24,6 +24,26 @@ export const resolveFrom = (base: string) => (id: string) => {
     return new Promise(execute);
 };
 
+export const resolve = (id: string) => {
+    const callerUrl = caller();
+    const callerPath = callerUrl.startsWith('file://') ? fileURLToPath(callerUrl) : callerUrl;
+    const execute = (resolve: (resolved: string) => void, reject: (error: Error) => void) => resolveCore(
+        id,
+        {basedir: callerPath},
+        (err, resolved) => {
+            if (err) {
+                return reject(err);
+            }
+            if (!resolved) {
+                return reject(new Error(`ENOENT, unable to resolve ${id}`));
+            }
+
+            resolve(resolved);
+        }
+    );
+    return new Promise(execute);
+};
+
 export const resolveSync = (id: string) => {
     const callerUrl = caller();
     const callerPath = callerUrl.startsWith('file://') ? fileURLToPath(callerUrl) : callerUrl;

showcase/todo/package.json

@@ -4,7 +4,7 @@
   "version": "3.0.6",
   "description": "待办列表示例",
   "scripts": {
-    "build": "skr build --clean --strict",
+    "build": "rm -rf node_modules/.cache && skr build --clean --strict",
     "analyze": "skr build --clean --strict --analyze --build-target=stable",
     "start": "skr dev",
     "lint": "skr lint --strict",

site/docs/cli/introduction.md

@@ -20,7 +20,7 @@ title: 命令行介绍
 
 自动安装一个缺失的命令包需要你的项目满足以下要求：
 
-1. 你在安装`@reskript/*`包时，使用了精确的版本号，即在`npm install`、`yarn add`、`pnpm add`时使用`--save-exact`（或`-E`）参数，在你的`package.json`中，版本不是`^x.y.z`的形式，而是一个`x.y.z`的精确版本号。
+1. 你在安装`@reskript/*`包时，使用了精确的版本号，即在`npm install`、`yarn add`、`pnpm add`时使用`--save-exact`（或`-E`）参数，在你的`package.json`中，版本不是`^x.y.z`的形式，而是一个`x.y.z`的精确版本号。
 2. 你的项目必须启用了git版本管理，即在根目录下有`.git`文件夹。
 3. 你的项目在根目录（`.git`文件夹所在目录）下有一个包管理器的版本锁文件，可以是`package-lock.json`、`yarn.lock`或`pnpm-lock.yaml`。