2021.09.18前端uniapp打包发布后gzip成倍压缩方案

开局一个引用原文链接&＃xff1a;https://blog.csdn.net/qq_43363884/article/details/108195408。

上面此文章讲到自动化压缩并加载的时候解压包。

本文主要介绍手动压缩打包后的大文件&＃xff0c;然后加载的时候解压包。

一、遇到问题。

        打包发布后&＃xff0c;发现打包的文件有点偏大不理想。比如本人做的一个H5项目&＃xff0c;就一个社保的单独缴费页面&＃xff0c;使用了uni框架搭建&＃xff0c;然后使用 uview 组件库&＃xff0c;打包后是1.3M&＃xff0c;客户嫌弃加载时有点慢&＃xff0c;因为他说不是所有的手机网速都很快加载那1.3M。&＃xff08;客户就是客户&＃xff0c;行还是你行啊。&＃xff09;

        为什么要使用框架和组件库&＃xff1f;为什么自己写个 html 加js就完事&＃xff1f;因为本人属于一半设计师&＃xff0c;就算是表单&＃xff0c;也喜欢很酷的动效&＃xff0c;只有组件库能更快实现&＃xff0c;框架能更效率的实现和管理代码封装。那这里就不直接使用上面链接的 vue 压缩办法了&＃xff0c;知道原理就行了。看打包后的文件。

如图1-1&＃xff1a;

&＃xff08;图1-1&＃xff09;

        整个打包后的H5文件夹&＃xff0c;1.3M&＃xff0c;这两个js就占了1.1M。

二、解决问题。

        下载一个7-zip的压缩工具&＃xff0c;本人在这之前从未使用过7zip&＃xff0c;一直使用的是带广告的rar&＃xff0c;限制突然发现这玩意&＃xff0c;好像比 rar 好用&＃xff0c;有可能是错觉。

7-zip官网地址&＃xff1a;https://www.7-zip.org/

         然后使用手动对这两个 js 文件进行压缩成 gz 尾缀的压缩包&＃xff0c;还可选压缩等级。

如图1-2、1-3&＃xff1a;

(图1-2)

 (图1-3)

        压缩后整体文件夹大小为600K&＃xff0c;可行&＃xff0c;600K都加载不了那这个需求做不了。

        接下来在 nginx 的配置文件 nginx.conf &＃xff0c;在 server 上面输入 gzip_static on; &＃xff0c;打开gzip加载和加后解压。

效果如图 压缩前1-4、压缩后1-5&＃xff1a;

&＃xff08;图1-4&＃xff09;

&＃xff08;图1-5&＃xff09; 

 三、总结

 就是下载7-zip&＃xff0c;把大文件压缩成gz压缩包&＃xff0c;nginx 打开加载gz压缩包开关。就是这么简单且神奇。