最近我司因业务需求，需要在一个内部数据分析平台集成在线 Excel 功能，既然我们自己就是做开发工具的，所以目光自然就落在了我司自研的前端表格产品上。
项目的目的是要通过数据透视表和 Excel 公式来分析公司的各项运营数据。不过在集成后，在开发环境页面运行流畅，大量数据加载处理也很快。但是发布生产后，在用户每次打开页面时，加载时间上相较开发阶段均有所降低，经过排查速度变慢是由于发布包的vendor.js 变大所导致的，这个文件加载每次都需 300 毫秒左右，由于小的 Vue 项目并没有做模块划分，所以所有的代码都直接打包到了 vendor 中，在集成了新功能后，发布包也随之变大了。
既然找到了原因，我们就开始着手优化，在前端对于需加载较大资源时，我们一般都采用懒加载的方式来优化效率。
懒加载也叫做延时加载，在网页响应时不立刻请求资源，待页面加载完毕或者按需响应时再加载资源，以达到提高页面响应速度以及节省服务器资源的谜底。网页中常用的懒加载是图片的懒加载，对于类似淘宝一样的多图页面，如果等待所有图片都下载完成再响应用不必然造成页面加载的卡顿。对于 JS 资源的加载也是同样的道理，大 JS 的加载会造成 JS 阻塞，页面出现停止响应的假死状态。因此可以通过按需加载的方式，提高页面首屏的加载速度。
一、懒加载技术的一些优势和弊端
优势
一、改进加载性能:图片懒加载可以减少首次加载网页时需要加载的资源量，从而提高加载速度和用户体验。
二、节省带宽:只有当图片进入视口(viewport)时，才会加载图片。这可以节省未浏览的部分的带宽。
三、优化用户体验:通过快速加载网页和内容，用户体验可以得到显著改善。
四、优化服务器负载:延迟加载图片可以减少服务器在短时间内的负载。
弊端
一、不适用于所有浏览器:并非所有的浏览器都支持懒加载，这可能会导致某些用户无法查看图片。
二、SEO问题:一些搜索引擎可能无法正确索引懒加载的图片，从而影响SEO效果。
三、JavaScript依赖:大部分的图片懒加载实现都依赖于JavaScript。如果用户禁用了JavaScript，那么懒加载就无法正常工作。
四、用户体验问题:如果网络连接慢或者处理图片慢，用户可能会看到图片逐渐加载的过程，这可能会降低用户体验。
五、首屏图片加载延迟:如果懒加载的实现没有正确处理，可能会导致首屏的图片加载延迟，影响用户体验。
二、OSS对象存储 与 CDN缓存技术
1、借助于第三方分流运维方案，相当于部署负载均衡，让你的网站服务器减轻压力，分流出去到一些其它地方。
2、一些优势和弊端
优势
一、独立部署，打开视频或者大图片速度快，不影响网站;
二、适应所有浏览器，不局限于浏览器，或者java脚本限制;
三、不影响任何SEO优化;
四、一些大的图片都会这样去部署，因为懒加载最终还是要当前服务器来运行的。
弊端
一、会产生一些流量费用，但是也是非常小的，一年可能几百块钱足够，但是可以让你的网站运行流畅很我，感觉是非常值得
三、综合说明
1、懒加载适合图片较多网站，页面比较长的，通过加载视图来显示可见内容，如果这个加载视图是一个视频，那起不到太大的重要，还是要去加载出来的
2、一般小企业站或者大图视频有几个不多的情况下，建议是可以适合oss+cdn 技术的
