vue打包体积大:加载时间长

加速nginx: 开启gzip和缓存

nginx 是一个高性能的 Web 服务器,之前也写过一些关于 nginx 的文章。为了提高博客的响应速度,可以从设置 nginx 的 gzip 和缓存这2方面入手。为字体开启 gzip 和缓存能大大减少带宽的消耗。

nginx 是一个高性能的Web服务器,之前也写过一些关于nginx的文章。为了提高博客的响应速度,可以从设置 nginx 的 gzip 和缓存这2方面入手。为字体开启 gzip 和缓存能大大减少带宽的消耗。

开启gzip

配置


关于具体的参数说明可以参考nginx 的文档

gzip_comp_level 参数

关于gzip_comp_level的合理值,可以参考下图。来自serverfault


nginx gzip 压缩比

从图中可以看出gzip_comp_level大于2时效果并不是很明显。所以可以将值设置为1或者2。

开启缓存

配置


其中的缓存时间可以自己根据需要修改。

关于字体

为静态资源开启缓存能够较少服务器带宽的消耗,特别是在css中使用字体时,同时配合gzip压缩能够大大减少下载字体造成的带宽影响。

设置字体缓存

需要注意的是,字体有很多格式,为所有字体格式设置缓存是很有必要的。


启用gzip

只需要为 ttf、otf 和 svg 字体启用 gzip,对其他字体格式进行 gzip 压缩时效果不明显。

gzip_typesfont/ttf font/otf image/svg+xml



各种字体类型压缩效果可以参考以下测试结果:


ttf字体压缩效果


otf字体压缩效果


svg字体压缩效果


woff字体压缩效果


eot字体压缩效果

可以看到对 woff 和 eot 进行 gzip 压缩效果不好。

字体总结

扩展名                                               是否压缩                                           Content-type

.eot                                                           否                                     application/vnd.ms-fontobject

.ttf                                                              是                                                      font/ttf

.otf                                                             是                                               font/opentype

.woff                                                          否                                                   font/x-woff

.svg                                                          是                                                image/svg+xml

详见:https://www.darrenfang.com/2015/01/setting-up-http-cache-and-gzip-with-nginx/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容