前端网络加载优化之gzip

一、linux Nginx配置gzip

服务器nginx配置gzip后，客户端若支持的情况下请求将使用gzip协议，这也是判断gzip是否成功的标识

#在nginx的conf配置文件中，配置如下代码即可实现服务端压缩js

server {
    gzip on;  # 开启gzip
    gzip_min_length 1k;  #允许被压缩的页面最小字节数。
    gzip_buffers 4 16k;  #分片大小
    gzip_comp_level 4;  #gzip压缩比。
    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;  #匹配MIME类型进行压缩，text/html默认被压缩。
}

二、vue打包优化

若仅通过nginx实现gzip请求，会导致服务器压力增加，所以需要打包时将.js直接压缩为.gz。客户端请求时，服务器不用再次压缩.js，直接把.gz下发给客户端。

1、打开配置文件

2、 将productionGzip改为true

3、安装依赖包，记得指定版本号，各版本对应的webpack不同（这里以webpack 3.6.0为例）
npm install --save-dev [email protected]

4、安装完成后，npm run build，就会看到打包好的gz文件

5、参照第一步，配置nginx的gzip

三、uniapp摇树优化

摇树优化（Tree-Shaking），顾名思义，摇晃树干，将枯死无用的枝条摇掉，仅保留有用的树枝。对应到框架层面理解，就是一个框架的众多组件和API，可以按需使用，把未引用的框架部分裁剪掉。Tree-Shaking 最早由 Rollup 提出，属于死码删除的一种形式。

//在manifest.js中配置如下代码

	"h5": {
		//开启摇树优化
		"optimization": {			
			"treeShaking": {
				"enable": true
			}
		}
	}

配置完成后，在nginx配置gzip，参照第一步