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 解压定位问题实战-优快云博客

关键步骤讲解

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