如何在构建时基于配置静态导入指定的UIKit包？

针对你的场景（每个应用绑定固定UIKit，配置不随运行时变更），可以通过以下几种方式实现构建时静态导入，彻底避免动态导入的性能开销：

方案1：环境变量 + 条件静态导入 #

通过构建工具注入环境变量，在代码中编写静态可分析的分支判断，构建时工具会自动剔除无用分支，只保留对应UIKit的导入代码。

操作步骤： #

1. 为每个应用配置专属环境变量
   以npm脚本为例，在app_1的package.json中设置构建命令：

   "scripts": {
     "build": "UIKIT=uikit_1 vite build"
   }
   

   app_2则对应设置UIKIT=uikit_2。

2. 代码中编写条件静态导入
   注意使用静态可被构建工具分析的条件（直接判断环境变量，而非动态变量）：

   // 以CommonJS为例
   let Component_1, Component_2;
   if (process.env.UIKIT === 'uikit_1') {
     ({ Component_1, Component_2 } = require('uikit_1'));
   } else if (process.env.UIKIT === 'uikit_2') {
     ({ Component_1, Component_2 } = require('uikit_2'));
   }
   
   // 或ES模块静态导入写法
   // import { Component_1, Component_2 } from process.env.UIKIT === 'uikit_1' ? 'uikit_1' : 'uikit_2';
   

   构建工具（如webpack、vite）会在打包时自动分析并保留对应分支的代码，最终产物仅包含指定UIKit的内容。

方案2：构建工具别名映射 #

直接在应用的构建配置中，将统一的导入路径映射到目标UIKit，代码中只需写通用导入语句，构建时自动替换为对应UIKit的包。

Vite配置示例（app_1）： #

// app_1/vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      '@uikit': 'uikit_1' // 将@uikit路径映射到uikit_1
    }
  }
});

app_2的配置则将@uikit映射到uikit_2：

alias: {
  '@uikit': 'uikit_2'
}

代码中统一导入： #

import { Component_1, Component_2 } from '@uikit';

这种方式无需修改业务代码，完全由构建配置实现静态导入的替换，性能和原生静态导入一致。

方案3：Monorepo依赖别名配置 #

如果使用pnpm、yarn等Monorepo工具，可在每个应用的package.json中配置依赖别名，将通用的uikit依赖指向对应包：

app_1/package.json： #

{
  "dependencies": {
    "uikit": "workspace:uikit_1" // 将uikit别名指向monorepo中的uikit_1包
  }
}

app_2/package.json： #

{
  "dependencies": {
    "uikit": "workspace:uikit_2"
  }
}

代码中统一导入： #

import { Component_1, Component_2 } from 'uikit';

安装依赖后，uikit会被解析为对应应用绑定的UIKit包，构建时直接进行静态导入，无额外性能损耗。

方案4：构建前代码生成（复杂场景适配） #

若需要更灵活的控制逻辑，可编写简单脚本在构建前生成对应UIKit的导入文件：

1. 每个应用根目录创建配置文件

// app_1/uikit.config.js
module.exports = {
  targetUikit: 'uikit_1'
};

2. 编写生成导入文件的脚本

// generate-uikit-import.js
const fs = require('fs');
const config = require('./uikit.config.js');

const importContent = `
export { Component_1, Component_2 } from '${config.targetUikit}';
`;

fs.writeFileSync('./src/uikit-imports.js', importContent.trim());

3. 在构建脚本中预执行生成脚本

"scripts": {
  "prebuild": "node generate-uikit-import.js",
  "build": "vite build"
}

4. 业务代码导入生成的文件

import { Component_1, Component_2 } from './uikit-imports.js';

这种方式完全通过构建前的静态逻辑确定导入目标，产物仅包含指定UIKit的代码。

内容的提问来源于stack exchange，提问作者Trong Nghia