Hello，大家好，我是 Sunday。

前端性能優(yōu)化是一個(gè) 老生常談且經(jīng)久不衰 的話題，在現(xiàn)在招聘市場(chǎng)競(jìng)爭(zhēng)逐漸加劇的環(huán)境下，性能優(yōu)化這樣一個(gè)相對(duì)復(fù)雜并考驗(yàn)實(shí)際工作能力的問題，就成了 面試的核心。

所以，為了解決很多同學(xué)對(duì)性能優(yōu)化不熟悉的問題，我專門錄制了 兩個(gè)小時(shí) 的視頻，用來幫大家解決常見的性能優(yōu)化問題，以幫助大家解決面試的困境。

大家可以通過以下鏈接直接訪問 視頻版 兩小時(shí)，帶你深入前端性能優(yōu)化方案，相信會(huì)對(duì)大家有所幫助

視頻訪問地址：https://www.bilibili.com/video/BV1GAWDe7E3k/

核心內(nèi)容

在這次的內(nèi)容中：

• 首先：會(huì)為大家介紹 為什么要進(jìn)行性能優(yōu)化、性能優(yōu)化的標(biāo)準(zhǔn)是什么
• 其次：會(huì)以 面試和工作 所需為核心目的，來為大家介紹具體的企業(yè)項(xiàng)目性能優(yōu)化方案
• 同時(shí)：我們也會(huì)通過一個(gè)一個(gè)的實(shí)際項(xiàng)目場(chǎng)景，來為大家分析并且完成整個(gè)優(yōu)化操作

實(shí)際場(chǎng)景包含了 4 個(gè)部分的內(nèi)容，我們一個(gè)一個(gè)來看

1. 數(shù)據(jù)懶加載處理方案

當(dāng)一個(gè)頁面的很多很多，一屏無法展示所有的數(shù)據(jù)，用戶需要滾動(dòng)頁面才能看到下面的數(shù)據(jù) 時(shí)，數(shù)據(jù)懶加載處理方案就顯得非常重要了。

在這里，我們通過一個(gè)實(shí)際的業(yè)務(wù)場(chǎng)景，來幫大家復(fù)原了整個(gè)問題，并通過自定義邏輯完成了整個(gè)數(shù)據(jù)懶加載的處理：

圖片

2. 圖片懶加載處理方案

圖片懶加載在項(xiàng)目中更為常見，特別是針對(duì)一些 瀑布流、視頻網(wǎng)頁 的項(xiàng)目中。

圖片

與數(shù)據(jù)懶加載類似，在這里我們依然遵循

1. 構(gòu)建業(yè)務(wù)場(chǎng)景
2. 業(yè)務(wù)需求分析
3. 優(yōu)化功能實(shí)現(xiàn)

三步。

通過這三個(gè)步驟完成整個(gè)邏輯的實(shí)現(xiàn)

3. webpack 解決打包體積過大的問題

不同業(yè)務(wù)優(yōu)化，webpack 和 vite 的優(yōu)化屬于打包器部分。

很多同學(xué)對(duì) webpack 和 vite 的打包器并不熟悉，從而在面試中吃了大虧

所以這部分我們會(huì)針對(duì) wbepack 的優(yōu)化場(chǎng)景來進(jìn)行描述。

1. 首先構(gòu)建出待優(yōu)化的 webpack 項(xiàng)目
2. 然后分析整個(gè)優(yōu)化的方案
3. 最后通過代碼的形式完成 webpack 優(yōu)化

4. CDN 優(yōu)化方案

CDN 優(yōu)化與 webpack 優(yōu)化方案是分不開的，或者說它是屬于 webpack 優(yōu)化方案的一部分。

在這里我們會(huì)修改較多的 webpack 配置，幫助大家熟悉 webpack 的配置內(nèi)容