Electron应用如何仅编译对应目标平台代码，缩减安装包体积？

方案1：Webpack NormalModuleReplacementPlugin 实现（推荐） #

这个方案直接在模块编译阶段替换路径，完全隔离不同平台代码，无冗余产物：

• 第一步：修改src/inner/inner.ts的导入语句为固定占位路径：

// 强制export default的要求不受影响
import LOGGER from './inner.platform.ts';

export default class A {
    public static logger() {
         LOGGER();
    }
}

• 第二步：新增类型声明文件解决TS类型校验问题，在src/inner目录下新建inner.platform.d.ts：

export default function logger(): void;

• 第三步：配置Webpack插件，打包时根据环境变量替换为对应平台的实现文件
  先安装cross-env统一跨平台环境变量设置：npm i cross-env -D
  修改Webpack配置文件：

const webpack = require('webpack');
const path = require('path');
// 读取打包时传入的平台参数
const TARGET_PLATFORM = process.env.TARGET_PLATFORM || 'windows';

module.exports = {
  // 其余原有配置保持不变
  plugins: [
    new webpack.NormalModuleReplacementPlugin(/inner\.platform\.ts$/, (resource) => {
      resource.request = resource.request.replace(
        'inner.platform.ts', 
        `inner.${TARGET_PLATFORM}.ts`
      );
    }),
  ]
};

• 第四步：调整打包命令
  Windows版本打包：cross-env TARGET_PLATFORM=windows 你的原有打包命令
  Mac版本打包：cross-env TARGET_PLATFORM=darwin 你的原有打包命令

方案2：Webpack 别名配置实现 #

如果更习惯用别名管理路径，也可以用resolve.alias实现相同效果：

• 第一步：修改src/inner/inner.ts的导入语句为别名路径：

import LOGGER from '@/inner/platform-logger';

export default class A {
    public static logger() {
         LOGGER();
    }
}

• 第二步：在tsconfig.json中配置别名的类型映射，避免TS报错：

{
  "compilerOptions": {
    "paths": {
      "@/inner/platform-logger": ["./src/inner/inner.d.ts"]
    }
  }
}

• 第三步：配置Webpack别名：

const TARGET_PLATFORM = process.env.TARGET_PLATFORM || 'windows';
module.exports = {
  resolve: {
    alias: {
      '@/inner/platform-logger': path.resolve(__dirname, `src/inner/inner.${TARGET_PLATFORM}.ts`),
      // 其余原有别名配置
    }
  }
}

打包命令和方案1一致即可。

两种方案都可以保证最终打包产物只包含对应平台的代码，完全满足体积缩减的需求，也符合要求的export default导出规则，代码结构拆分清晰，平台相关逻辑完全独立。

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