前端加载性能优化

最新推荐文章于 2024-06-20 09:42:37 发布

mania_yan

最新推荐文章于 2024-06-20 09:42:37 发布

阅读量432

点赞数 9

分类专栏：前端文章标签：前端性能优化

本文链接：https://blog.csdn.net/yyw794/article/details/135252225

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

网站性能优化分2个目标

更小的传输体积
更快的传输速度

更小的传输体积

图片压缩

使用tinify进行图片压缩

为什么选择tinify？

参考： TinyPNG – Compress WebP, PNG and JPEG images intelligently

采用例如tinify工具对png和jpeg进行压缩，在效果肉眼无法区分的情况下，可以降低体积

npm run build时，webpack也会对超过244KB的文件进行warning，提醒你缩减体积。

批量压缩

这里采用脚本批量压缩。

获取API KEY。

在官网注册一个，然后通过邮件里的链接获取API KEY

官方通过这个方式限制500次调用，达到商业变现的能力。

python脚本实例

import tinify
from pathlib import Path

tinify.key = "XXXXXXXXXXXXXXXXXXXXXXXXXX"
for img_type in ("png", "jpg"):
  all_imgs = Path("./src").glob(f"**/*.{img_type}")
  for each in all_imgs:
    print(each)
    source = tinify.from_file(each)
    source.to_file(each)

在前端的根目录运行它，例如 python tools/tinify/tinify_all.py

文字压缩

nginx采用gzip压缩

我们的网站通过nginx进行发布，对于文字类文件，采用gzip压缩可以较大的降低文件体积。

nginx的gzip配置参考，Module ngx_http_gzip_module

我们的gzip配置为

    gzip on;
    gzip_vary on;
    gzip_comp_level 6; #default 1， large is better， but cpu load increase
    #gzip_min_length 1k; #default 20
    gzip_proxied any;
    #gzip_buffers 4 16k;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css  application/json  application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;