Electron源码学习: Electron程序体积裁剪（减小体积）

置顶 已于 2022-07-13 17:29:12 修改
阅读量1.1w 收藏 18
点赞数 2
分类专栏： Electron源码学习 Electron 文章标签： c++
于 2020-07-15 14:10:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42208826/article/details/107359532
版权

Electron源码学习: Electron程序体积裁剪（减小体积）

前言

​ 此篇专题名称可能叫Electron的编译(虽然并没有具体的编译步骤，但实际上本文里面的各种技术都需要源码编译Electron)更为合适。因为此篇文章基本不涉及到源码的解析和修改，但是因为也是基于Electron的学习和理解之上的，勉勉强强也叫这个名字吧。我测试编译的环境为Electron V4.2.9,为2019年年底的版本，本文中部分的方法在最新的版本Electron版本上不能直接适用； 那这种情况怎么办呢？自己去改改就好了。

​ 如果对体积有强烈需求的人，可以去看Miniblink：https://miniblink.net/，该方案几乎是重写了整个浏览器，除了V8之类的东西，所以程序体积可以非常小，压缩了之后小于10M完全妥妥的。 本文所列举出的方法改变不了Chromium浏览器体积庞大的本质问题；V8的二进制文件达到了30M，你让我去改成10M，20M？这个不现实；体积大有体积大的优势和理由。我这里的方法最多能减省各种看起来不需要的东西；程序的本质我是没那个能力去改变的。比如物理阉割代码什么的，欢迎大佬指教。

目的

​ 针对Electron体积削减的话题讨论也是由来已久，因为Electron的根本就是Chromium, 也因此Chromium的裁剪办法基本上也都适用于Electron,Electron是一个独立的exe, 针对Electron也有一些特殊的办法减小一些体积。本文的目的就是介绍一些我现在用到的一些用于裁剪程序的方法，看下效果：

在这里插入图片描述

途径1：GN编译开关

​ 注意：该方法不适用于老版本的Electron，老版本通过static_library的方法在链接的时候太慢，我个人认为没必要在这上面花功夫。

整理的开关如下：（以下开关主要作用是关闭一些不太可能用到的功能，对体积影响不是很大, 也相当于是源码裁剪，但是力度不大，做不到把具体某个庞大的部件减去）

is_debug = false
target_cpu = "x86" #编译目标程序为32位
enable_nacl = false
is_component_build = false
is_component_ffmpeg=false
symbol_level = 2 #设置为0的时候，将不会产生PDB，少量减少体积和极大加快编译速度
blink_symbol_level=2 # 同上
enable_basic_printing = false 
enable_resource_whitelist_generation=false
debug_devtools = false
#enable_plugins  = false
enable_pdf = false
enable_webrtc = false
enable_plugin_installation =false
enable_spellcheck = false
use_browser_spellchecker = false
enable_print_preview = false
enable_web_speech = false
#enable_electron_extensions = false
enable_task_manager = false
enable_themes = false
win_pdf_metafile_for_printing  = false
enable_service_discovery = false
enable_wifi_bootstrapping  = false
enable_webvr  = false
enable_notifications  = false
disable_ftp_support = true
#enable_electron_extensions = false
enable_fake_location_provider = false
enable_message_center = false
enable_nacl_nonsfi = false
enable_native_notifications = false
enable_one_click_signin = false
#enable_openvr = false
enable_session_service = false
enable_tts = false
enable_vr = false
enable_windows_mr = false
#pdf_is_standalone = true
pdf_use_skia_paths = false
pdf_use_skia = false
pdf_is_complete_lib = false
pdf_enable_xfa_tiff = false
pdf_enable_xfa_png = false
pdf_enable_xfa_gif = false
pdf_enable_xfa_bmp = false
pdf_enable_xfa = false
pdf_enable_v8 = false
pdf_enable_click_logging = false
pdf_bundle_freetype = false
rtc_build_examples = false
rtc_build_tools = false
#toolkit_views = false
treat_warnings_as_errors = false
start_daemons_for_testing = false
is_unsafe_developer_build = true
angle_enable_custom_vulkan_cmd_buffers=false
angle_enable_d3d11=true
angle_enable_d3d9=true
angle_enable_vulkan=false
angle_enable_gl=false
angle_enable_gl_null=false
angle_enable_essl=false
enable_swiftshader=false
enable_reporting = flase
enable_net_mojo=false

那么这些开关放在哪里呢？ 通过执行命令gn args out\Release会打开你对应的编译目录的配置，然后将这些东西放进去。保存，然后关闭。然后这些配置会被存储到out\Release目录下的args.gn中。如图示：在这里插入图片描述

途径2： 修改优化编译选项（可以直接减10+M）

在4.2.9版本中，绝大部分的项目的编译优化选项是/O1（最小体积优先）；部分项目的编译优化选项是/O2（速度优先），如图：

在这里插入图片描述

我们这里来个极限优化。

把/O2和/O1的优化选项都改成/Ox /Os /GS- /GF /GR- /Oy , 为了快速方便的改，这里推荐一个工具grepWin(下载页面：https://sourceforge.net/projects/grepwin/），可以直接对目录进行搜索替换，一步直接到位。

  • 第一步, 需要先将编译选项中的/Oy- 和/GS 分别都去掉，（因为和第二步中的开关冲突了）

    在这里插入图片描述

  • 第二步，把/O2和/O1分别都替换成/Ox /Os /GS- /GF /GR- /Oy

    在这里插入图片描述

途径3：使用VC-LTL来移除基础运行库（省掉2M左右的体积）

这里可能会让人有点儿疑惑， 这个VC-LTL是个什么东西? VC-LTL很NB啊，VC-LTL是一套由国内的初雨团队打造的一套用于链接Windows自带运行库的套件；

简单来说，我们在编写程序的时候，经常会用到memcpy,strcpy类似的函数；通常来讲，在DEBUG的模式或者非/MT下，memcpy,strcpy这一类的函数会直接链接到类似于msvcp100.dll,msvcr100.dll（链接到具体版本的DLL，由编译器的版本决定）这一类的DLL库中，所以当程序调用memcpy的时候，就会实际调用对应模块中的函数。

当程序选择使用/MT编译的时候，这一类函数的就会直接以嵌入到程序中，这就会直接增加程序的体积。然而其实Windows操作系统在发行的时候，这一类的函数的包含库它自己已经携带了。意思就是，操作系统自己有一套自己的运行库。

如果能仔细看到这里，那么想必你已经明白了。VC-LTL干的事情就是，让目标程序也能用上这个Windows自带的库。Windows自带的库的名称为msvcrt.dll，每个版本的Windows的这个库都叫这个名字。

VC-LTL的作用就是将以/MT编译的程序所使用的基础库以/MD的形式链接到msvcrt.dll中。

VC-LTL在Electron中的使用方法：https://zhuanlan.zhihu.com/p/64070741， 该篇中对于添加引用目录的地方不是很详细，这里再做说明。

安装VC-LTL, 并确定当前的Electron所使用的编译器版本，并将VC-LTL引用到Electron；

  1. 在toolchain.ninja中确定SDK和库的版本，例如我这里4.2.9使用的版本是SDK，10.0.17763.0和14.16.27023。为什么要确定？引用VC-LTL需要手动将头文件目录，LIB库目录加入到当前的编译环境中。

  2. 添加VC-LTL的引用；假定你已经正确安装了VC-LTL，并且已经确定了版本号。那么接下来需要将VC-LTL的目录分别添加到toolchain.ninja和electron_app.ninja中。假定VC-LTL的目录在F:\Open_Source\VC-LTL中

    • 处理toolchain.ninja；

      1. 找到rule cc下的/showIncludes，将如下目录添加到/showIncludes后面，
         "-imsvcF:\Open_Source\VC-LTL\config\Vista" "-imsvcF:\Open_Source\VC-LTL\VC\14.16.27023\include" "-imsvcF:\Open_Source\VC-LTL\VC\14.16.27023\atlmfc\include" "-imsvcF:\Open_Source\VC-LTL\ucrt\10.0.17763.0"
      1. 找到rule cxx下的/showIncludes,执行上一步的操作。

    • 处理electron_app.ninja,假定你的SDK安装在C:/Program Files (x86)/Windows Kits/10/lib/10.0.17763.0/um/x86

  • 搜索electron_app.ninja,将/LIBPATH:"C$:/Program$ Files$ (x86)/Windows$ Kits/10/lib/10.0.17763.0/um/x86" 替换为：

       /LIBPATH:"F$:/Open_Source/VC-LTL/VC/VC-LTL-4.0.1.10-Binary-VS2017/lib/x86/Vista" /LIBPATH:"F$:/Open_Source/VC-LTL/VC/VC-LTL-4.0.1.10-Binary-VS2017/lib/x86/Vista/Advanced" /LIBPATH:"F$:/Open_Source/VC-LTL/VC/VC-LTL-4.0.1.10-Binary-VS2017/VC/14.16.27023/lib/x86" /LIBPATH:"F$:/Open_Source/VC-LTL/VC/VC-LTL-4.0.1.10-Binary-VS2017/VC/14.16.27023/lib/x86/Vista" /LIBPATH:"F$:/Open_Source/VC-LTL/VC/VC-LTL-4.0.1.10-Binary-VS2017/ucrt/10.0.17763.0/lib/x86" /LIBPATH:"C$:/Program$ Files$ (x86)/Windows$ Kits/10/lib/10.0.17763.0/um/x86"

    如果你的程序是64位的，那么就引用到64位对应的目录即可。

注意：因为不同的操作系统的附带的msvcrt.dll各不相同，那么很容易存在新编译器支持的特性在老版本的操作系统上不受支持。例如：新版本的vcruntime肯定支持类似于%zu这样的格式控制串，但是老版本的操作系统，例如Win7，甚至老一点儿的Win10所附带的msvcrt.dll不支持该格式控制串。但如果采用常规的方式以/MT的方式编译的话，那么自然没有问题；因为%zu的支持是直接嵌入到程序里面的，因此哪怕是老版本的操作系统也不受链接文件影响。但是VC-LTL的模式天生决定了这个问题不好处理，因此读者在使用VC-LTL的时候应注意相关的问题。

途径4：移除exe的重定位表 （又可以减少2M左右）

熟悉PE结构的读者肯定知道重定位表是个什么东西，其实这个玩意儿就是为了让DLL能够每次都加载到不同的基址上的技术。PE结构中，DLL为了解决DLL默认基址被占用的问题，弄出了一个重定位表；一旦DLL不能被加载到预期的位置上，那么通过重定位表就能重新将变量，函数等调用重新指向对应的位置。

当然现在有一个链接选项就是动态基址的/DYNAMICBASE，所有有时候哪怕DLL的默认基址没有被占用，也会重新定位到新的基址。

上述的东西只是对DLL有限制，Electron是一个单独的exe程序，exe程序是不需要这个重定位表的,因为最先映射的就是exe，所以不存在抢占问题。指哪儿哪儿就是基址。再而Electron的代码体积巨大，也因此这个重定位表的体积也是相当的吓人。看下图：

在这里插入图片描述
这个4.0.0版本的Electron的重定位表体积，就已经达到了惊人的2M+。所以还是移除比较科学。

准备修改编译选项，打开 electron_app.ninja文件：

  • 搜索/FIXED$:NO并替换成/FIXED,（V4.2.9里面有两处）
  • 搜索/DYNAMICBASE并替换成/DYNAMICBASE$:NO

至此编译出来的程序就没有重定位表了，且不会对原本程序有任何影响。

途径5：移除devtools_resources.pak（又可以减少5M左右）

devtools_resources.pak的文件在新版本的Electron目录中已经不能直接被看到了，这个文件被嵌入到了resources.pak中，devtools_resources.pak发行的版本并不需要这个文件，那么完全可以干掉。裁掉之前文件约为8.31M，移除之后文件体积约为2.42M。如图：

在这里插入图片描述

准备修改编译选项，打开 toolchain.ninja文件：

  • 搜索repack resources.pak, 删除该条命令中的gen/content/browser/devtools/devtools_resources.pak，然后保存即可。
  • 执行resources的编译任务;命令行ninja -C out/Release/ resources.pak

其他途径：

  • 删除代码里面的字符串：函数PostTask用到的FROM_HERE宏里面传递了函数名称和代码位置，移除可以使体积略微减小；他的反调试意义大于裁剪意义；（有关于安全保护相关的帖子，请看我的另一篇同系列帖子《Electron源码学习：Electron加密与安全》）
  • 使用7Z极限压缩；当使用7Z极限压缩时，文件的体积可以压缩接近至30%。意思是100M的文件，压缩下来大概为30M左右。
  • 删除目录中非必须的文件，如下：
    1. osmesa.dll,；
    2. locales目录中的不用支持的语言；
    3. d3dcompiler_47.dll；
    4. libEGL.dll和libGLESv2.dll （视使用场景而定）
  • 移除node_modules打包目录中的文件，主要包含如下类型文件：
    1. README.md
    2. AUTHORS
    3. CHANGES.md
    4. LICENSE
    5. SAMPLES
    6. 工程临时文件
    7. 等等非依赖文件
星空漫步者
关注
专栏目录
serverless应用场景探索——基于electron+midway-faas开发ocr工具
小喽喽
09-01 1252
背景简述 之前对serverless做了一些了解，一直在考虑怎么应用到公司的项目中，恰好最近有个小项目，接入了midway-faas做初步实战 项目功能很简单，基于electron 开发一个跨平台的客户端，提供OCR功能，支持截图和第三方软件截图，支持文件上传 设计 研发 electron midway-faas 功能 截图 第三方截图 问题 总结 ...
如何减小electron的安装包大小
热门推荐
前进者
07-16 1万+
一、首先根据上篇文章如何解压electron的app.asar，解压出里面的文件 二、排除无用的node_modules依赖 node_modules文件夹体积为72M，但是这里面的依赖都是开发依赖，并没有生产依赖，所以我们在打包前将其排除在外 三、制作app.asar 将排除了node_modules的业务文件通过“asar pack ./ app.asar”指令压缩成app.asar。 四、组合成完整的Electron程序 将app.asar放在resou...
Electron 应用程序打包体积过大常用的优化方法
q1003675852的博客
12-04 7322
使用 webpack 或 rollup 等模块打包工具可以将应用程序中的多个模块打包成单个文件，从而减少文件数量和大小，从而减小应用程序的打包体积。asar 是一种将应用程序打包为单个归档文件的方法，可以有效减少文件数量和大小，从而减小应用程序的打包体积。如果想通过修改app.asar的扩展名，再用其它解压工具，或者用其它解压工具直接打开，可能会报错。将应用程序的文件进行压缩，可以有效减小文件大小。检查应用程序依赖的模块和库是否真正需要使用，如果不需要，可以将其从项目中移除。来删除未使用的依赖项。
为什么electron占用空间大，而Tauri占用小，他们不都是封装Chromium吗
最新发布
坏蛋阿土的博客
08-15 849
Electron 占用空间大的主要原因在于它包含了完整的 Chromium 浏览器引擎和 Node.js 环境，这些组件本身就很大，且每个 Electron 应用都需要将这些组件打包在一起。Tauri 使用系统自带的 WebView 来渲染界面，而不需要将整个浏览器引擎打包在应用中。这使得 Tauri 应用通常非常小巧，并且由于使用 Rust 编写后端，性能和内存管理更加高效。
Electron源码学习: Electron组成与初始化流程
星空漫步者
07-05 2640
Electron源码学习: Electron组成与结构 前言 ​ 最近研究学习Electron的源码结构已经有一些小的进展, 越接触Electron就越发现组成这个软件的大集合不得了.现在学习到的仍然是这个大集合的冰山一角, 不过还是有必要记录一下. ​ Electron的兴盛无疑是建立在了巨人的肩膀之上. 我们都知道Electron是建立在Node.js上的, 然后Node.js 是建立在V8上的. Node.js社区的是目前最大的开源社区之一, 无疑Electron的起跑线非常高, 再加上V8的强劲
electron 源码加密
10-26
electron 源码加密,可以让自己的项目不轻易被别人修改，保护版权
electron源码下载及编译
u011737099的专栏
01-21 1324
GIT_CACHE_PATH=D:\.git_cache：用于 git 缓存目录，很有必要设置， 因为后面拉取代码量很大、时间很长，中途中断可能性很高，此时缓存的存在就相当救命了。百家云brtc sdk支持全平台，当然也支持electron, electron sdk中的webrtc已经针对性地做了优化，有兴趣的可以查看百家云brtc sdk。electron提供的build-tools工具库下载，结果也是这个错误。不然最后会一直下载不下来，最开始失败的时候，也更改。一个重要报错的修改，
ImageShrink:桌面应用程序可在保持质量的同时最小化图像
05-08
通过优化图像的编码方式和调整其元数据，ImageShrink能够在保持图像原有清晰度和色彩饱和度的同时，显著减小文件体积。 ### JavaScript在ImageShrink中的应用 虽然标题和描述没有明确指出，但根据标签"JavaScript...
Electron对实时图像处理与图像传输的支持
Electron最初是由GitHub开发，用于构建GitHub的桌面客户端，现已成为业界广泛使用的桌面应用程序开发框架之一。 ## 1.2 Electron框架的特点和优势 Electron框架具有以下特点和优势： - **跨平台性**：Electron可以...
"虚假视频检测的DFT-MF深度学习方法和软件实现
软件X 19（2022）101115原始软件出版物DFT-MF：使用嘴部运动和迁移学习增强的deepfake检测Ammar Elhassana，Mohammad Al-Fawa' rehb，Mousa Tayseer Jafara，Mohammad Ababneha，Shifaa Tayseer Jafaraa约旦苏马亚...
electron.zip
03-24
下载后解压到 node_modules / electron npm install electron安装后报错无法运行的小伙伴，说明electron没下载成功 下载后解压到node_modules目录即可，npm install electron安装后无法运行的小伙伴，下载这个electron压缩包，解压到node_modules
Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小
06-09
对应博客地址：https://blog.csdn.net/fukaiit/article/details/91351448 包括Electron无边框窗口原型和核心代码
YOLO算法移植的跨平台适配：实现多平台无缝部署，让你的模型无处不在
!...# 1. YOLO算法简介** YOLO（You Only Look Once）是一种实时目标检测算法，因其速度快、精度高而闻名。它采用单次卷积神经网络（CNN）处理图像，直接输出目标检测结果，无需像传统算法那样生成候选区域或进行多次...
react-electron 项目打包体积尽可能减小的方法
admin9740的博客
07-25 2273
当一个react-electron项目做好之后就可以开始进行打包，首先就是打包react，这个自然不用多说，不过事先要记住一点，项目目录主进程文件main.js最好放在根目录，再执行打包命令 npm run build 　　这个时候目录结构应该是这样 这个时候需要强调的是，react项目已经打包完成，这个时候完全可以只靠main.js主进程文件和build文件...
electron实现软件(热)更新(附带示例源码)
weixin_45062076的博客
02-05 2579
热更新指的是：electron 程序已经开启，在不关闭的情况下执行更新，需要我们把远程的app.asar文件下载到本地执行替换，然而 在electron应用程序中 是无法直接下载app.asar文件的，下载会检查出app.asar文件被占用，所以我们需要在本地将app.asar文件反编译，编译出一个app文件夹，里面有项目所需的所有源码文件，这时通过vue或react打包的渲染进程代码是经过压缩的，但是主进程代码会直接暴露，所以刚好，我们可以将主进程代码做压缩混淆，然后生成一个。
Win10 编译Electron源码
Z-VegetableBird的博客
12-01 2705
1. 环境安装与配置 1.1下载depot_tools工具仓库 1.2安装vs2017c++开发环境 1.3安装Windows SDK 1.4安装Python2.7.17 1.5安装nodejs 1.6设置环境变量 2.拉取代码 3.工程生成与编译构建 3.1生成工程 3.2编译 3.3打包 当需要对 electron 进行删减或逻辑修改以实现个性化的需求时，第一步要做的就是其源码构建环境的搭建。由于涉及 chromium 和 ...
mac/macos上编译electron源码
u011737099的专栏
01-26 1291
下载对应的macos sdk,然后制定electron编译时使用添加对Mac OS X 11.3的SDK的支持在src/electron/build/args/all.gn中添加mac_sdk_path = "$path_to_MacOSX11.3_sdk_folder"SDK可以在https://github.com/phracker/MacOSX-SDKs/tree/master/MacOSX10.14.sdk此处下载趟坑过程。
时隔 3 年，再次编译 Electron 源码，记录下各种花式错误
我的玻璃盒子
02-04 1173
2020 年 11 月份我曾经发过一篇文章，当时纯粹只是为了体验一下编译过程，没什么实际用途。因为当时公司的产品还在使用 CEF，所以后续就没有继续跟进了。过去一两年的时间，公司的产品已经逐渐从 CEF 过渡开始使用 Electron 了，有些原来在 CEF 上的修改，有些场景可能还是有需要在 Electron 上来修改。所以，最近我又重新编译了一次 Electron。这次的编译比 3 年多那次遇到了更多的问题，这里尽可能逐一记录下来，以便后续参考。这次编译的版本是指定了v20.3.12。
electron 编译和源码调试
lpt111111111的专栏
05-28 738
/ 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?// 使用 IntelliSense 了解相关属性。"name": "(lldb) 启动","name": "(lldb) 附加",// 悬停以查看现有属性的描述。1.获取depot_tools。a:buildenv相关路径。6.vscode调试配置。4.release编译。5.debug调试编译。编写buildenv。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值