前端性能优化之Gzip

由于我们团队的前端项目越来越庞大，加之Vue的SPA首屏加载特性，导致系统第一次加载速度越来越缓慢，可能达到几十秒的程度，所以为了优化用户性能体验，我们选择了开启Gzip进行文件压缩，确实达到了显著的效果。

Gzip原本用户UNIX系统的文件压缩，后来逐渐成为Internet最主流的数据压缩格式。

当用户访问我们的web站点时，服务器就将我们的网页文件进行压缩，将压缩后的文件传输到客户端，对于纯文本文件我们可以至少压缩到原大小的40%，这样大大提高了传输效率，页面便可更快的加载出来。

由于目前我们项目是使用ngxin来部署前端的，nginx自带 HttpGzip模块 ， 所以我们直接对 nginx.conf 文件的http配置项进行配置即可。但相对的由于nginx自身处理请求然后压缩返回，会消耗对应的服务器内存。

测试效果

我们应尽可能减少对服务端内存的使用，毕竟服务端的资源是十分宝贵的，这里我们仍然使用nginx进行前端部署，我们在客户端替nginx处理压缩文件这一步 *** 作，nginx便可直接使用我们压缩好的文件，下面是一个基于vue-cli配置的前端项目。

这里最好安装低版本，防止报错。

这里可以根据大家不同的配置，总之就是将webpack插件进行注册。

成功运行后，便可以在打包文件中看到.gz结尾的文件了，将打包后的文件上传到指定的nginx文件夹下。

这里需要nginx对应的插件 http_gzip_static_module ，之前我是通过yum安装的nginx，这里似乎不可以，需要手动安装。这里目录可以根据大家个人情况而定。

安装nginx

修改nginx.conf

启动nginx服务

这里我们虽然服务端js文件夹里只有.gz格式的文件（其他的文件已删除），但客户端却成功读取了。

无论是服务端与客户端进行gzip的压缩，我们都大大缩小了文件体积，给用户带来了更好的体验。

服务端处理gzip优点是只需配置一下即可，无需复杂 *** 作，但缺点是会消耗服务器内存。

客户端处理gzip优点是无需服务器进行文件压缩，减少服务器内存消耗，但配置起来相比服务端gzip会稍加繁琐。

Nginx中文文档

什么是GZIP,有什么优势,如何开启GZIP?

vue-cli4 开发项目中开启gzip压缩，优化打包体积，提升加载速度

Nginx gzip static静态压缩

配置nginx直接使用webpack生成的gz压缩文件，而不用nginx自己压缩

image-conversion 是一个简单易用的 JS 图片转换工具，提供了多种 Image、Canvas、File 和 dataURL 之间的转换方法。

另外，image-conversion 可以指定大小来压缩图片。

1、将图像压缩到 200kb：

2、以 0.9 的质量压缩图像

image-conversion 提供了多种方法来实现 Image、Canvas、File 和 dataURL 之间的转换，如下：

1、imagetoCanvas(image[, config]) {Promise(Canvas)}

将图像对象转换为画布对象。

2、dataURLtoFile(dataURL[, type]) {Promise(Blob)}

将 dataURL 字符串转换为 File(Blob) 对象，相当于把画布的内容转换成blob，type可以设置最终图片的格式。

type的值可以为："image/png", "image/jpeg", "image/gif"

3、compress(file, config) {Promise(Blob)}

压缩文件（Blob）对象。

4、compressAccurately(file, config) {Promise(Blob)}

根据大小压缩文件（Blob）对象。

5、canvastoDataURL(canvas[, quality, type]) {Promise(string)}

将 Canvas 对象转换为 dataURL 字符串，该方法可以进行压缩。

6、canvastoFile(canvas[, quality, type]) {Promise(Blob)}

将 Canvas 对象转换为 Blob 对象，此方法可以进行压缩。

7、dataURLtoImage(dataURL) {Promise(Image)}

将 dataURL 字符串转换为图像对象。

8、downloadFile(file[, fileName])

下载图片到本地。

9、filetoDataURL(file) {Promise(string)}

将 File(Blob) 对象转换为 dataURL 字符串。

10、urltoBlob(url) {Promise(Blob)}

通过图像 url 加载所需的 Blob 对象。

11、urltoImage(url) {Promise(Image)}

通过图片 url 加载所需的 Image 对象。

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧

---