react按需載入：
react效能優化點
rect 效能
問題：對於react 應用，怎麼優化它的效能？
（侷限：只關注react框架）
回答：以下方向思想
1.應用載入效能
載入過程，頁面渲染過程
cdn(怎麼優化cdn對於靜態資源的快取？)
快取和回源（cdn上沒有找到資源，到源站上面去拉取）
快取重新整理和快取預熱
快取重新整理： 乙個請求到cd n，第一次c d n沒有資源，會去源站拉取拿回來資料到c d n 返回給客戶端
- 第一次訪問慢？ 沒有資源 去源站拉取 再快取 （ 預熱）
http2主動推送 很容易造成tcp層面上 對頭阻塞，還不如http
- 不是第一次？資源訪問量比較低、預熱不夠、c d n收到的請求較少、無法命中快取、資源配置時間不合理（快取時間短）、頻繁回流、http header頭沒有設定無法快取、g zi p、url帶有引數(cdn認為是新請求，每個請求都會回源，開啟過濾引數)、大檔案開啟range、資源動靜分離，加速
快取： http、 cache、disk(service worker)、push(http2會話之間的快取)
網路堆疊-- http快取-- 渲染器的記憶體快取（cache-controle）–disk
cpu- cachee -disk 降級拉取
分包抽取公共業務包 （splitchunks）commonschunkplugin — optimization splitchunks
dllplugin
code splitting 非同步元件
webpack4 分包配置
optimization splitchunks.chunks=『all』; — node_module vendor檔案裡
業務包和依賴包分離
多頁動態元件
require.ensure(jsonp);
react lazy
結合專案使用 prefetch 、preload
housing.com
preconnect （預連線 html webpack plugin）、 dns解析、 t l s、t c p
preload宣告式渲染，不會阻塞document渲染過程。載入當前頁面資源
prefetch 瀏覽器先載入， 瀏覽器使用由瀏覽器決定。要跳下乙個頁面資源做處理
2.首屏開啟的體驗
fp fcp fmp
fp html
fcp html js
fmp. html js. ajax.
545
預渲染 和 s s r 有什麼區別？
ssr rendertostring (jsx應用) html
rendertostring. checksum adler32. dom disshow. dismount
rendertostaticmarkup dom
預渲染通過無頭瀏覽器構建的，動態資料 預渲染
兩端：事件
狀態server–先通過模版引擎處理 – 構建頁面
client-- 客戶端使用的js 構建狀態 繫結。
reactdom.hydrate(在服務端渲染和客戶端首次渲染完全一致的情況下，才能使用hydrate替換render)
server端返回js 虛擬dom. render. html
hydrate 虛擬dom 忽略了第一次瀏覽器j s構建html
immutable. ----json
3.react本身應用內**上的一些優化 （ fiber-敗了，不懂別聊） memo hooks lazy
4.本地構建的一些優化
babel-loader. 快取
uglifyplugin --webpack plugin – terser webpack plugin
抽離commonschunkplugin webpack 3
splitchunksplugin. webpacl4
webpack為什麼改進commonschunkplugin 為splitchunksplugin，對比有什麼優點？
commonschunkplugin：
1.產出的chunk,在引入的時候，會包含重複**
entrya: vuex vue acomponent // 沒有使用axios ,也會拉取axios 第一次拉取就會有個多餘的庫
entryb: vue axios bcomponent // 沒有使用vuex 但拉取的包中有vuex
entryc: vue vuex axios ccpomponent
提出來之後的包：
vendor-chunk: vuex. vue axios
chunka-chunkc: component 業務**
2.無法優化非同步chunk
minchunks:2
entrya: vuex vue acomponent
asyncb: vue axios bcomponent // 非同步元件
entryc: vue veux axios. ccomponent
打包出來的：
做公共重合的時候只會處理a c. 不會處理非同步元件
vendor-chunk: vuex vue. // 這沒有比較非同步元件
chunka: component
asyncb: vue axios component. // 非同步元件不提取
chunkc: component axios
splitchunksplugin ：
抽離**是有條件的，使用自動重複演算法，有乙個閾值，達到閾值才會抽離
1.新**被共享引用 或者node_module
2.抽取的**》= 30kb =》如果小於30kb? ----dll —cdn.
3.按需載入應用的**，並行請求的數量不多於5次
4.初始化載入的**塊，並行請求不多於3次
dllreference 和改進的又有什麼區別和好處？
手動配置，新開乙個webpack構建包
React專案載入效能優化
1.開啟頁面 這個時候頁面是完全空白的。2.首屏渲染 html 和引用的 css 載入完畢，瀏覽器進行首次渲染，有可見的內容出現。我們把首次渲染需要載入的資源體積稱為 首屏體積 3.首次內容渲染 react react dom 業務 載入完畢，應用第一次渲染，頁面主要內容出現。4.可互動 然後應用的...
react專案 效能優化 首頁優化 載入優化
react路由懶載入 非同步元件 react loadable 以路由元件分割 或者參考 安裝cnpm install react loadable s 如果專案有100個頁面，那laodable.js就需要寫100遍，這樣就感覺有點冗餘了，所以這個我們可以封裝一下 首先，我們建乙個utilsrc ...
React 效能優化
避免重複渲染 當乙個元件的props或者state改變時，react通過比較新返回的元素和之前渲染的元素來決定是否有必要更新實際的dom。當他們不相等時，react會更新dom。在一些情況下，你的元件可以通過重寫這個生命週期函式shouldcomponentupdate來提公升速度，它是在重新渲染過...