A link to quote the original text at the beginning: https://blog.csdn.net/qq_43363884/article/details/108195408.
The above article talks about decompressing the package when it is automatically compressed and loaded.
This article mainly introduces manually compressing and packaging large files, and then decompressing the package when loading.
1. Encountered a problem.
After packaging and publishing, it was found that the packaged file was a bit too large and not ideal. For example, an H5 project I made was a separate payment page for social security, built using the uni framework, and then using the uview component library. After packaging, it was 1.3M. The customer disliked the slow loading time, because he said that not all mobile phone network speeds Both loaded that 1.3M very quickly. (A customer is a customer, so you can do it.)
Why use frameworks and component libraries? Why write a html and add js by yourself? Because I belong to half of the designers, even if it is a form, I also like cool animation effects. Only the component library can realize it faster, and the framework can realize and manage code packaging more efficiently. Then don't directly use the vue compression method linked above, just know the principle. See the packaged files.
As shown in Figure 1-1:
(Picture 1-1)
The entire packaged H5 folder is 1.3M, and these two js account for 1.1M.
Two, solve the problem.
Download a 7-zip compression tool. I have never used 7zip before. I have always used rar with advertisements. I suddenly found this thing, which seems to be easier to use than rar. It may be an illusion.
7-zip official website address: https://www.7-zip.org/
Then manually compress the two js files into a compressed package with a gz suffix, and you can also choose the compression level.
As shown in Figure 1-2 and 1-3:
(Figure 1-2)
(Figure 1-3)
After compression, the overall folder size is 600K, which is feasible, but if 600K cannot be loaded, then this requirement cannot be met.
Next, in the nginx configuration file nginx.conf, enter gzip_static on; on the server to enable gzip loading and decompression after adding.
The effect is shown as 1-4 before compression and 1-5 after compression:
(Figure 1-4)
(Figure 1-5)
3. Summary
It is to download 7-zip, compress the large file into a gz compressed package, and nginx opens the switch to load the gz compressed package. It's that simple and amazing.