看完這一篇，再也不用為前端性能優(yōu)化發(fā)愁了！
Hello，大家好，我是 Sunday。
前端性能優(yōu)化是一個 老生常談且經(jīng)久不衰 的話題，在現(xiàn)在招聘市場競爭逐漸加劇的環(huán)境下，性能優(yōu)化這樣一個相對復(fù)雜并考驗實際工作能力的問題，就成了 面試的核心。
所以，為了解決很多同學(xué)對性能優(yōu)化不熟悉的問題，我專門錄制了 兩個小時 的視頻，用來幫大家解決常見的性能優(yōu)化問題，以幫助大家解決面試的困境。
大家可以通過以下鏈接直接訪問 視頻版 兩小時，帶你深入前端性能優(yōu)化方案，相信會對大家有所幫助
視頻訪問地址：https://www.bilibili.com/video/BV1GAWDe7E3k/
核心內(nèi)容
在這次的內(nèi)容中：
- 首先：會為大家介紹 為什么要進(jìn)行性能優(yōu)化、性能優(yōu)化的標(biāo)準(zhǔn)是什么
- 其次：會以 面試和工作 所需為核心目的，來為大家介紹具體的企業(yè)項目性能優(yōu)化方案
- 同時：我們也會通過一個一個的實際項目場景，來為大家分析并且完成整個優(yōu)化操作
實際場景包含了 4 個部分的內(nèi)容，我們一個一個來看
1. 數(shù)據(jù)懶加載處理方案
當(dāng)一個頁面的很多很多，一屏無法展示所有的數(shù)據(jù)，用戶需要滾動頁面才能看到下面的數(shù)據(jù) 時，數(shù)據(jù)懶加載處理方案就顯得非常重要了。
在這里，我們通過一個實際的業(yè)務(wù)場景，來幫大家復(fù)原了整個問題，并通過自定義邏輯完成了整個數(shù)據(jù)懶加載的處理：
圖片
2. 圖片懶加載處理方案
圖片懶加載在項目中更為常見，特別是針對一些 瀑布流、視頻網(wǎng)頁 的項目中。
圖片
與數(shù)據(jù)懶加載類似，在這里我們依然遵循
- 構(gòu)建業(yè)務(wù)場景
- 業(yè)務(wù)需求分析
- 優(yōu)化功能實現(xiàn)
三步。
通過這三個步驟完成整個邏輯的實現(xiàn)
3. webpack 解決打包體積過大的問題
不同業(yè)務(wù)優(yōu)化，webpack 和 vite 的優(yōu)化屬于打包器部分。
很多同學(xué)對 webpack 和 vite 的打包器并不熟悉，從而在面試中吃了大虧
所以這部分我們會針對 wbepack 的優(yōu)化場景來進(jìn)行描述。
- 首先構(gòu)建出待優(yōu)化的 webpack 項目
- 然后分析整個優(yōu)化的方案
- 最后通過代碼的形式完成 webpack 優(yōu)化
4. CDN 優(yōu)化方案
CDN 優(yōu)化與 webpack 優(yōu)化方案是分不開的，或者說它是屬于 webpack 優(yōu)化方案的一部分。
在這里我們會修改較多的 webpack 配置，幫助大家熟悉 webpack 的配置內(nèi)容
