Nginx启用Gzip/全站CDN加速 _CDN加速

文章插图

前言接触到CDN的起因：
我自己搭建的网站https://price.monitor4all.cn/网页打开的速度一直比较慢，经查证是我的网站有很多静态js大文件，通过浏览器读取这些js比较耗时间。
最近有了一些空余精力，好好优化一下加载速度。
分析思路公用CDN加速公用js库
其实首先想到的是把公共的js库使用公共CDN来加速，比如我的前端用到了echarts，js-cookie等。这些js最开始是放在我自己的服务器上的，我们可以让浏览器直接去读取公共CDN里存放的这些库。
这里使用的是bootcss网站提供的公共CDN，在将这些公共库指向bootcss后，这些js文件加载速度到了100ms以内：
https://cdn.bootcss.com/axIOS/0.18.0/axios.min.jshttps://cdn.bootcss.com/moment.js/2.22.2/moment.min.js

文章插图

文章插图

接下来，我们还剩下一些自己的js文件，这些是前端打包后的js，不能用公用CDN来加速。
这里举个例子，下图中的js达到了1.2m，每次在没有缓存的情况下加载这个Js，浏览器都需要5s以上的加载时间，新用户点击我的网站，都需要盯着空白页这么久，十分劝退，很多用户没等到网页渲染完毕就关了。
如下图，极端情况下，会等到15s以上。

文章插图

image
这是完全不能接受的。
Nginx启用Gzip
接下来我想到的是将js文件大小压缩，毕竟主要是由于文件过大，才导致的传输缓慢。
nginx作为我的反向代理，负责了我服务器对外的服务，我们可以启用nginx的gzip功能，对静态文件进行压缩，包括图片，js，css等。
参考：
https://blog.csdn.net/bigtree_3721/article/details/79849503
按照上面网页的教程，修改nginx的conf 。
gzip on; gzip_min_length 1k; gzip_buffers 4 16k; #gzip_http_version 1.0; gzip_comp_level 2; gzip_types text/plain Application/JAVAscript application/x-JavaScript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary off; gzip_disable "MSIE [1-6].";压缩后，js文件大小减少了很多，这个1.2m的文件，在浏览器端只需要加载500k的压缩js 。
然而，我使用的是1m带宽的云服务器，对于500k大小的js，有时候还是需要3-5s时间来加载，我们还需要想办法继续优化。
对象存储OSS
经过一阵查找，我找到了七牛云，七牛云免费提供10G的OSS存储空间，我的想法是将这个js文件上传上去，拿到文件的链接后，写在前端html中，从OSS读取该JS文件，从而达到加速的效果。