Question

我制作了一个简单的Electron应用：

main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

let win

function createWindow () {
  win = new BrowserWindow({
    width: 800, 
    height: 600, 
    icon: path.join(__dirname, 'icon.ico')
  })

  win.maximize();

  win.loadURL('https://stackoverflow.com/', {"extraHeaders" : "pragma: no-cache\n"});

  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)

app.on('browser-window-created',function(e,window) {
    window.setMenu(null);
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

的package.json

{
  "name": "test",
  "version": "1.0.0",
  "main": "main.js",
  "build": {
    "appId": "com.test.app",
    "copyright": "test",
    "productName": "test"
  },
  "devDependencies": {
    "electron": "1.7.9",
    "electron-builder": "^19.46.4",
    "electron-packager": "^10.1.0"
  }
}

使用electron-packager我已经构建了要发布的包：

electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds

构建包的总大小 107 MB 。

任何人都有减少包装尺寸的提示吗？

Answer 1

您可以使用electron-builder封装来缩小电子应用的尺寸。

PicArt是我最近开发的 electronjs 应用。它是使用 reactJS 构建的。最初，当我使用electronic-packager打包应用程序时，Window的构建大小约为 98 MB 。然后，我发现了这个很棒的样板electron-react，他们在其中配置了电子生成器以产生最佳的生成尺寸。使用这些配置设置后，PicArt的构建现在大约为 36 MB 。

是的，可以减小应用程序的大小，但是配置构建设置非常麻烦且耗时。

Answer 2

I managed to reduce the final size of my mac app from 250MB to 128MB by moving 'electron' and my reactJs dependencies to devDependencies in package.json ... since all I need is going to be in the final bundle.js

But sadly I couldn't get it any lower than that because the electron framework is 118MB which is something if you're making a small app, but I guess that's the price to pay for making cross-platform web apps

Answer 3

我在使用 200MB 的应用时遇到了同样的问题。设法将其缩小到 176MB，最终缩小到 55MB。

这是我所做的（如果有帮助的话）：

Electron-builder：打包应用
修剪：清理未使用的模块
清理 package.json 文件：依赖项

打包应用：

注意：我制作了一个 Windows 应用程序。

文档中提到了一个两步的 package.json 方法，但在我自己尝试（并确认文档）之后，不需要它。

对我来说很奇怪的是删除了我的整个“节点模块”文件夹，并运行“npm install”来恢复所有内容。紧接着，我运行了“npm prune”来清除“Node Modules”文件夹中没有被使用的任何东西（即使我只是运行了“npm install”）。我还仔细检查了电子和电子构建器都不在 package.json 文件中的“依赖项”部分。在此之后，我打包了应用程序/

众所周知，使用electron-builder，您的“dist”文件夹（除非您更改了默认目录）应该直接在“dist”目录中包含一个.exe文件和一个“unpackaged”文件夹，其中包含一个 .exe 文件，该文件取决于同一文件夹中的相关文件。但是，我拥有的 .exe 文件（直接位于“dist”文件夹中的文件）只有 55MB。公平地说，这个文件确实安装了程序，并且一旦安装，它的大小就会膨胀回大约 171MB。

如果我能找到另一种减小文件大小的方法，我会再次发布。

Answer 4

我正在使用电子构建器来打包电子应用程序。

请勿在构建过程中包含 node_modules。

参考： https://github.com/electron-userland/electron-builder/issues/1911

<块引用>

尽量不要将 node_modules 包含到您的 app.asar 中，如下所示。 "build": { ... "files": [ "!node_modules" ], ... }

实现上面的，我们有 package.json 文件：


  "build": {
    "appId": "org.jitsi.roundesk",
    "productName": "roundesk",
    "generateUpdatesFilesForAllChannels": true,
    "afterPack": "./linux-sandbox-fix.js",
    "files": [
      "**/*",
      "resources",
      "!app",
      "!main.js",
      "!node_modules"
    ],

示例代码链接：https://github.com/jitsi/jitsi-meet-electron/blob/master/package.json

我们将应用程序的大小缩小如下。（以 Mb 为单位）

电子封装：减小封装尺寸

4 个答案: