Web项目多站点差异化SDK配置咨询：精简构建与避免分支同步冗余

针对你的需求，完全不需要维护多分支同步，以下几种优雅的方案可以实现仅打包当前站点所需SDK，同时保持公共代码的统一管理：

1. 基于环境变量的条件导入 + Tree Shaking #

利用构建工具（Vite/Webpack）的环境变量支持，在代码中根据当前站点标识导入对应SDK，配合Tree Shaking自动剔除未引用的代码。

实现步骤： #

• 构建时通过命令行传入站点标识：

  # 构建站点A
  VITE_SITE=siteA npm run build
  # 构建站点B
  VITE_SITE=siteB npm run build
  

• 编写统一SDK入口，根据环境变量静态导入对应实现：

  // src/sdk/index.js
  let SDK;
  if (process.env.VITE_SITE === 'siteA') {
    SDK = require('./siteA').default;
  } else if (process.env.VITE_SITE === 'siteB') {
    SDK = require('./siteB').default;
  }
  export default SDK;
  

• 确保构建工具开启Tree Shaking：Vite默认开启，Webpack需设置mode: 'production'并启用optimization.usedExports: true。

2. Monorepo 拆分项目结构 #

将公共业务代码作为独立包，每个站点作为单独的子项目，各自引入专属SDK，通过Monorepo工具（pnpm/Yarn Workspaces）管理依赖。

目录结构示例： #

project-root/
├── packages/
│   ├── common/          # 所有站点共享的公共代码
│   │   ├── src/
│   │   └── package.json
│   ├── site-a/          # 站点A独立项目
│   │   ├── src/
│   │   ├── package.json
│   │   └── src/sdk/     # 站点A专属SDK
│   └── site-b/          # 站点B独立项目
│       ├── src/
│       ├── package.json
│       └── src/sdk/     # 站点B专属SDK
└── pnpm-workspace.yaml

优势： #

• 公共代码变更后，所有站点子项目可一键更新依赖，无需分支同步
• 每个站点构建时仅打包自身SDK和公共代码，完全隔离无关代码
• 支持独立开发、独立部署

3. SDK抽象层 + 多入口构建 #

先定义统一的SDK接口规范，确保所有站点的SDK实现相同的方法，再为每个站点创建独立的构建入口，入口中直接引入对应SDK。

实现步骤： #

• 定义SDK抽象接口：

  // src/sdk/base.js
  export default class BaseSDK {
    login() { throw new Error('必须实现login方法'); }
    trackEvent() { throw new Error('必须实现trackEvent方法'); }
  }
  

• 每个站点实现自己的SDK：

  // src/sdk/siteA.js
  import BaseSDK from './base';
  export default class SiteASDK extends BaseSDK {
    login() { /* 站点A专属登录逻辑 */ }
    trackEvent() { /* 站点A专属埋点逻辑 */ }
  }
  

• 创建多站点构建入口：

  // src/entry-siteA.js
  import SDK from './sdk/siteA';
  import App from './app';
  
  App.init(SDK);
  

• 配置构建工具多入口：比如Vite可创建单独的配置文件vite.siteA.config.js，指定build.rollupOptions.input为src/entry-siteA.js，构建时运行对应配置文件即可。

4. 动态导入 + 条件编译（适用于同部署包多站点场景） #

如果你的站点是在同一个部署包中通过域名/路由区分，可使用动态导入配合构建时条件编译，确保仅打包当前站点的SDK：

// src/utils/getSDK.js
export async function getSDK() {
  // 编译时通过环境变量剔除无用分支
  if (process.env.VITE_SITE === 'siteA') {
    return (await import('../sdk/siteA')).default;
  }
  return (await import('../sdk/siteB')).default;
}

构建时传入对应环境变量，构建工具会自动删除未匹配的分支代码，最终产物仅包含目标SDK。

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