Electron加create-react-app为什么这么难打包？尝试着梳理以下几个方面

2023-09-17 23:02:56

Electron 是一个用于构建跨平台桌面应用程序的开源框架。它使用JavaScript、HTML和CSS来创建用户界面，并使用Node.js来管理后台逻辑。Electron应用程序可以在Windows、macOS和Linux上运行。

create-react-app 是一个用于创建React应用程序的命令行工具。它可以帮助我们快速创建一个新的React应用程序，并提供了一些开箱即用的功能，如热重载、代码分割和生产构建。

当我们使用Electron和create-react-app来打包应用程序时，可能会遇到以下几个问题：

应用程序体积过大 ：Electron应用程序的体积通常比较大，这主要是由于它包含了整个Node.js运行时环境。
应用程序启动速度慢 ：Electron应用程序的启动速度通常比较慢，这主要是由于它需要加载整个Node.js运行时环境。
应用程序兼容性差 ：Electron应用程序在不同的操作系统上的兼容性可能存在差异。
应用程序性能差 ：Electron应用程序的性能通常比较差，这主要是由于它使用JavaScript来创建用户界面。

为了解决这些问题，我们可以采取以下几种方法：

使用Webpack来构建应用程序 ：Webpack是一个模块打包工具，可以帮助我们优化应用程序的体积和性能。
使用Electron-builder来打包应用程序 ：Electron-builder是一个工具，可以帮助我们轻松地将Electron应用程序打包成可执行文件。
使用electron-packager来打包应用程序 ：electron-packager是一个工具，可以帮助我们轻松地将Electron应用程序打包成可执行文件。
使用cross-env来设置环境变量 ：cross-env是一个工具，可以帮助我们轻松地设置环境变量。

通过使用这些工具和方法，我们可以解决Electron和create-react-app打包应用程序时遇到的问题，并构建出高性能、体积小、兼容性好、启动速度快的应用程序。

写在前面
已经不是第一次使用electron打包了，上次也颇花了些时间，我竟不曾想这次又颇花了些。真是颇有些无助了，不得不写点什么以告慰那些被花费的时间了。

背景
打包之前有必要给各位交代一下项目背景。

项目使用了Electron、React、Redux、Antd Design
打包是为了给开发环境提供一个exe包，方便开发和测试
编译和打包都放在了自动化流水线当中，打包脚本使用的是electron-packager
Mac环境下的打包没有什么问题，在win10环境下打包却屡屡遇到问题

问题一：electron.exe是32位程序
在没有设置32位编译环境之前，在win10环境下打包出来的exe包是一个32位程序，所以无论是在什么环境下运行都会报错。解决方法很简单，就是设置一下electron的编译环境，添加target_arch=x64这个选项。

export target_arch=x64

问题二：资源文件过大
当开发环境中使用了诸如图标、图片、样式等资源文件时，打包出来的exe包体积会很大。解决办法很简单，减小资源文件的大小即可。

使用tinypng对图片进行压缩
使用CSS预处理器对样式进行压缩
使用webpack对图片和样式进行压缩

问题三：找不到模块
在使用npm install命令安装依赖库时，package-lock.json文件中可能存在一些被注释掉的依赖库，如下图所示：

{
  "name": "myapp",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "antd": {
      "version": "3.26.18",
      "resolved": "https://registry.npmjs.org/antd/-/antd-3.26.18.tgz",
      "integrity": "sha512-554/2e/a6jQ9Y8YNSiFg1UNVLh/b+Iig+29XC27HbUXT6L1Oh02P4TVYNsz0eBdWH05wY9+rrNnGkFyt5hLbkQ==",
      "dev": true,
      "optional": true
    }
  }
}