背景

前端拿到的设计给的图片过大或者项目里本身需要展示的图片就比较多，特别现在网站往往流行的都是大图片大视频的情况下，那么多而大的图片和视频导致网页加载缓慢的问题，不靠后端，前端有哪些优化方案呢？

压缩图片

图片的话，可以选择无损压缩图片的方式，也就是压缩后不怎么影响用户观感和图片清晰度。
可使用TinyPng，不过是要收费的,具体可上网查看。

不过我这里使用的是一位掘友自己封装的一个插件，因为自己练习暂且试了试这位掘友的插件，不过平常中来真格的运用到项目中，就需使用官网的。这是这位掘友的文章：图片不压缩，前端要背锅 他的插件使用做法大概如下:

首先安装yx-tiny; 无损压缩。
npm i yx-tiny -D

运行 npx tiny  ,选择项目放图片的文件夹，然后再选择全量。就开始压缩了。

可以看到有97张图片可压缩，并且压缩成功。

压缩完成，可以看到体积从48.7MB缩减到13.6MB，减少快4倍，压缩后的图片会覆盖之前的的图片，所以项目里之前引入的压缩前图片名路径什么的都不用改变。

压缩完成后，再次执行之前的操作会提示找不到可压缩的资源。  证明之前图片文件夹里面的图片已经全部压缩完成。

视频加载缓慢优化

当有很多大视频半天下载不出来时，有一种种法可以优化用户体验，利用video的一个自带的属性 poster，如下：

<video width="100%" height="100%" autoPlay={true} loop muted playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" poster={mobile_aboutMimo_top}>

           <source src={video_top} type="video/mp4" />

              您的浏览器不支持视频。

 </video>

在加载出视频文件之前，先显示的是一张图片，直到视频文件加载完成再显示此视频。

总结

以上就是我目前项目里遇到的因大量的图片和视频导致网页加载缓慢又不想依赖后端的问题以及几个简单的优化方法。
图片那个官网是收费的，所以我就用了那个掘友的插件试了试。
后续实践了更好的优化方式，会继续补充。或者你们有什么其他好的优化方式，欢迎留言哦。