前端性能优化 - gzip压缩资源

一、举个小例子

图标文件，原图favicon.ico大小1.4KB，打包后dist文件夹里大小为1.12KB，启动本地服务初次加载时浏览器显示大小704B，启动nginx服务初次加载时浏览器显示大小1.4KB。

说明：
1、dist文件夹里大小为1.12KB，webpack的功劳，具体不知。
2、本地服务大小704B，webpack的功劳，具体不知。
3、nginx服务大小1.4KB，nginx获取的原图大小，因为没有正确配置压缩。

二、配置nginx压缩文件

nginx.conf文件需要在配置gzip_types后加上ico对应的文件类型image/x-icon

<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">

由上可知favicon.ico的类型为image/x-icon，在nginx.conf文件中gzip_types追加上对应类型image/x-icon即可。

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 image