Electron-vue asar 局部打包优化处理方案——绕开每次npm run build 超级慢的打包问题

背景

因为组员对于 Electron 打包过程存在比较迷糊的状态,且自己也没主动探索 Electron-vue 打包细节,导致每次打包过程都消耗 5-6 分钟的时间,在需要测试生产打包时,极其浪费时间,为此针对 Electron-vue 打包的几个环节进行拆解,来减少打包时间,提高开发效率。

什么叫局部打包?

  1. electron 可以分为多个模块

    1. 主进程运行的 node js 代码,虽然 webpack 提供了 target:"node"(node 同步引入模式),但是 electron 自身提供了一些 api,例如 shell,session 等对象都是不能轻易被混淆的,所以这里的 target:"electron-main"

    2. 其他的还有 target: electron-renderer,electron-preload, web,这些就够用了

  2. 因为 renderer,inject,preload 这些东西都是可以单独打包的,所以这些东西甚至可以用多 github 包管理器来管理都行,只要最后塞的位置准确即可,这样不同的源文件可以用不同的 webpack 版本来打包,例如 renderer 源码可以单独用 webpack5 来打包提高速度,或者使用 vite 也行

  3. asar 包是 electron 运行的核心包,electron-builder 把 dist 中的依赖(根据 package.json 中dependencies 参数打包的)全部整合在一个 node_modules 文件夹下,然后连同 dist 一起打包成了 asar 包

    1. node_modules 是可以不塞到 asar 包里的,这样 asar 包体很小,就可以在启动时很快加载,性能提升,目前还未解决该问题

  4. asar 包是纯 js 的,无论是 mac 还是 windows 都是通用的,所以代码快速调试时,更新 asar 包即可

  5. 以上就叫做局部打包,而不是等待整个 electron build 完毕,build 过程是一个很耗费时间的过程,通过局部打包可以将整个过程降低到 30s 以内(机器性能较好的情况下)

讲解视频

补充 asar 知识

Electron 安装包 asar 解压定位问题实战-CSDN博客

关键步骤讲解

wadesk.unpacked 文件夹怎么来的?(雪凯问的)

是通过 package.json 中的 asar 解压命令解出来的,其中 wadesk.unpacked 是我随便起的,我这里是直接用了当前代码库自己 build 时的一个 asar,其实就是为了拿到 node_modules,猜测 AdsPower Global 是将 node_modules 复制到了 resources 目录下,然后 app.asar 包里夹了一个 node_modules 空壳文件夹,解压后,路径就是 \resources\app.asar.unpacked\node_modules,因为空文件夹,不会覆盖原 node_modules 内容,载入内存时就把这个位置也给载入进去了,所以就可以与主代码分离。

主渲独立打包的脚本,electron-vue 都给了

如果使用 webstorm,直接右键执行即可,如果使用 vscode,则运行 npm run pack:main,或者把后面的脚本直接粘贴到控制台执行都行,打出来的包位置就在 dist 那里,假如打的是 main.js,那就在 electron 下面,把 main.js 拷贝到 wadesk.unpacked/dist/electron 对应位置下,同时要搜索一下 main.js 是否有自己写的代码,避免打包失误,没有打成功,造成调试时间浪费

如果你会写脚本,可以自己写个 rebuild 脚本,把三个过程走一遍

运行 pack:asar 将代码重新打回去

打完后拷贝 app.asar 到你的 wadesk 软件安装(注意不是用户数据目录哈),重启 wadesk,代码就可以正常运行了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1539168.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

C++ —— 关于vector

目录 链接 1. vector的定义 2. vector的构造 3. vector 的遍历 4. vector 的扩容机制 5. vector 的空间接口 5.1 resize 接口 5.2 push_back 5.3 insert 5.4 erase 5.5 流插入与流提取 vector 并不支持流插入与流提取,但是可以自己设计,更…

MSF的使用学习

一、更新MSF apt update # 更新安装包信息;只检查,不更新(已安装的软件包是否有可用的更新,给出汇总报告) apt upgrade # 更新已安装的软件包,不删除旧包; apt full-upgrade # 升级包&#x…

深度学习-18-深入理解BERT实战使用预训练的DistilBERT模型

文章目录 1 预训练的BERT模型2.1 单词级的嵌入表示2.2 句子级的嵌入表示2.3 从最顶层编码器层中抽取嵌入表示2.3.1 预处理输入2.3.2 获得嵌入表示2.4 从所有的编码器层中抽取嵌入表示2.4.1 预处理输入2.4.2 嵌入表示3 为下游任务微调BERT3.1 文本分类3.1.1 原理(微调BERT模型)3…

MTK芯片机型的“工程固件” 红米note9 5G版资源预览 写入以及改写参数相关步骤解析

小米机型:小米5 小米5x 米6 米6x 米8 米9 米10系列 米11系列 米12系列 mix mix2 mix2s mix3 max max2 max3 note3 8se 9se cc9系列 米play 平板系列等分享 红米机型:红米note4 红米note4x 红米note5 红米note6 红米note7 红米note8 红米note8pro 红米s2 红米note7pro 红米…

大数据概念与价值

文章目录 引言大数据的概念高德纳咨询公司的定义麦肯锡全球研究所的定义什么是大数据? 大数据的特征Volume(体积)Variety(种类)Velocity(速度)Value(价值)Veracity&#…

OpenCV 1

前言:开新坑辽,, 目录 计算机眼中的图像 视频的读取与处理 ROI区域 边界填充 数值计算 腐蚀操作 膨胀操作 开运算与闭运算 梯度计算 礼貌与黑帽 Sobel算子 梯度计算方法 scharr与laplacian 计算机眼中的图像 灰色图片&#xff0…

微服务——网关路由(Spring Cloud Gateway)

网关路由 1.什么是网关 网关又称网间连接器、协议转换器,是在网络层以上实现网络互连的复杂设备,主要用于两个高层协议不同的网络之间的互连。网关就是网络的关口。数据在网络间传输,从一个网络传输到另一网络时就需要经过网关来做数据的路由…

MYSQL登录失败,确保密码正确,常见问题

今天登录MYSQL时,发现登录不进去,我能确保密码没有错误,并且我昨天以这样的方式登录成功,我已经重启过mysql服务,但是依旧登录不进去。 C:\Users\user>mysql -u root -p Enter password: ****** ERROR 1045 (28000): Access …

(已解决)vscode如何选择python解释器

文章目录 前言解决方案 前言 有的时候可能有不同版本的编译器,以适用不同年份的项目。所以,怎么在vscode中换python解释器呢? 解决方案 对着要运行的python文件进行右键,比如我是要运行main文件,点击那个命令选项版…

为什么7kw交流充电桩主板是充电桩运行的关键

7kw交流充电桩主板是电动汽车充电站中的一个核心组件,负责管理和控制充电过程。它是一种专门为7kw功率设计的交流充电设备的控制中枢,包含了电力电子、微处理器、通信模块等多种元件,以确保安全、高效地为电动汽车提供电能。 7kw与3.5kw主板的…

音视频入门基础:AAC专题(10)——FFmpeg源码中计算AAC裸流每个packet的pts、dts、pts_time、dts_time的实现

音视频入门基础:AAC专题系列文章: 音视频入门基础:AAC专题(1)——AAC官方文档下载 音视频入门基础:AAC专题(2)——使用FFmpeg命令生成AAC裸流文件 音视频入门基础:AAC…

【CSS in Depth 2 精译_034】5.4 Grid 网格布局的显示网格与隐式网格(下)

当前内容所在位置(可进入专栏查看其他译好的章节内容) 第一章 层叠、优先级与继承(已完结) 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位(已完结) 2.1 相对…

在 React 中模拟输入

需求 与 Bug 项目的 C# 桌面端使用 CefSharp 内嵌了一个三方网站,在外部实现了一个登录控件,外部登录后希望内嵌的三方网站自动登录,实现代码如下: browser.ExecuteScriptAsync($"document.getElementsByName(username)[0]…

Etcd权限认证管理

1 查看是否开启权限认证 ctl auth status 2 开启权限认证 ctl auth enable。开启后每一条命令都要加上用户 --userroot:root(root默认最高权限) 3 创建其他用户 ctl user add user1 --user用户名:密码 4 创建角色 ctl role add testR --user 5 为角色添加权限 ctl role g…

Linux基础命令——文件系统的日常管理

目录 一.如何查看当前工作目录?(你现在所处的位置路径) 二.命令touch的用途是什么?还有别的方法新建文件吗? (1)创建空文件 (2)如果已经存在这个文件,就会更新创建时间。 (3…

优化器与现有网络模型的修改

文章目录 一、优化器是什么二、优化器的使用三、分类模型VGG16四、现有网络模型的修改 一、优化器是什么 优化器(Optimizer)是一个算法,用于在训练过程中调整模型的参数,以便最小化损失函数(Loss Function&#xff09…

【论文阅读笔记】YOLOv10: Real-Time End-to-End Object Detection

论文地址:https://arxiv.org/abs/2405.14458 文章目录 论文小结论文简介论文方法为NMS-free训练的一致性双标签分配双标签分配一致性匹配度量 效率-精度整体驱动的模型设计效率驱动模型设计轻量级分类检测头Spatial-channel 解耦下采样Rank-guided block design 精度…

linux 操作系统下的dhclient命令介绍和案例使用

linux 操作系统下的dhclient命令介绍和案例使用 dhclient 是 Linux 系统中用于动态主机配置协议(DHCP)客户端的命令。它的主要功能是从 DHCP 服务器获取网络配置,包括 IP 地址、子网掩码、默认网关和 DNS 服务器等信息 dhclient 命令概述 …

transformer共享权重对联模型

嵌入维度512,8头,1层 |分割中最从左到右依次是数据集上联,模型预测下联,数据集下联 ,有些对联对的还是可以的 嵌入维度512,8头,3层,最后一个输出层采用线性层,模型训练过程 上面是模型训练过程,下面是模型训练结果 从左到右,上联,模型生成,下…