【electron-playground系列】打包优化之路

发表评论
364 次浏览

A+

所属分类：Web前端

摘要

作者：梁棒棒electron打包工具有两个：electron-builder，electron-packager，官方还提到electron-forge，其实它不是一个打包工具，而是一个类似于cli的工具集，目的是简化开发到打包的一整套流程，内部打包工具依然是electron-packager。

便宜好用的国外VPS推荐

作者：梁棒棒

简介

electron打包工具有两个：electron-builder，electron-packager，官方还提到electron-forge，其实它不是一个打包工具，而是一个类似于cli的工具集，目的是简化开发到打包的一整套流程，内部打包工具依然是electron-packager。

electron-builder与electron-packager相比各有优劣，electron-builder配置项较多，更加灵活，打包体积相对较小，同时上手难度大；而electron-packger配置简单易上手，但是打出来的应用程序包体积相对较大。

我们选择electron-builder作为electron-playground项目的打包工具，配合webpack实现更灵活的打包配置。打包配置在electron-playground中已有说明，这里不再赘述，主要讲述一下打包一个electron项目的优化点，打包优化分为打包时间优化和体积优化，本篇讲述体积优化。

node_modules优化

electron空项目打包后的dmg体积在75M左右，32位exe文件体积在52M左右，64位的exe体积则为105M左右。

注：空项目依赖版本为：electron: ^10.1.5 electron-builder: ^22.9.1 系统版本为：macOS Catalina 10.15.6。

而我们的项目打包后dmg体积为165M，ia32exe也在128M左右，比预期大很多，分析一下包，在release -> 【版本号命名的文件夹】 -> win-ia32-unpacked -> resources 下有个app.asar文件，这其实是个压缩包，目的是保护代码隐私，在build中可配置是否需要压缩为asar包。
在electron-builder.yml中加入：

asar: true

用asar工具包解压。

# 安装 npm install asar -g  # 解压 asar extract app.asar <解压后的目录>

解压然后看下包中有哪些内容：
【electron-playground系列】打包优化之路
dist和resources是配置项中指定的需要复制打包的内容，这没有问题，可是node_modules中的依赖项已经在webpack打包构建时一同打包进了dist下，它不应该在这里，而且electron-builder配置项files中也没有指定复制此文件夹。带着这个疑问，查看一下文档，终于找到了原因，原来files有默认值：

[   "**/*",   "!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}",   "!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples}",   "!**/node_modules/*.d.ts",   "!**/node_modules/.bin",   "!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}",   "!.editorconfig",   "!**/._*",   "!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,.gitignore,.gitattributes}",   "!**/{__pycache__,thumbs.db,.flowconfig,.idea,.vs,.nyc_output}",   "!**/{appveyor.yml,.travis.yml,circle.yml}",   "!**/{npm-debug.log,yarn.lock,.yarn-integrity,.yarn-metadata.json}" ]

package.json and **/node_modules/**/* (only production dependencies will be copied) is added to your custom in any case.   意思是：package.json和node_modules（仅仅生产依赖项会被复制）在任何情况下都会被添加至自定义（应该是files配置项下吧）中。

那这就很清楚了，我只需要在files中添加"!node_modules"即可，打包后体积是128M，足足小了37M，安装执行，没有问题。
依赖项的问题解决了，但是体积还是没达预期，查看包内容，果然，图片！这个永远也避不开的优化难题。

图片优化

图片优化在整个项目的优化中是优先级较高的，所谓的图片优化，其实是体积与质量之间的博弈，因此要想减小包中图片的体积，是要牺牲一部分图片质量的，也就是清晰度。做出如下优化：

首先对gif图在不影响用户观看的前提下做了一定压缩；
将一些png（流程图，logo，线条简单的）转为svg；
将一些截图png转为jpg；

最终将整体包体积dmg减小至102M，ia32exe为80M左右（后续功能更新会有一定出入）；

依赖项，按需加载

然后检查一下依赖项的位置和引用，首先对于package.json中依赖项进行排查，查看dependencies和devDependencies中的依赖项有没有错位的（开发依赖项写在了生产依赖项中），由于打包时只打包dependencies中的依赖项，所以在生产环境中用不到的依赖项一律塞至devDependencies。
然后再检查引用库的按需加载，首先想到项目中使用了antd框架。