An overview of the
In the construction of Electron App based on Umi — from 0 to 1, after packaging with Webpack + Electron-Builder, the final generated dist package is too large, which will affect the user experience when the application is downloaded or updated.
Electron – builder version
The Electron-Builder versions mentioned in this article are all ^22.10.15.
Package file analysis – simple engineering
Before optimizing the packaged files, first of all, we need to analyze what the packaged files have and how much space they occupy to find the breakthrough point of optimization. In order to prevent the interference of other factors, we first try the simplest electron engineering.
electron-quick-start
Thank you for theelectronOfficial quick start templateelectron-quick-start, the structure and content of this template is very simple, and there is no integration of third-party dependencies. The directory structure and package.json are shown below:
Based on this template, we introduce Electron-Builder as the packaging tool and make a simple configuration, as shown in the figure below:
Compare the packaging volume with the two packaging commands
Electron – builder – dir, electron – builder
First, build an unpacked dir using the electron-builder –dir command. A package built using this command will generate fewer files than a package built using the electron-builder command directly. The most space-consuming package is the.exe installer. The comparison chart is as follows:
As you can see from the figure, the.exe program is 55.9MB in size.
Let’s compare the overall size of the dist bundle:
As can be seen from the above two comparison pictures, the volume difference between the two packages after packaging is 56MB, mainly due to the difference in the Setup.exe file.
PS: Electron-Builder command line interfaceCommand Line Interface (CLI).
The volume of the most basic Electron project has already reached 231MB, so the actual project is probably only a little more.
The directory structure of the package file
Mainly look at.exe files and asar files.
.exe file
The electron.exe executable that we run is actually a file that has already been compiled. Its function is to load the contents of the resources/app.asar file, including the location of the entry file, from the main field of package.json packaged in app.asar.
All the packaging tool needs to do is change the electron.exe file to the icon, author, version, etc. (
What you don’t know about Electron II: Learn about Electron packing)
The.exe file for the simplest electron project at its simplest is 125MB
Asar file
ASAR is a package of source code. By default, the source code is placed in the resources/app directory and is visible in clear text. ASAR is a very basic encryption of the source code, so that others can not easily find your source code.
As you can see from the figure, the ASAR file for this simple Eletron project is only 54KB. The actual project will have more code logic than the empty project, so the volume of the ASAR will be larger.
useasar extract app.asar ./appThe command unzips the ASAR file. The directory structure after unzips is as follows:
ASAR node_modules contains only dependencies, not devDependencies. Development dependencies are not packaged in ASAR. The diagram below:
Compare this to the development directory:
The code files for the main process and the renderer process are copied into the ASAR package as is. To be clear, ASAR does not obfuscate and encrypt the code, and you can still see the original code logic when you unzip it.
Package file analysis – complex engineering
basic-electron-umi-app
The difference between this project and Electron-Quick Start is that this project integrates UMI, Ant-Design, React and other dependencies. Moreover, the packaging method is also very different from that of Electron-Quick-Start, as shown in the following figure :(See more detailsElectron App is built based on Umi — from 0 to 1)
Web application packaging volume
Use umi dev, the built-in umi packaging command, to package the web application. The resulting packaging folder build size is shown in the figure below:
As you can see from the figure above, the packaged size of the Web application is 3.73MB.
Electron – builder — dir packaging
First, use electron-builder –dir to build Unpacked dir, and the resulting packaging folder size is shown as follows:
As you can see from the figure above, the size of the dist folder packaged with Electron-Builder –dir is 347MB. When Electron-Builder is packaged, it copies the packaged Web application folder Build directly into the dist folder. Remove the 3.73MB of the Web application package, and the dist package is 343.27MB, which is 100+MB more than the Electron-Quick-Start file packaged with Electron-Builder –dir.
Electron – builder package
The size of dist packaged with Electron-Builder is shown in the figure below:
The size of the generated.exe file is shown below:
Compared with the Electron-Quick-Start project packaged with Electron-Builder, the setup. exe file is 20+MB more and the dist package is 100+MB more.
The directory structure of the package file
Mainly look at.exe files and asar files.
.exe file
I didn’t expect… Basic-electron-umi -app and electron-quick-start.exe files are exactly the same size… Is 125 MB.
ASAR file (find optimization breakthrough!!)
The ASAR package size of Basic-Electron-Umi-App is 171MB larger than the ASAR package size of Electron-Quick-Start, which is 170+MB larger than the ASAR package size of Electron-Quick Start.
useasar extract app.asar ./appThe command unzip the ASAR file, and the directory structure after unzip is as follows:
The ASAR package contains: Web application package file build, Electron main process file, node_modules, package.json.
The build package and main.js together take up 3MB+ of space. Node_modules size 166MB!! Looks like the reason for the large size of the ASAR pack has been found.
The directory structure in node_modules looks like this:
Too long to cut through, look at package.json:
These dependencies are already packed into the build package when you package a Web application using Webpack, and are compressed and muddled. It seems that Electron-Builder packages all the dependencies of web applications again without doing anything about it.
Electron-builder packages the output information
You can see from the figure that Loaded Configuration reads the configuration in package.json. If you can separate the Web application from Electron’s package.json, you can avoid this problem. Electron-builder just happens to support a double package.json structure.
Optimal path
Refer to the Electron-Builder official document Two Package. json Structure (Chinese version: Double Package. json Structure) to modify the Structure and related configuration of the basic-umi-electron-app project.
Create a new app folder
Create a new app folder in the project root directory.
Public/main. Js — — > app/main. Js
Move the main.js file that was placed in the public directory to the app folder.
app/package.json
Create a new package.json file in the app folder.
- Add some description information in the package.json file by referring to the Electron-Builder official documentation Configuration
- Install Electron and Electron-Builder as development dependencies
- Configure Electron App main entry file, home page and script commands
- Do a simple configuration of Electron-Builder.
The specific configuration is shown in the figure below:
Add Electron-Builder configuration to app/package.json
Added one more configuration than before:
-
Main.js: The previous Main.js folder was placed in the public folder. Webpack packaging will copy all the files in the public folder into the build package, but this is also possible. However, in order to separate Electron from the structure of web application more clearly, we moved main.js into the app folder and configured files. When the Electron-Builder is packaged, the configured files in the files will be copied to the ASAR file.
Webpack packaging configuration changes
-
OutputPath: The configuration of Electron-Builder is moved to package.json in the app folder, so it is also necessary to change the packaging output path of the Web application to the app folder, otherwise the build folder cannot be found when the Electron-Builder is packaged, and an error will be reported
App /main.js content changed
Changes to main.js include changes to content in addition to file location movements. The previous main.js was copied into the build folder when Webpack was packaged, and main.js is in the same folder as index.html. Now use Electron-Builder to pack main.js and build packages into ASAR files at the same time. Main.js and index.html are not in the same folder, so the filePath of loadFile needs to be changed to${__dirname}/build/index.html../package.json
A package.json modification in the project root directory.
Electron – builder
- Removed Electron-Builder development dependency packages
- Removes Electron-Builder packaging command, configuration information
Electron start command
- Considering that both the Web application and Electron processes need to be started at the same time in the development process, the Electron startup script is not removed, but the Electron startup file path is modified by
public/main.jsInstead ofapp/main.js, see the following figure:
Packaging process
- Package your Web application with Webpack. Execute it in./package.json
yarn buildCommand. -
Use Electron-Builder to package desktop applications. Execute the dist-win32 command in./app/package.json.
The directory structure of the package file
.exe file
The basic-electron-umi-app.exe file size is 112MB. 13MB less than before optimization (125MB).
Asar file
The ASAR file size is 3.73MB. This is 167.27MB less than the pre-optimization (171MB).
The directory structure of the unzipped ASAR file is as follows:The overall size of the dist package changes
The overall dist package is 186MB smaller than the 404MB before the optimization.
The warehouse address
-
https://gitee.com/llj_8098/basic-electron-umi-app
The resources
- What you don’t know about Electron II: Learn about Electron packing
- Electron packaging optimization – from 393MB to 161MB