An overview of the
In Umi based Electron App construction — from 0 to 1, after using Webpack + electric-Builder package, the final generated DIST package is too large, which will affect 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 project
Before optimizing the packaged files, first of all, we need to analyze what the packaged files have, how much space they occupy, and find the breakthrough point of optimization. To prevent interference from other factors, let’s first try the simplest electron project.
electron-quick-start
Thank you for the electron quick start template officially provided by Electron. The structure and content of this template are very simple, and no third-party dependencies are integrated. The directory structure and package.json are shown below:
On the basis of this template, introduce the electron Builder as a packaging tool and make a simple configuration, as shown in the picture below:
Compare the packing volume by using two packing commands
Electron – builder – dir, electron – builder
First, use the electric-builder –dir command to build unpacked dir. The package that is constructed using this command will generate several fewer files than the package that is typed using the electric-Builder command directly. Among them, the installation program of.exe occupies the largest space. The comparison diagram is as follows:
As can be seen from the figure, the size of the exe program reaches 55.9MB. Let’s compare the overall size of the DIST package:
As you can see from the two comparisons above, the difference in package size between the two methods is 56MB, mainly in the setup.exe file. Ps: electron builder Command Line Interface For details, see the Command Line Interface (CLI) official document.
The volume of the most basic electron project has already reached 231MB, so the actual project may be much more.
Directory structure for packaging files
Mainly look at.exe files and ASar files.
.exe file
The electron. Exe executable we’re running is actually a compiled file. 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 the package.json package in app.asar. All the packaging tool needs to do is modify the electron. Exe file with the icon, author, version, etc. (What you don’t know about Electron (TWO) : Learn about Electron packing)
The.exe file size for the simplest electron project is 125MB
Asar file
Asar is a package of source code. By default, the source code is placed in the Resources /app directory in clear text. Asar is the most basic source code encryption, 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 asAR will be larger. Use asar extract app.asar./app to extract the asar file.
Node_modules in ASAR contains only dependencies, not devDependencies. The diagram below:
Compare this to the development directory:
The main process and renderer code files are copied to the ASAR package as is. To be clear: ASAR does not obfuscate the code, and you can still see the original code logic when you unzip it.
Package file analysis – complex engineering
basic-electron-umi-app
This project is different from the electron quick start project in that it incorporates UMI, ant-design, react and other dependencies. Besides, the packing method is also very different from that of the electron quick-start, as shown in the figure below :(for more information, see Umi building the electron App — from 0 to 1)
Web application package volume
Umi’s built-in packaging command umi dev is used to package web applications. The size of the generated packaging folder build is as follows:
As you can see from the figure above, the web application package volume is 3.73MB.
Electron – builder — dir packaging
The electron builder –dir command is first used to construct unpacked dir, and the final generated packing folder dist size is shown as the figure below:
As you can see from the image above, the dist folder packed with the electron builder –dir is 347MB. In the electron builder package, the web application package folder build is directly copied to the dist folder. The dist package size is 343.27MB, which is 100+MB more than the auto-quick-start package using the auto-Builder –dir.
Electron – builder package
The dist size after using the electron Builder package is shown as follows:
The size of the generated.exe file is as follows:
Compared with the electron-quick-start project, the setup. exe file is 20+MB more and the dist package is 100+MB more.
Directory structure for packaging files
Mainly look at.exe files and ASar files.
.exe file
It didn’t occur to me that… Basic-electronic-umi-app is the same size as the electronic-quick-start. Exe file… Is 125 MB.
Asar file (find optimization breakthrough!!)
The asAR packet size of basic-electronic-Umi -app is 171MB, which is 170+MB larger than the asAR packet size of electronic-quick-start. What’s the difference? Use the asar extract app.asar./app command to extract the ASar file.
The ASAR package contains the following web application package file build, electron main process file, node_modules, and package.json. The build package and main.js take up 3MB+ space. Node_modules size 166MB!! It looks like the reason for the large size of the ASAR package has been found. The directory structure in node_modules looks like this:
It’s too long to complete. Let’s look at package.json:
These dependencies are compressed and obfuscated when you package your Web application with WebPack. The superelectron Builder package also packages the Dependencies of the Web application without any processing.
Electron – Builder packages the output information
As can be seen from the figure, loaded Configuration reads the configuration in package.json. This problem can be avoided if the Web application is separated from Electron’s package.json. The electron builder just happens to support a double package.json structure.
Optimal path
Refer to Two Package. json Structure (Chinese version: double package.json Structure) of the electron builder official document to modify the Structure and related configurations of the basic-UMI -electron- APP project.
Create an APP folder
Create an app folder in the project root directory.
Public/main. Js — — > app/main. Js
Move the main.js file from the public directory to the app folder.
app/package.json
Create a package.json file in the app folder.
- Add some description information to the package.json file by referring to configuration, the official electron builder document
- Install electron, electric-Builder as a development dependency
- Configure the electron app main entrance file, home page, and script command
- Do a simple configuration on electron- Builder.
The specific configuration is shown in the figure below:
Add the electron Builder configuration to app/package.json
A configuration has been added compared to the previous one:
- Main. js: The previous main.js folder was placed in the public folder. When webPack is packaged, all files in the public folder will be copied to the build package, which is also possible. However, in order to distinguish electron from web application structure more clearly, move main.js to app folder and configure files. When the electron- Builder package, the files configured in files will be copied to asAR file.
Webpack configuration changes
- OutputPath: The configuration of electronic-Builder has been moved to package.json under app folder, so you also need to change the package output path of The Web application to app folder, otherwise an error will be reported if the build folder cannot be found during the package of electronic-Builder
App /main.js content modification
Changes to main.js include changes to the content as well as the file location. The previous main.js file was copied to the build folder when webpack was packed, and main.js and index.html were in the same folder. Now use the electron Builder to pack main.js and build into the ASAR file at the same time, main.js and index.html are not in the same folder. So loadFile filePath needs to be changed to ${__dirname}/build/index.html.
./package.json
Package. json changes in the project root directory.
Electron – builder
- Removed the electron builder development dependency package
- Remove the electron- Builder package command and configuration information
Electron start command
- Considering that both the Web application and the electron process need to be started at the same time during the development process, the electron startup script is not removed, but the electron startup file path is modified from
public/main.jsInstead ofapp/main.js, as shown below:
Packaging process
- Use WebPack to package Web applications. Execute in./package.json
yarn buildCommand. - Package desktop applications using electron- Builder. Execute in./app/package.json
dist-win32Command.
Directory structure for packaging files
.exe file
The size of the basic-electron-umi-app.exe file is 112MB. 13MB less than before optimization (125MB).
Asar file
The ASAR file size is 3.73MB. 167.27MB less than before optimization (171MB). The directory structure of asAR files after decompression is shown as follows:
The overall size of the DIST package changes
Compared with 404MB before optimization, the overall dist package is reduced by 186MB.
The warehouse address
- Gitee.com/llj_8098/ba…
The resources
- What you Don’t know about Electron (II) : Learn about Electron packing
- Electron packing optimized – from 393MB to 161MB