Electron 应用程序打包优化

1.使用 asar 打包方式

asar 是一种将应用程序打包为单个归档文件的方法,可以有效减少文件数量和大小,从而减小应用程序的打包体积。在应用程序的 package.json 文件中,将 "asar": true 添加到 "build" 配置中即可启用 asar 打包方式。

题外小知识:app.asar包如何解压查看?
执行一下命令:
npm i -g asar
再解压缩asar文件

asar extract app.asar ./app

如果想通过修改app.asar的扩展名,再用其它解压工具,或者用其它解压工具直接打开,可能会报错。

2.移除不必要的依赖

检查应用程序依赖的模块和库是否真正需要使用,如果不需要,可以将其从项目中移除。可以使用 npm prune 命令或 npm prune --force 来删除未使用的依赖项。

3.缩小 Node.js 的可执行文件大小

使用 Node.js 的 --without-snapshot 参数来禁用快照功能,可以减小 Node.js 的可执行文件大小。使用 --no-lazy 参数来禁用延迟绑定,可以减少应用程序的内存使用量。

4.使用 webpack 或者 rollup 进行打包

使用 webpack 或 rollup 等模块打包工具可以将应用程序中的多个模块打包成单个文件,从而减少文件数量和大小,从而减小应用程序的打包体积。

5.将依赖项转换为动态链接库

将依赖项转换为动态链接库可以减小应用程序的文件大小。在应用程序中,将需要动态链接的依赖项从 dependencies 转移到 optionalDependencies,然后使用 electron-rebuild 将这些依赖项编译为动态链接库。

6.压缩文件

将应用程序的文件进行压缩,可以有效减小文件大小。可以使用一些开源的压缩工具,例如 UPX。

7.electron通过删除未使用的语言文件缩减打包后大小

步骤:

①创建afterPack.js

build\hooks\afterPack.js

exports.default = async function (context) {
    //console.log(context)
    const fs = require('fs')
    const localeDir = context.appOutDir + '/locales/'

    fs.readdir(localeDir, function (err, files) {
        if (!(files && files.length)) return
        for (let i = 0, len = files.length; i < len; i++) {
            const match = files[i].match(/zh-CN\.pak/) //只保留中文
            if (match === null) {
                fs.unlinkSync(localeDir + files[i])
            }
        }
    })
}

2.配置afterPack

electron-builder.json5:

"afterPack": "./build/hooks/afterPack.js"

该方法大概能减少5M的体积

这些方法可能对应用程序的稳定性和可维护性产生影响。在进行优化之前,应该仔细评估,确保稳定第一。

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐