electron构建-CFANZ编程社区

1. 应用图标生成:

(1). 不同尺寸图标的生成有以下方法:

①. Windows:
    a. 软件生成:icofx3
    b. 网页生成:
       https://tool.520101.com/diannao/ico/(opens new window)

②. MacOS:
    a. 软件生成:icofx3
    b. 网页生成：:
       https://tool.520101.com/diannao/ico/(opens new window)
    c. 命令行生成:
       (1). 使用sips和iconutil生成

2. 二进制文件构建:

基于electron-forge

在开发桌面端应用时,会有场景要用到第三方的二进制程序,如ffmpeg这种,在构建二进制程序时,注意项:

(1). 二进制程序不能打包进asar中可以在构建配置文件(forge.config.js)进行如下设置:

const os = require('os')
const platform = os.platform()
const config = {
  packagerConfig: {
    // 可以将ffmpeg目录打包到asar目录外面
    extraResource: [`./src/main/ffmpeg/`]
  }
}

(2). 开发和生产环境,获取二进制程序路径方法是不一样的,可以采用如下代码进行动态获取:

import { app } from 'electron'
import os from 'os'
import path from 'path'
const platform = os.platform()
const dir = app.getAppPath()
let basePath = ''
if(app.isPackaged) basePath = path.join(process.resourcesPath)
else basePath = path.join(dir, 'ffmpeg')
const isWin = platform === 'win32'
// ffmpeg 二进制程序路径
const ffmpegPath = path.join(basePath, `${platform}`, `ffmpeg${isWin ? '.

3. 按需构建:

(1). 如何对跨平台二进制文件进行按需构建呢?

①. 比如桌面应用中用到了ffmpeg,它需要windows、mac和linux的下载二进制

②. 在打包的时,如果不做按需构建,则会将3个二进制文件全部打到构建中,这样会让应用体积增加很多

③. 可以在forge.config.js配置文件中进行如下配置,即可完成按需构建,代码如下:
    const platform = os.platform()
    const config = {
      packagerConfig: {
        extraResource: [`./src/main/ffmpeg/${platform}`]
      },
    }

④. 通过platform变量来把对应系统的二进制打到构建中,即可完成对二进制文件的按需构建

4. 性能优化:

①. 主要是构建速度和构建体积优化,构建速度这块不好优化

②. 以mac系统举例,在electron应用打包后,查看应用包内容,如下图:

可以看到有一个app.asar文件,这个文件用asar解压后可以看到有以下内容:

①. 可以看出asar中的文件是构建后的项目代码:
    a. 从图中可以看到有node_modules目录
    b. 因为在electron构建机制中,会自动把dependencies的依赖全部打到asar中

②. 优化措施有4点:
    a. 将web端构建所需的依赖全部放到devDependencies中
    b. 只将在electron端需要的依赖放到dependencies
    c. 将和生产无关的代码和文件从构建中剔除
    d. 对跨平台使用的二进制文件,如ffmpeg进行按需构建

③. node_modules清理:
    a. 如果是yarn安装的依赖,在根目录使用以下面命令进行精简:
       yarn autoclean -I
       yarn autoclean -F
    b. 如果是pnpm安装的依赖,第4点应该不起作用了
    c. 在项目中使用yarn执行完后,发现打包体积减少了6M