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,代码就可以正常运行了

相关推荐
10share1 小时前
基于大模型的 i18n 方案:把中文原文当 Key,轻松搞定多语言维护
前端·vue.js
啾咪orJIUMI6 小时前
Vue 3 + 高德地图封装实战:点位、区域、Loca 流光与 Vue 信息窗体
前端·vue.js
FRing037 小时前
vue2干货总结8(路由模块封装、router-link、声明式导航、路由重定向、编程式导航)
开发语言·前端·vue.js·vue2
无懈可击7 小时前
Vue 可视化AI表单设计器 FcDesigner v3.6 版本发布,支持导出 SQL功能!
vue.js·开源·ai编程
徐小夕8 小时前
JitArchives,一款基于JitWord协同AI文档打造的企业级电子档案系统
前端·vue.js·github
头发还在的女程序员10 小时前
基于 Spring Boot + Vue 3 + uni-app 的灵活用工系统:四端架构与业务流程设计
vue.js·spring boot·uni-app·灵活用工·灵工系统
FRing031 天前
vue2干货总结7(自定义指令、插槽、单页应用程序、路由的使用(VueRouter))
开发语言·前端·vue.js·vue2
ruanno_top1 天前
点全选,已选的被清空了:Transfer 三态复选框的三个 bug
vue.js
时间的情敌1 天前
Cesium 加载 3D Tiles 倾斜摄影、压平、样式设置(Vue3 实战)
vue.js·3d·cesium
usdoc文档预览2 天前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑