試 React 流式 SSR 的性能基線)
如何用 Fizz 夾具測(cè)試 React 流式 SSR 的性能基線【免費(fèi)下載鏈接】reactThe library for web and native user interfaces.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/re/reactReact 倉(cāng)庫(kù)中的fixtures/fizz是一組用于驗(yàn)證 Fizz 服務(wù)端渲染的基本測(cè)試應(yīng)用其定位在 fixtures/fizz/README.md 中寫(xiě)得很明確主要用來(lái)觀察 legacyrenderToString與流式渲染兩種實(shí)現(xiàn)的基線性能。如果你的目標(biāo)是搭建一個(gè)可以反復(fù)對(duì)比「一次性字符串渲染」和「流式 SSR」表現(xiàn)的本地環(huán)境這篇文章給出完整的操作步驟從構(gòu)建 React 產(chǎn)物到啟動(dòng)夾具服務(wù)、切換 dev/prod 模式、調(diào)整延遲參數(shù)以及判斷服務(wù)是否按預(yù)期運(yùn)行。準(zhǔn)備條件Node 版本要求fixtures/fizz/package.json 的engines字段聲明node: 14.9.0。夾具引用的是本地構(gòu)建的 React 產(chǎn)物而不是 npm 上的發(fā)布版。因此第一步必須在 React 倉(cāng)庫(kù)根目錄執(zhí)行npm run buildfixtures/fizz/README.md 明確說(shuō)明「To reference a local build of React, first runnpm run buildat the root of the React project」。根目錄package.json中的build腳本會(huì)生成build/oss-experimental產(chǎn)物夾具的prestart/predev鉤子正是把這份產(chǎn)物復(fù)制進(jìn)自己的node_modules來(lái)引用。啟動(dòng)開(kāi)發(fā)模式進(jìn)入夾具目錄并安裝依賴、啟動(dòng)服務(wù)cd fixtures/fizz yarn yarn startyarn start通過(guò)concurrently同時(shí)拉起兩個(gè)進(jìn)程見(jiàn)package.json的scriptsstart:server以NODE_ENVproduction環(huán)境變量用 nodemon 運(yùn)行 server/server.jsstart:bundler用 nodemon 運(yùn)行scripts/build.js的 webpack 構(gòu)建。按 README 的說(shuō)明start命令會(huì)以開(kāi)發(fā)模式運(yùn)行 webpack dev server 和服務(wù)端渲染服務(wù)器并支持熱加載。啟動(dòng)后服務(wù)端會(huì)打印監(jiān)聽(tīng)日志Listening at 4000...默認(rèn)端口是 4000server.js中通過(guò)const PORT process.env.PORT || 4000讀取如需更換端口可設(shè)置PORT環(huán)境變量。訪問(wèn)三種渲染端點(diǎn)server/server.js 暴露了四個(gè)路由正好覆蓋基線對(duì)比所需的實(shí)現(xiàn)路由渲染方式實(shí)現(xiàn)文件/和/stream流式渲染renderToPipeableStreamserver/render-to-stream.js/stringlegacy 同步渲染renderToStringserver/render-to-string.js/buffer用Writable累積完整 HTML 后再一次性發(fā)送server/render-to-buffer.js服務(wù)啟動(dòng)時(shí)會(huì)先執(zhí)行waitForWebpack()在 webpack 產(chǎn)出build/main.js之前請(qǐng)求會(huì)持續(xù)等待并打印「Could not find webpack build output. Will retry in a second...」這是正常的等待現(xiàn)象不是錯(cuò)誤。流式端點(diǎn)的行為要點(diǎn)來(lái)自render-to-stream.js源碼注釋onShellReady時(shí)發(fā)送響應(yīng)頭并開(kāi)始向響應(yīng)流pipe數(shù)據(jù)onAllReady表示完整渲染完成可用于 SSG 或爬蟲(chóng)場(chǎng)景若 shell 階段出錯(cuò)響應(yīng)狀態(tài)碼為 500 并輸出!doctypepError/p存在一個(gè)ABORT_DELAY定時(shí)器到時(shí)間仍未完成則調(diào)用abort()放棄服務(wù)端渲染、回退到客戶端渲染。源碼注釋寫(xiě)的是「Try lowering this to see the client recover」即調(diào)低該值可以觀察客戶端接管恢復(fù)的過(guò)程。調(diào)整延遲參數(shù)來(lái)觀察不同延遲場(chǎng)景三種渲染都會(huì)經(jīng)過(guò)的延遲常量集中在 server/delays.js文件注釋是「Tweak these to play with different kinds of latency」// How long the data fetches on the server. exports.API_DELAY 2000; // How long the server waits for data before giving up. exports.ABORT_DELAY 10000; // How long serving the JS bundles is delayed. exports.JS_BUNDLE_DELAY 4000;API_DELAY模擬服務(wù)端數(shù)據(jù)請(qǐng)求的耗時(shí)ABORT_DELAY流式渲染放棄轉(zhuǎn)客戶端渲染前等待數(shù)據(jù)的時(shí)間JS_BUNDLE_DELAYJS bundle 下發(fā)的延遲。修改后由于 nodemon 監(jiān)控源碼服務(wù)會(huì)自動(dòng)重啟重新請(qǐng)求/、/string、/stream三個(gè)端點(diǎn)即可在相同延遲條件下橫向比較不同實(shí)現(xiàn)的輸出節(jié)奏。生產(chǎn)模式與重建 React 后的重跑可選分支如果不想用熱加載的開(kāi)發(fā)環(huán)境而是模擬更接近正式部署的環(huán)境README 給出的是yarn start:prod該命令會(huì)預(yù)先構(gòu)建所有靜態(tài)資源然后啟動(dòng)一個(gè)托管 React 應(yīng)用并服務(wù)靜態(tài)資源的服務(wù)端渲染 HTTP 服務(wù)器無(wú)熱加載。一個(gè)容易踩的坑在 README 中用加粗標(biāo)出每次改動(dòng) React 并重新構(gòu)建后必須在fixtures/fizz目錄重新運(yùn)行yarn。原因是prestart鉤子執(zhí)行的是cp -r ../../build/oss-experimental/* ./node_modules/ rm -rf node_modules/.cache只有在再次安裝/啟動(dòng)時(shí)新的 React 本地構(gòu)建產(chǎn)物才會(huì)被復(fù)制進(jìn)node_modules否則你測(cè)的還是舊版構(gòu)建。如何判斷運(yùn)行結(jié)果與已知邊界啟動(dòng)成功的直接信號(hào)是終端出現(xiàn)Listening at 4000...隨后訪問(wèn)http://localhost:4000/應(yīng)能拿到流式渲染的 HTML 頁(yè)面。端口被占用時(shí)server.js會(huì)輸出Port 4000 is already in use并退出對(duì)應(yīng)EADDRINUSE分支需要先釋放端口再啟動(dòng)。流式渲染在 shell 出錯(cuò)時(shí)返回 500 和!doctypepError/ponError會(huì)把錯(cuò)誤打印到控制臺(tái)console.error(x)。需要說(shuō)明的邊界各渲染文件中硬編碼了assets {main.js: /main.js, main.css: /main.css}源碼注釋是「In a real setup, youd read it from webpack build stats」——它只是一個(gè)基線測(cè)試夾具不是生產(chǎn)級(jí) SSR 方案package.json中的react/react-dom依賴在運(yùn)行期實(shí)際被本地構(gòu)建產(chǎn)物覆蓋用于觀察行為而非驗(yàn)證發(fā)布版本。完成一次完整的基線觀察順序就是根目錄npm run build→fixtures/fizz下yarn→yarn start或yarn start:prod→ 分別訪問(wèn)/、/string、/buffer對(duì)比表現(xiàn) → 修改 server/delays.js 觀察不同延遲下的行為。改動(dòng) React 源碼后記得回到fixtures/fizz重跑yarn再驗(yàn)證?！久赓M(fèi)下載鏈接】reactThe library for web and native user interfaces.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/re/react創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 如何用 Fizz 夾具測(cè)試 React 流式 SSR 的性能基線
如何用 Fizz 夾具測(cè)試 React 流式 SSR 的性能基線【免費(fèi)下載鏈接】reactThe library for web and native user interfaces.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/re/reactReact 倉(cāng)庫(kù)中的fixtures/fizz是一組用于驗(yàn)證 Fizz 服務(wù)端渲染的基本測(cè)試應(yīng)用其定位在 fixtures/fizz/README.md 中寫(xiě)得很明確主要用來(lái)觀察 legacyrenderToString與流式渲染兩種實(shí)現(xiàn)的基線性能。如果你的目標(biāo)是搭建一個(gè)可以反復(fù)對(duì)比「一次性字符串渲染」和「流式 SSR」表現(xiàn)的本地環(huán)境這篇文章給出完整的操作步驟從構(gòu)建 React 產(chǎn)物到啟動(dòng)夾具服務(wù)、切換 dev/prod 模式、調(diào)整延遲參數(shù)以及判斷服務(wù)是否按預(yù)期運(yùn)行。準(zhǔn)備條件Node 版本要求fixtures/fizz/package.json 的engines字段聲明node: 14.9.0。夾具引用的是本地構(gòu)建的 React 產(chǎn)物而不是 npm 上的發(fā)布版。因此第一步必須在 React 倉(cāng)庫(kù)根目錄執(zhí)行npm run buildfixtures/fizz/README.md 明確說(shuō)明「To reference a local build of React, first runnpm run buildat the root of the React project」。根目錄package.json中的build腳本會(huì)生成build/oss-experimental產(chǎn)物夾具的prestart/predev鉤子正是把這份產(chǎn)物復(fù)制進(jìn)自己的node_modules來(lái)引用。啟動(dòng)開(kāi)發(fā)模式進(jìn)入夾具目錄并安裝依賴、啟動(dòng)服務(wù)cd fixtures/fizz yarn yarn startyarn start通過(guò)concurrently同時(shí)拉起兩個(gè)進(jìn)程見(jiàn)package.json的scriptsstart:server以NODE_ENVproduction環(huán)境變量用 nodemon 運(yùn)行 server/server.jsstart:bundler用 nodemon 運(yùn)行scripts/build.js的 webpack 構(gòu)建。按 README 的說(shuō)明start命令會(huì)以開(kāi)發(fā)模式運(yùn)行 webpack dev server 和服務(wù)端渲染服務(wù)器并支持熱加載。啟動(dòng)后服務(wù)端會(huì)打印監(jiān)聽(tīng)日志Listening at 4000...默認(rèn)端口是 4000server.js中通過(guò)const PORT process.env.PORT || 4000讀取如需更換端口可設(shè)置PORT環(huán)境變量。訪問(wèn)三種渲染端點(diǎn)server/server.js 暴露了四個(gè)路由正好覆蓋基線對(duì)比所需的實(shí)現(xiàn)路由渲染方式實(shí)現(xiàn)文件/和/stream流式渲染renderToPipeableStreamserver/render-to-stream.js/stringlegacy 同步渲染renderToStringserver/render-to-string.js/buffer用Writable累積完整 HTML 后再一次性發(fā)送server/render-to-buffer.js服務(wù)啟動(dòng)時(shí)會(huì)先執(zhí)行waitForWebpack()在 webpack 產(chǎn)出build/main.js之前請(qǐng)求會(huì)持續(xù)等待并打印「Could not find webpack build output. Will retry in a second...」這是正常的等待現(xiàn)象不是錯(cuò)誤。流式端點(diǎn)的行為要點(diǎn)來(lái)自render-to-stream.js源碼注釋onShellReady時(shí)發(fā)送響應(yīng)頭并開(kāi)始向響應(yīng)流pipe數(shù)據(jù)onAllReady表示完整渲染完成可用于 SSG 或爬蟲(chóng)場(chǎng)景若 shell 階段出錯(cuò)響應(yīng)狀態(tài)碼為 500 并輸出!doctypepError/p存在一個(gè)ABORT_DELAY定時(shí)器到時(shí)間仍未完成則調(diào)用abort()放棄服務(wù)端渲染、回退到客戶端渲染。源碼注釋寫(xiě)的是「Try lowering this to see the client recover」即調(diào)低該值可以觀察客戶端接管恢復(fù)的過(guò)程。調(diào)整延遲參數(shù)來(lái)觀察不同延遲場(chǎng)景三種渲染都會(huì)經(jīng)過(guò)的延遲常量集中在 server/delays.js文件注釋是「Tweak these to play with different kinds of latency」// How long the data fetches on the server. exports.API_DELAY 2000; // How long the server waits for data before giving up. exports.ABORT_DELAY 10000; // How long serving the JS bundles is delayed. exports.JS_BUNDLE_DELAY 4000;API_DELAY模擬服務(wù)端數(shù)據(jù)請(qǐng)求的耗時(shí)ABORT_DELAY流式渲染放棄轉(zhuǎn)客戶端渲染前等待數(shù)據(jù)的時(shí)間JS_BUNDLE_DELAYJS bundle 下發(fā)的延遲。修改后由于 nodemon 監(jiān)控源碼服務(wù)會(huì)自動(dòng)重啟重新請(qǐng)求/、/string、/stream三個(gè)端點(diǎn)即可在相同延遲條件下橫向比較不同實(shí)現(xiàn)的輸出節(jié)奏。生產(chǎn)模式與重建 React 后的重跑可選分支如果不想用熱加載的開(kāi)發(fā)環(huán)境而是模擬更接近正式部署的環(huán)境README 給出的是yarn start:prod該命令會(huì)預(yù)先構(gòu)建所有靜態(tài)資源然后啟動(dòng)一個(gè)托管 React 應(yīng)用并服務(wù)靜態(tài)資源的服務(wù)端渲染 HTTP 服務(wù)器無(wú)熱加載。一個(gè)容易踩的坑在 README 中用加粗標(biāo)出每次改動(dòng) React 并重新構(gòu)建后必須在fixtures/fizz目錄重新運(yùn)行yarn。原因是prestart鉤子執(zhí)行的是cp -r ../../build/oss-experimental/* ./node_modules/ rm -rf node_modules/.cache只有在再次安裝/啟動(dòng)時(shí)新的 React 本地構(gòu)建產(chǎn)物才會(huì)被復(fù)制進(jìn)node_modules否則你測(cè)的還是舊版構(gòu)建。如何判斷運(yùn)行結(jié)果與已知邊界啟動(dòng)成功的直接信號(hào)是終端出現(xiàn)Listening at 4000...隨后訪問(wèn)http://localhost:4000/應(yīng)能拿到流式渲染的 HTML 頁(yè)面。端口被占用時(shí)server.js會(huì)輸出Port 4000 is already in use并退出對(duì)應(yīng)EADDRINUSE分支需要先釋放端口再啟動(dòng)。流式渲染在 shell 出錯(cuò)時(shí)返回 500 和!doctypepError/ponError會(huì)把錯(cuò)誤打印到控制臺(tái)console.error(x)。需要說(shuō)明的邊界各渲染文件中硬編碼了assets {main.js: /main.js, main.css: /main.css}源碼注釋是「In a real setup, youd read it from webpack build stats」——它只是一個(gè)基線測(cè)試夾具不是生產(chǎn)級(jí) SSR 方案package.json中的react/react-dom依賴在運(yùn)行期實(shí)際被本地構(gòu)建產(chǎn)物覆蓋用于觀察行為而非驗(yàn)證發(fā)布版本。完成一次完整的基線觀察順序就是根目錄npm run build→fixtures/fizz下yarn→yarn start或yarn start:prod→ 分別訪問(wèn)/、/string、/buffer對(duì)比表現(xiàn) → 修改 server/delays.js 觀察不同延遲下的行為。改動(dòng) React 源碼后記得回到fixtures/fizz重跑yarn再驗(yàn)證?！久赓M(fèi)下載鏈接】reactThe library for web and native user interfaces.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/re/react創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考