前端资源下载优化(ZIP|GZIP)

前端资源下载优化(ZIP|GZIP)

一、Nginx配置

    A、为什么要开启gzip压缩
            因为开启gzip压缩后加载速度更快并且服务器带宽节省
    B、Nginx gzip压缩配置
    C、配置后，nginx -t检查配置文件是否OK，再重启nginx -s reload
    D、检测：请求资源的响应头返回Content-Encoding:gzip标识成功

二、CDN配置

    A、CDN是什么，内容分发网络（Content Delivery Network，CDN）是建立并覆盖在承载网上，由不同区域的服务器组成的分布式网络。将源站资源缓存到全国各地的边缘服务器，供用户就近获取，加载速度快速高效并且降低源站压力。
    B、当CDN配置后，可以在第三方CDN基础上再改善性能优化
    C、CDN Gzip压缩
        1)、开启Gzip压缩功能后，CDN节点会对资源进行Gzip压缩后返回，缩小传输文件大小，提升文件传输效率，减少带宽消耗。
        2)、操作步骤
说明:由于CDN有很多商家都有，这里步骤只说一个阿里云的
        ①在CDN控制台中左侧导航栏，单击“域名管理”，进入页面后，单击目标域名对应的管理。
        ②在指定域名的左侧导航栏，单击“性能优化”，在Gzip压缩区域框中，打开Gzip压缩开关，完成。

三、合理利用cache

    A.HTTP 缓存是在 HTTP 请求传输时用到的缓存，目前基本上http1.1协议都有缓存，可以在nginx配置。检测(返回304是缓存，200是新资源)

协商缓存配置(合理使用，不然需要版本控制或者时间戳)
	location / {
 				 # 其它配置
  					...
  				if ($request_uri ~* .*[.](js|css|map|jpg|png|svg|ico)$) {
   					 #非html缓存1个月
    				add_header Cache-Control "public, max-age=2592000";
  				}
  				if ($request_filename ~* ^.*[.](html|htm)$) {
    				#html文件使用协商缓存
   					 add_header Cache-Control "public, no-cache";
  				}
}

    B.JS缓存，有些平凡的不更新的数据可以存放在sesstionStorage，localStorage,cookie浏览器中（需要合理使用）

四、其他优化

    A.图片优化能压缩的最好压缩
        1)软件：图压 - 简单易用的图片压缩软件 (xinxiao.tech)
        2)压缩说明：能用JPG|JPEG的就用JPG|JPEG格式,不管是JPG和PNG压缩比例尽量不要太模糊
    B.加载过渡页面,loding还是要的
    C.js和css代码该优化的优化