vue-electron踩坑日记——打包后的体积问题
本文仅针对vue-electron框架下的打包处理,不一定符合您的情况,请自行辨别1.问题描述及原因分析 解决了多窗口界面显示问题,发现每次打包的时间都特别长,可是项目大小也就几M,这种情况太异常了,于是去查看了项目大小,发现是300多M,整整大了十倍有余。 因为项目小,需要的...
本文仅针对vue-electron框架下的打包处理,不一定符合您的情况,请自行辨别
1.问题描述及原因分析
解决了多窗口界面显示问题,发现每次打包的时间都特别长,可是项目大小也就几M,这种情况太异常了,于是去查看了项目大小,发现是300多M,整整大了十倍有余。
因为项目小,需要的依赖不多,按理说打包后的大小不应该超过50M。但打包后的大小超过了300M,说明问题出现在打包加入的依赖太大。原因可能有:1、加入了不该引入的依赖(将devDependencies加入了进来);2、因为多窗口的原因,重复引入了相同的依赖;
2.踩坑过程
虽然知道了可能的原因,但还是无从下手,查阅了一些资料后,决定先找出是什么文件导致项目如此巨大,发现app.asar特别大,然后就去了解了一下asar,asar是electron框架一个简单存档的文件,并可以反编译,于是乎,反编译一下。发现这个文件将整个项目的文件都存档进去了,怪不得会那么大。而且,asar反编译如此简单,那岂不是项目和裸奔没什么区别了?然后迅速去查阅资料…
经过思考和资料,我发现打包过程是错误的,正确的打包过程是:
1、webpack打包src目录的代码至dist/electron
目录
2、electron-builder打包dist/electron
目录的代码
如何去实现第二步呢?
在package.json
文件中有builder
字段是用作electron-builder
配置的
"build": {
// 产品名称
"productName": "Shorthands",
// appid
"appId": "com.example.yourapp",
// 打包地址配置
"directories": {
// 打包输出的目录
"output": "build",
// 需要打包的目录,之前因为这里是“./”导致将整个项目的文件都打包了
"app": "./dist/electron"
},
...
这里有个地方要注意的是在build.app
填写的地址处需要添加package.json
文件,详情可以参考Two package.json Structure
配置完成后,就可以打包了。然后解压app.asar,代码都是经过webpack打包后的压缩版,再也不怕项目裸奔了。
3.思考
虽说经过优化,但项目依然有100M那么大,应该是electron
封装的C++代码,用于调用原生系统API,但项目应该只用了部分,不知是否可以按需打包,有时间再做深入。
更多推荐
所有评论(0)