电子封装：减小封装尺寸答案

【问题标题】：electron package: reduce the package size电子封装：减小封装尺寸
【发布时间】：2018-05-15 18:55:51
【问题描述】：

我做了一个简单的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。

有人有减小包裹大小的小窍门吗？

【问题讨论】：

你看了吗：github.com/electron/electron/issues/2003？电子项目的贡献者说这是预期的大小，因为 Windows 将 Git 的副本添加到应用程序中，而且，您的应用程序中的某些部分 Chrome 会无缘无故地使其变得巨大。如果您计划通过 Internet 分发您的应用程序，我强烈建议您在允许下载之前压缩您的应用程序。见：digitalocean.com/community/tutorials/…（Nginx 教程）

标签： javascript electron electron-packager

【解决方案1】：

您可以通过使用electron-builder 包进行打包来减小电子应用程序的大小。

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

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

【讨论】：

我正在使用 Vue 和电子，那么 Vue 是否有等价样板？
@K.Symbol 是的。你可以找到它here
是的，一个月前，当我开始构建我的应用程序时，我考虑过，但最终我选择了nklayman.github.io/vue-cli-plugin-electron-builder。打包后的.exe是93.1MB，压缩后是60MB，现在我觉得可以接受。

【解决方案2】：

通过在@987654323 中将“electron”和我的 reactJs dependencies 移动到 devDependencies，我设法将我的 mac 应用程序的最终大小从 250MB 减少到 128MB @... 因为我需要的只是最终的 bundle.js

但遗憾的是，我无法得到比这更低的值，因为电子框架是 118MB，如果你正在制作一个小应用程序，这会是一些东西，但我想这就是制作的代价跨平台网络应用

【讨论】：

【解决方案3】：

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

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

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

打包应用程序：

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

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

对我来说很奇怪的是，删除了我的整个“节点模块”文件夹，然后运行“npm install”以恢复所有内容。在那之后，我立即运行“npm prune”来清除“节点模块”文件夹中未使用的任何内容（即使我只是运行了“npm install”）。我还仔细检查了 package.json 文件的“依赖项”部分中没有电子和电子生成器。在此之后，我将应用程序打包/

大家可能已经知道，使用 electron-builder，你的 'dist' 文件夹（除非你更改了默认目录）应该在 'dist' 目录中直接包含一个 .exe 文件和一个包含 @ 的 'unpackaged' 文件夹987654322@ 文件，取决于同一文件夹内的相关文件。但是，我拥有的.exe 文件（直接位于“dist”文件夹中的文件）只有 55MB。公平地说，这个文件确实会安装程序，并且安装后大小会膨胀到 171MB 左右。

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

【讨论】：

【解决方案4】：

电子版对于减小封装尺寸很重要。

没有 CEF 重新编译的 Windows x64 上的最小包大小：

Electron v16.0.2 和 Chromium v96 => 52.9MB
Electron v3.1.13 和 Chromium v66 => 32.4MB

您可以从here中选择您最好的电子版本

选择版本后如何再次缩小尺寸：

为您的客户删除未使用的文件，例如d3dcompiler_47.dll
使用更好的压缩算法，如7zip

Windows 上 Electron v3 打包所需的所有文件，例如：

└─App
    │  App.exe
    │  content_shell.pak
    │  ffmpeg.dll
    │  icudtl.dat
    │  natives_blob.bin
    │  node.dll
    │  v8_context_snapshot.bin
    │
    ├─locales
    │      en-US.pak
    │
    └─resources
           App.asar
           electron.asar

【讨论】：