作者：梁邦邦简介电子打包工具有两个：electron-builder，electron-packager，官方提到了electron-forge。其实它并不是一个打包工具，而是一个类似于cli的工具集，其目的是简化从开发到打包的整个流程。内部打包工具还是electron-packager。与electron-packager相比，electron-builder有自己的优缺点。electron-builder配置项更多，更灵活。包装体积比较小，上手比较困难。electron-packer配置简单易用，但是类型化的应用打包体积比较大。我们选择electron-builder作为electron-playground项目的打包工具，配合webpack实现更灵活的打包配置。打包配置在electron-playground中已有说明，这里不再赘述。主要说一下打包一个electron项目的优化点。包装优化分为包装时间优化和体积优化。本文介绍了卷优化。node_modules优化后的electron空工程dmg体积约为75M，32位exe文件体积约为52M，64位exe文件体积约为105M。注：空项目依赖版本为：electron:^10.1.5electron-builder:^22.9.1系统版本为：macOSCatalina10.15.6。我们项目打包后，dmg体积为165M，ia32exe也有128M左右，比想象中的大很多。我们分析一下包，在release->[以版本号命名的文件夹]->win-ia32-unpacked->resources下找到一个app.asar文件，其实就是一个压缩包，目的是为了保护隐私代码，是否需要压缩成asar包可以在build.gradle中配置。在electron-builder.yml中加入：asar:true，用asar工具包解压。#安装npminstallasar-g#解压asarextractapp.asar<解压后的目录>解压看看包里有什么：dist和resources就是配置项中指定的需要复制打包的内容。这个没有问题，但是node_modules中的依赖在webpack打包构建的时候已经打包到dist中了。应该不是这里，electron-builder配置项文件没有指定复制这个文件夹。带着这个疑惑，查了下文档，终于找到了原因。原来文件有默认值：["**/*","!**/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和**/node_modules/**/*（只会复制生产依赖项）在任何情况下都会添加到您的自定义中。含义：package.json和node_modules（只会复制生产依赖）在任何情况下都会被添加到custom（应该在files配置项下）。那么这个就很清楚了，我只需要在文件中加上“!node_modules”，打包后的体积是128M，小了37M，安装就没有问题了。依赖问题解决了，但是大小还是没有达到预期。查看包装内容，果然有图片！这个优化问题永远无法避免。图像优化图像优化在整个项目的优化中具有较高的优先级。所谓图像优化，其实就是尺寸和质量的博弈。因此，如果要缩小包内图片的体积，就必须牺牲一部分图片质量，也就是锐度。做如下优化：第一，压缩gif，不影响用户观看；将一些png（流程图、徽标、简单线条）转换为svg；将一些屏幕截图从png转换为jpg；最终将整个包大小dmg缩小为102M，ia32exe为80M左右（后续功能更新会有一些出入）；按需加载依赖项，然后检查依赖项的位置和引用。首先查看package.json中的依赖，查看dependencies和devDependencies中是否有错位依赖（开发依赖写在生产依赖中），由于打包时只打包dependencies中的依赖，生产环境中没有用到的依赖是全部塞进devDependencies。然后查看参考库的按需加载，首先想到的是项目中使用的antd框架。官方文档写道：antd默认支持基于ES模块的treeshaking。对于js部分，直接import{Button}from'antd'会有按需加载的效果。为了以防万一，检查一下，使用webpack-bundle-analyzer可视化插件看一下依赖量图，结果如下。没有找到antd，于是在左边的抽屉里找，确定是按需加载。Doublepackage.json官方重构了生产依赖，提出了doublepackage.json结构（两个package.json）。顾名思义，依赖是通过两个package.json来管理的。一个用于管理开发依赖，一个用于管理应用依赖，最终打包时只打包应用依赖。开发依赖项目根目录下的这个package.json，文件中声明了开发依赖和打包脚本；应用依赖；app文件夹下，声明了应用依赖，打包时只打包在这个文件中声明的依赖。所有元字段都应在此文件中声明（版本、名称等）。版本电子版也会对包装体积产生影响。这是一个使用electron^8和10.1.5的小测试。下图左边是8版本，右边是10版本，可能系统版本对打包体积也有影响，这里就不尝试了，有条件的同学可以试试.对电子感兴趣？请关注我们的开源项目ElectronPlayground，带你快速上手Electron。每周五我们都会挑选一些有趣的文章和新闻与大家分享。快来关注我们的小风周刊吧。我们是好未来小黑板的前端技术团队。我们会经常与您分享最新最酷的行业技术知识。欢迎知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园关注我们。
