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以内