看完这一篇，再也不用为【前端性能优化】发愁了！

前端训练营：1v1私教，终身辅导计划，帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer

Hello，大家好，我是 Sunday。

前端性能优化是一个 老生常谈且经久不衰 的话题，在现在招聘市场竞争逐渐加剧的环境下，性能优化这样一个相对复杂并考验实际工作能力的问题，就成了 面试的核心。

所以，为了解决很多同学对性能优化不熟悉的问题，我专门录制了 两个小时 的视频，用来帮大家解决常见的性能优化问题，以帮助大家解决面试的困境。

大家可以通过以下链接直接访问 视频版 两小时，带你深入前端性能优化方案，相信会对大家有所帮助

视频访问地址：https://www.bilibili.com/video/BV1GAWDe7E3k/

核心内容

在这次的内容中：

• 首先：会为大家介绍 为什么要进行性能优化、性能优化的标准是什么
• 其次：会以 面试和工作 所需为核心目的，来为大家介绍具体的企业项目性能优化方案
• 同时：我们也会通过一个一个的实际项目场景，来为大家分析并且完成整个优化操作

实际场景包含了 4 个部分的内容，我们一个一个来看

1. 数据懒加载处理方案

当一个页面的很多很多，一屏无法展示所有的数据，用户需要滚动页面才能看到下面的数据 时，数据懒加载处理方案就显得非常重要了。

在这里，我们通过一个实际的业务场景，来帮大家复原了整个问题，并通过自定义逻辑完成了整个数据懒加载的处理：

2. 图片懒加载处理方案

图片懒加载在项目中更为常见，特别是针对一些 瀑布流、视频网页 的项目中。

与数据懒加载类似，在这里我们依然遵循

1. 构建业务场景
2. 业务需求分析
3. 优化功能实现

三步。

通过这三个步骤完成整个逻辑的实现

3. webpack 解决打包体积过大的问题

不同业务优化，webpack 和 vite 的优化属于打包器部分。

很多同学对 webpack 和 vite 的打包器并不熟悉，从而在面试中吃了大亏

所以这部分我们会针对 wbepack 的优化场景来进行描述。

1. 首先构建出待优化的 webpack 项目
2. 然后分析整个优化的方案
3. 最后通过代码的形式完成 webpack 优化

4. CDN 优化方案

CDN 优化与 webpack 优化方案是分不开的，或者说它是属于 webpack 优化方案的一部分。

在这里我们会修改较多的 webpack 配置，帮助大家熟悉 webpack 的配置内容

总结

那么以上就是 两小时，带你深入前端性能优化方案 大致内容。整个视频的讲解非常详细，相信一定会对大家有所帮助！