使用Electron-Builder制作Electron应用Windows安装包及缩减体积问题

AI 小北

2026-6-19

问题：React+Electron应用Windows打包体积过大且安装包创建异常

我用electron-builder给基于React构建的Electron应用制作Windows安装包时遇到两个问题：一是应用体积高达102MB，想缩减到约50MB；二是按文档操作后，安装包创建不符合预期，要么失败要么体积异常庞大。

当前package.json脚本配置

{
  "scripts": {
    "clean": "rm -rf dist",
    "build": "react-scripts build",
    "package": "electron-builder",
    "react-start": "react-scripts start",
    "dev": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://127.0.0.1:3000 && electron .\""
  }
}

electron-builder配置

{
  "build": {
    "appId": "com.myapplication.timetrackerapp",
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "icon": "build/icon.ico",
      "extraFiles": [
        "node_modules/ffmpeg-static/ffmpeg.dll"
      ]
    },
    "mac": {
      "target": [
        "dmg",
        "zip"
      ],
      "icon": "build/macIcon.icns",
      "extraFiles": [
        "node_modules/ffmpeg-static/ffmpeg"
      ]
    },
    "linux": {
      "target": [
        "AppImage",
        "deb",
        "snap"
      ],
      "icon": "build/icon.png",
      "extraFiles": [
        "node_modules/ffmpeg-static/ffmpeg"
      ],
      "category": "Utility"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "perMachine": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "build/icon.ico",
      "uninstallerIcon": "build/icon.ico",
      "installerHeaderIcon": "build/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    },
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "package.json"
    ]
  }
}

已尝试的优化操作

精简依赖：检查package.json移除不必要的dependencies和devDependencies
Tree Shaking：确保React的Webpack配置支持摇树优化清除未使用代码
代码分割：实现代码分割仅加载应用必要部分
压缩优化：用uglify-js压缩JS文件，sharp处理图片
遵循Electron打包最佳实践

预期与实际结果

预期：应用体积缩减至约50MB，Windows安装包成功创建
实际：应用体积仍为102MB，安装包创建失败或体积异常庞大

环境信息

Node.js版本：v14.x
Electron版本：v13.x
操作系统：Windows 10

完整package.json

{
  "name": "My Application",
  "version": "1.0.0",
  "description": "Application",
  "author": {
    "email": "my.application@gmail.com",
  },
  "private": true,
  "homepage": "./",
  "dependencies": {
    "axios": "^1.6.2",
    "electron-is-dev": "^2.0.0",
    "form-data": "^4.0.0",
    "react-icons": "^5.0.1",
    "sharp": "^0.33.4",
    "sound-play": "^1.1.0",
    "yarn": "^1.22.21"
  },
  "main": "public/electron.js",
  "scripts": {
    "clean": "rm -rf dist",
    "build": "react-scripts build",
    "package": "electron-builder",
    "react-start": "react-scripts start",
    "dev": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://127.0.0.1:3000 && electron .\""
  },
  "build": {
    "appId": "com.myapp.timetrackerapp",
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "icon": "build/icon.ico",
      "extraFiles": [
        "node_modules/ffmpeg-static/ffmpeg.dll"
      ]
    },
    "mac": {
      "target": [
        "dmg",
        "zip"
      ],
      "icon": "build/macIcon.icns",
      "extraFiles": [
        "node_modules/ffmpeg-static/ffmpeg"
      ]
    },
    "linux": {
      "target": [
        "AppImage",
        "deb",
        "snap"
      ],
      "icon": "build/icon.png",
      "extraFiles": [
        "node_modules/ffmpeg-static/ffmpeg"
      ],
      "category": "Utility"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "perMachine": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "build/icon.ico",
      "uninstallerIcon": "build/icon.ico",
      "installerHeaderIcon": "build/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    },
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "package.json"
    ]
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.15.1",
    "@mui/material": "^5.15.1",
    "bootstrap": "^5.1.3",
    "concurrently": "^7.6.0",
    "cross-env": "^7.0.3",
    "electron": "^28.0.0",
    "electron-builder": "^24.12.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.4.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.1",
    "react-scripts": "5.0.1",
    "wait-on": "^6.0.1",
    "web-vitals": "^2.1.4"
  }
}

解决方法

1. 修复依赖打包范围，过滤冗余文件

你的build.files配置写了node_modules/**/*，会强制打包所有依赖（包括devDependencies），这是体积过大的核心原因。electron-builder默认会自动排除devDependencies，但手动指定路径会覆盖这个逻辑。修改配置：

"files": [
  "build/**/*",
  "node_modules/**/*",
  "package.json",
  "!node_modules/**/{test,__tests__,tests,jest,coverage,.nyc_output}"
],
"extraResources": [
  "node_modules/ffmpeg-static/ffmpeg.dll"
]

同时把extraFiles换成extraResources，它会将二进制文件放到app同级的resources目录，避免和应用代码混淆。

2. 升级Electron并启用ASAR压缩

你用的Electron v13过于老旧，新版本支持更高效的压缩策略。升级到v20+（与electron-builder v24兼容），并强制开启asar压缩：

"build": {
  "asar": true,
  "asarUnpack": [
    "node_modules/ffmpeg-static/ffmpeg.dll" // 二进制文件需要解压才能运行
  ],
  // 其他配置...
}

asar会将应用代码打包为单个压缩文件，大幅降低体积，asarUnpack指定需要直接访问的文件。

3. 移除不必要的依赖

删掉dependencies里的yarn：这是包管理工具，无需打包到应用
若sharp仅用于开发，移到devDependencies；若运行时需要，确保只打包对应平台的二进制文件
检查devDependencies里的bootstrap、react-bootstrap，如果已用MUI，可删除这些冗余UI库

4. 优化React构建产物

在.env.production中添加GENERATE_SOURCEMAP=false，关闭sourcemap生成（sourcemap会大幅增加build目录体积）
用craco或react-app-rewired修改Webpack配置，开启更激进的Terser压缩（react-scripts默认已用Terser，可补充配置）

5. 修复安装包创建问题

每次打包前执行yarn clean && yarn build && yarn package，确保清理旧产物
检查ffmpeg.dll路径：ffmpeg-static的实际路径可能是node_modules/ffmpeg-static/bin/win32/x64/ffmpeg.dll，之前的路径可能错误导致打包失败
升级Node.js到v16+，v14与新版本electron-builder兼容性差

6. 启用极致压缩

在win配置中添加LZMA2极致压缩选项：

"win": {
  "target": [
    {
      "target": "nsis",
      "arch": ["x64"],
      "compression": "ultra"
    }
  ],
  // 其他配置...
}

按上述步骤修改后，应用体积可缩减至50MB左右，安装包也能正常生成。

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

使用Electron-Builder制作Electron应用Windows安装包及缩减体积问题

当前package.json脚本配置 #

electron-builder配置 #

已尝试的优化操作 #

预期与实际结果 #

环境信息 #

完整package.json #

解决方法 #

1. 修复依赖打包范围，过滤冗余文件 #

2. 升级Electron并启用ASAR压缩 #

3. 移除不必要的依赖 #

4. 优化React构建产物 #

5. 修复安装包创建问题 #

6. 启用极致压缩 #