Electron.js+React打包含全部node_modules体积过大，求优化方案

核心思路 #

React构建后会生成独立的静态资源，完全不需要依赖项目根目录的node_modules；Electron主进程仅需要少数依赖（如dotenv），所以可以通过依赖分类+打包忽略规则实现依赖分离，大幅减少打包体积。

步骤1：调整依赖分类 #

将React相关依赖（如react、react-dom、react-scripts等）移到devDependencies，这些仅在开发和构建阶段需要，生产环境的静态文件已经包含React编译产物。仅保留主进程必需的依赖（如dotenv、electron）在dependencies中。

修改package.json依赖部分：

"dependencies": {
  "dotenv": "^x.x.x",
  "electron": "^x.x.x"
},
"devDependencies": {
  "react": "^x.x.x",
  "react-dom": "^x.x.x",
  "react-scripts": "^x.x.x",
  "electron-packager": "^x.x.x"
}

步骤2：优化Electron打包脚本 #

在打包命令中添加--ignore参数，忽略React源码、开发依赖目录及不必要文件；同时使用--asar参数将主进程代码打包成asar格式，进一步精简体积。

更新你的npm脚本：

"scripts": {
  "start": "react-scripts start",
  "electron": "electron index.js",
  "build": "react-scripts build",
  "release-win": "npm run build && electron-packager ./ mailer --platform=win32 --arch=x64 --overwrite --asar --ignore='^(src|public|node_modules/(react|react-dom|react-scripts))$'",
  "release-darwin": "npm run build && electron-packager ./ mailer --platform=darwin --arch=x64 --overwrite --asar --ignore='^(src|public|node_modules/(react|react-dom|react-scripts))$'",
  "release-linux": "npm run build && electron-packager ./ mailer --platform=linux --arch=x64 --overwrite --asar --ignore='^(src|public|node_modules/(react|react-dom|react-scripts))$'",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

步骤3：验证主进程依赖 #

确保主进程代码仅使用dependencies中的依赖。你的dotenv已放在dependencies中，符合要求；后续新增主进程依赖时，需同步放在dependencies目录。

额外优化：自动清理冗余文件 #

安装rimraf到devDependencies，打包前自动清理旧的build目录和打包产物：

"scripts": {
  "build": "rimraf build && react-scripts build",
  // ...其他脚本
}

注意事项 #

• --ignore的正则需根据项目结构调整，避免误删主进程需要的配置文件（如.env）或依赖。
• 使用--asar后，主进程读取文件的路径不受影响，但动态加载的文件需确保被包含在asar包内。

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