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 的配置內容