干货必读提升性能：十、静态资源优化

收藏

本帖最后由 Erik.Xue 于 2022-11-4 11:20 编辑

浏览器，作为我们浏览网页比不可少的工具，体验当然也是最为重要的。对于网页中的静态资源，理想中的效果：

1、页面以最快的速度获取到所有必须静态资源，渲染流畅，用户体验也非常棒，这是最理想的效果；
2、服务器上静态资源未更新时再次访问不请求服务器发送对应的资源；
3、服务器上静态资源更新时需要请求服务器获取最新的资源。

那么针对活字格的静态资源优化，我们有什么样的“利器” 呢？接下来就为大家一一介绍。

一、压缩静态资源

有很多小伙伴需要在使用活字格做项目的时候，会用到很多背景图片、图标、图片、视频等。而这些资源就属于静态资源的一部分。

这里先声明一点，浏览器在加载网页页面时，会优先加载“关键资源”，那么什么是“关键资源”呢？

关键资源指的是：页面所需的JavaScript、CSS等脚本文件，浏览器需要它们进行页面的渲染和绘制。

所以像图片、视频等这些资源都要“靠边站”，等待浏览器加载完“关键资源”后，才轮的到这些静态资源开始加载。

所以如果有比较大的图片或视频文件，我们最好在上传至活字格工程前，进行压缩后，然后再上传至工程文件使用。

例如，我们现在有一个需要使用到的图片：大小为906KB。

image.png411885375.png

使用在线压缩网站，这里我选择《适合网页大小》的尺寸，各位可以根据自己网站需要自行设置压缩后的尺寸大小。压缩后，如图：
image.png414423217.png

我们可以看到，之前905KB大小的图片已经压缩到了30KB，压缩比例高达97%！！！是不是效果很明显，相比使用之前大小的图片文件，网页在加载该图片时的速度也会大大提升。

同样的，视频文件也是如此，这里给大家提供两个在线网站，需要的自取：

在线图片压缩：在线图片压缩工具(jpg、jpeg、png、gif、webp、tiff)无损压缩90%-压缩图 (yasuotu.com)
在线视频压缩：在线压缩视频 - 免费安全的视频压缩工具 (compress-video-online.com)

二、字体文件

有很多小伙伴为了美化或个性化自己的网站，会选择下载使用第三方的字体文件，那么字体文件也是属于静态资源的一种，所以字体文件的大小也需要特别注意！！！

字体文件以.ttf为后缀结尾，如下图：
image.png449983214.png

如果我们的字体文件过大，一般不要超过5M大小，如果一定要使用超过5M大小的字体文件，那么最好选择使用压缩版的字体。

注意：字体使用时一定要注意版权问题！！！

三、代码压缩

一般我们在开发工程时，为了扩展功能或实现需求，会引入第三方库或自己的JS文件\CSS文件等。那么代码压缩在此时就排上了用场。

如果需要使用到第三方库，那么在下载时建议使用带有min标识的库文件，如图：
image.png389407348.png

如果使用的是自己的代码文件，可以选择使用在线网站来压缩代码：
image.png112601317.png

这里提供给各位一个在线代码压缩网站：在线 JS/CSS/HTML 压缩 (oschina.net)

四、识别过大的静态文件

已经告诉了各位压缩优化静态资源的方式，那么怎么去识别过大的静态资源文件呢。

步骤非常简单，用浏览器打开自己的页面后，按F12打开浏览器控制台，然后选择《Network》栏，然后根据下列的请求Size从大到小排序，如图：
image.png981419372.png