react-electron 项目打包体积尽可能减小的方法
当一个react-electron项目做好之后就可以开始进行打包,首先就是打包react,这个自然不用多说,不过事先要记住一点,项目目录主进程文件main.js最好放在根目录,再执行打包命令
npm run build
这个时候目录结构应该是这样

这个时候需要强调的是,react项目已经打包完成,这个时候完全可以只靠main.js主进程文件和build文件夹就可以运行起来我们的项目,换句话说,剩下的文件与打包electron没有任何关系,甚至可以直接删除,但是毕竟是项目源代码,肯定是不建议删的,此时可以随便新建一个文件夹,将main.js文件和build文件夹拷贝过去,package.json最好也复制过去
然后此时的package.json文件里面的dependencies肯定留有大量在开发过程中保留的依赖,这就是打包之后体积巨大的一个主要原因。解决方法很粗暴,直接删除这一项里面的数据,变成这样

"devDependencies”里面也删掉

这个时候在新文件夹一次在安装一次和electron有关,你在main.js主进程里才用得到的依赖(这步很重要,其实说白了就像是在一个新文件夹初始化一个electron项目一样)
npm install electron -dev-save
npm install electron-store -dev-save
....
然后安装打包工具
npm install electron-packager -dev-save-g
然后开始打包,注意:打包时候控制台一定要以管理员身份运行,不然会报错
electron-packager ./ HHH--win32 --out --electron-version 5.0.4"
解释一下这条命令:
./ 你的项目所在目录(注意是这个新文件夹,而不是你的那个react-electron完整项目文件夹,弄错前功尽弃)
HHH 生成的程序包名称
--win32 打包的平台
其余的都是些可选配置,详细的可以去看electron-packager官方
然后就打包完成,此时打包出来的文件夹只有150M左右,再使用相关打包软件制作成exe安装包,体积有望压缩到100M以内
react-electron 项目打包体积尽可能减小的方法的更多相关文章
- Java项目打包工具安装失败解决方法
在学习Java的时候我们打包项目但遇到例如以下情况:(提示没有找到java的执行环境! ) 网上眼下有两中的解决方式: (1)选择本地jdk环境; (2)下载Download 可是第一种选择本地老是失 ...
- 在IDEA中将SpringBoot项目打包成jar包的方法
SpringBoot项目无需依赖tomcat容器(内含)就可以发布,现在将打包步骤记录一下: 1. 打包前确认项目可以正常运行,打开Project Structure 快捷键 Ctrl+Shift+A ...
- 基于vue脚手架的项目打包上线(发布)方法和误区
最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...
- Android Studio将项目打包成apk
Android Studio将项目打包成apk 第一种方法:适合自己调试用. (1)直接在项目中生成: (2)位置是在你的项目中 第二种方法:适合发布应用. (1)找到Generate Signed ...
- 【Java】在IDEA中将Javafx项目打包成为可运行的.jar文件
在使用Javafx制作一个图形化界面程序的时候,我遇到了打包文件的难题. 按照网上给出的解决方案构建出来的jar文件总是没有办法运行. 以下是我最终的解决方案. 我使用的IDE是IntelliJ ID ...
- electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 子进程管理 electron教程(三): ...
- electron 项目的打包方式,以及 jquery 插件的修改使用
< 一 > 应用打包 1,首先确定安装了 node 和 npm 2,全局安装打包依赖 => npm i electron-packager -g 3,打包命令 electron-p ...
- Electron – 基础学习(3): 项目打包成exe桌面应用 之electron-builder
前次用 electron-packager 打包成功,这次改用 electron-builder 打包,然后根据项目中实际需要进行选择使用. 第一步:全局安装 electron-builder,便于系 ...
- Electron+Vue – 基础学习(2): 项目打包成exe桌面应用
项目创建完成,启动正常,接下来就是项目打包了.将测试Demo打包成exe桌面应用,点击exe文件,运行项目. 书接上文,创建项目有三种方式 Git拷贝.直接创建:通过electron社群提供的命令行工 ...
随机推荐
- 【C++】位运算实现加减乘除
#include<iostream> #include<assert.h> using namespace std; // 位运算实现加减乘除 int myAdd(int nu ...
- Hbuilder的使用技巧
/*注:本教程针对HBuilder5.0.0,制作日期2014-12-31*/创建HTML结构: h 8 (敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲h t Enter)中途换行 ...
- docker安装 2016-11-06 19:14 299人阅读 评论(31) 收藏
Docker支持运行在以下CentOS版本: CentOS 7.X 安装在二进制兼容的EL7版本如 Scientific Linux也是可能成功的,但是Docker 没有测试过并且不官方支持. 此文带 ...
- 手动实现一个form组件
最近研究了一下element-ui,想着手动实现一下里面的form组件,贴个组件里面的代码 <el-form :model="ruleForm" status-icon :r ...
- Auto CAD 安装问题 “acad.exe - 系统错误 ”
Auto CAD 安装不上,提示“cad装不上 提示无法启动此程序,因为计算机中丢失 ac1st16.dll” 解决方法: 我的电脑——>右键 属性——>高级选项卡(win7的是高级系统设 ...
- Vue组件跨层级通信
正常组件间通信 父->子组件 是通过属性传递 子->父组件 是通过this.$emit()传递 this.$emit()返回的是this,如果需要一些值 可使用callback方式传递 p ...
- 修改eclipse默认注释
windows-->preference-->Java-->Code Style-->Code Templates -->Comments :注释--> ... 关 ...
- 自定义View系列教程06--详解View的Touch事件处理
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
- POJ1664 放苹果
#include <iostream> #include <cstdio> #include <cstring> using namespace std; int ...
- 容器安全拾遗 - Rootless Container初探
摘要: Docker和Kubernetes已经成为企业IT架构的基础设施,安全容器运行时越来越被关注.近期Docker 19.03中发布了一个重要的特性 “Rootless Container”,在提 ...