詳解Next.js頁(yè)面渲染的優(yōu)化方案
在過(guò)去一年的工作中我所使用的js框架是Next.js,盡管這個(gè)框架在前后端同構(gòu)方面有著絕佳的體驗(yàn)，但是當(dāng)頁(yè)面js文件過(guò)大以及preload過(guò)多的時(shí)候還是會(huì)出現(xiàn)頁(yè)面跳轉(zhuǎn)卡頓和渲染阻塞等比較糟糕的用戶體驗(yàn)問(wèn)題。由于我之前既不知道這個(gè)框架的工作原理，自然也就不知道如何去優(yōu)化它。乘著農(nóng)歷春節(jié)前工地活少所以稍微研究一下。
第一個(gè)問(wèn)題：宣稱前后臺(tái)同構(gòu)的Next.js為何會(huì)出現(xiàn)卡頓現(xiàn)象？
Next.js 中的特有生命周期hook 函數(shù) getInitialProps會(huì)在頁(yè)面渲染的時(shí)候判斷瀏覽器是否為首次渲染，如果是則是服務(wù)端渲染網(wǎng)頁(yè)，如果不是則是客戶端渲染。在頁(yè)面首次渲染的時(shí)候，會(huì)加載 commons.xxxxx.js 文件，這個(gè)文件中打包了react.js、next.js 以及相關(guān)的框架代碼也就是如果是客戶端渲染打包后的 commons.xxxxx.js 負(fù)載了整個(gè)前端的頁(yè)面邏輯，這個(gè)文件相對(duì)比較大一般會(huì)在180kb以上。如果僅從文件大小角度來(lái)說(shuō)，這個(gè)文件并不算大,就算利用了next.js 的 preload機(jī)制把文件大小放到300kb以上，也還行。但是一旦這個(gè)文件阻塞了頁(yè)面的渲染，頁(yè)面的渲染要等到 commons.xxxxx.js 加載完畢之后才渲染，那問(wèn)題就來(lái)了。
在next7中使用的打包工具是webpack4，這在打包和加載過(guò)程有一個(gè)比較蠢的機(jī)制（或許僅僅是我個(gè)人觀點(diǎn)），那就是但凡React DOM上綁定了style 這些DOM都不會(huì)在服務(wù)端渲染出來(lái)，而是打包抽離成一個(gè)小的js文件，在 commons.xxxxx.js 加載完畢之后，再加載這個(gè)js,將DOM和內(nèi)聯(lián)style渲染到HTML。這就在某種程度上導(dǎo)致了next.js首次渲染是SSR失效了，更為糟糕的是卡頓感十足。
可能有人會(huì)說(shuō)，那就不要寫(xiě)內(nèi)聯(lián)style不就好了。但是事實(shí)是在大量的后臺(tái)數(shù)據(jù)動(dòng)態(tài)渲染頁(yè)面和用戶自定義頁(yè)面的情況下，不可能做到完全不寫(xiě)內(nèi)聯(lián)樣式，而去傻乎乎地寫(xiě)一堆className。
所以我們要解決一個(gè)問(wèn)題那就是如何保證，內(nèi)聯(lián)style的react dom在首次渲染頁(yè)面的時(shí)候是服務(wù)器端直接輸出后扔給后臺(tái)，而不是讓 commons.xxxxx.js 卡卡卡卡卡，然后砰的一下蹦出來(lái)。
要解決上一個(gè)問(wèn)題，首先要了解Next.js是如何渲染頁(yè)面的？
在Next.js的規(guī)則中，所有頁(yè)面級(jí)的代碼都是寫(xiě)在pages文件夾中，比如/pages/home:
export default () => (<div>你瞅啥？這是home頁(yè)</div>)
而其框架內(nèi)置的Document組件中，已經(jīng)幫開(kāi)發(fā)者配置好傳統(tǒng)的HTML文件的 <head> , <body> 這些標(biāo)簽作為靜態(tài)資源的外殼。Document組件中有一個(gè) renderPage() 方法，如果代碼正常運(yùn)行，該方法就會(huì)將pages文件夾中的代碼和它外部同步渲染到瀏覽器中。如果開(kāi)發(fā)者希望自定義Document組件只需添加 /pages/_document.js 文件即可。
renderPage()本質(zhì)是一個(gè)回調(diào)函數(shù)，它的作用只有一個(gè)那就是 執(zhí)行React源碼中渲染邏輯 同步加載到Next.js的Document組件中形成DOM節(jié)點(diǎn)。
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
static getInitialProps ({ renderPage }) {
// renderPage()位于next.js特有生命周期函數(shù)getInitialProps中。
return renderPage();
}
render () {
return (
<html>
<Head>
<title>沒(méi)見(jiàn)過(guò)標(biāo)題黨嗎？</title>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
服務(wù)端渲染樣式
為了能讓服務(wù)器端渲染樣式，我們首先得先做兩件事：
- 在頁(yè)面首次加載的時(shí)候，也就是所謂的SSR.能讓 renderPage 方法在服務(wù)器端就能對(duì)React Dom進(jìn)行解析，讓HTML歸HTML，CSS歸CSS；
- 能讓 Document 組件在頁(yè)面切換時(shí)，能及時(shí)更新 <head> ,這樣不同的頁(yè)面就能加載自己所需的script,style。
解決方案的登場(chǎng)
隆重介紹神器 styled-components 出場(chǎng)， styled-components 在github上目前為止已經(jīng)超過(guò)1萬(wàn)stars，它的設(shè)計(jì)初衷在于在服務(wù)端渲染的時(shí)候，同時(shí)渲染出一個(gè)ServerStyleSheet，然后把這個(gè)ServerStyleSheet送入React DOM樹(shù)中。它主要就做兩件事：
- 把組件中 styles 抽離到 <style> 標(biāo)簽中；
- 把 <style> 標(biāo)簽放到 <head> 中
下面就是一段如何正確使用ServerStyleSheet的姿勢(shì)步驟：
import { ServerStyleSheet } from "styled-components";
static getInitialProps ({ renderPage }) {
const sheet = new ServerStyleSheet()
const transform = (App) => {
return sheet.collectStyles(<App />);
}
const styleTags = sheet.getStyleElement()
const page = renderPage(transform);
return { ...page, styleTags };
}
render(){
return(
<html lang="zh-Hans">
<Head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="description" content="Kanseefoil"/>
<link rel="shortcut icon" href="/static/favicon.ico" rel="external nofollow" ></link>
{this.props.styleTags}
</Head>
</html>
);
}
上面的代碼已經(jīng)完美跟大家展示了如何將內(nèi)聯(lián)style抽離出dom,然后通過(guò) <link style> 的方法渲染樣式, 那么問(wèn)題來(lái)了，如何在打包解析react dom時(shí)，給服務(wù)器一個(gè)"純潔、干凈、無(wú)暇"的DOM呢？
這個(gè)時(shí)候就需要使用 babel-plugin-styled-components 包，在babel中進(jìn)行解析。
代碼如下：
{
"presets": [
"next/babel"
],
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
]
}
這個(gè)時(shí)候在去打開(kāi)next.js頁(yè)面就會(huì)發(fā)現(xiàn)，那家伙、那場(chǎng)面渲染速度嗖嗖的。至于負(fù)責(zé)前端邏輯的 commons.xxxxx.js ，您老人家就安靜地慢慢地加載吧。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
禁止js文件緩存問(wèn)題是我一直遇到的大問(wèn)題，終于找到了一個(gè)比較好的辦法2010-04-04
項(xiàng)目中常常需要使用到字體圖標(biāo),微信小程序中使用字體圖標(biāo)與在平常的web前端中類似但是又有區(qū)別,下面這篇文章主要給大家介紹了關(guān)于利用微信小程序制作屬于自己的Icon圖標(biāo)的相關(guān)資料,需要的朋友可以參考下2022-04-04
由于安全方面的考慮，Javascript被限制了跨域訪問(wèn)的能力，但是有時(shí)候我們希望能夠做一些合理的跨域訪問(wèn)的事情，那么怎么辦呢？2009-02-02
基于JS實(shí)現(xiàn)新聞列表無(wú)縫向上滾動(dòng)實(shí)例代碼
當(dāng)新聞?shì)^多，并且空前有限的時(shí)候，使用滾動(dòng)是一個(gè)不錯(cuò)的選擇，本章節(jié)就通過(guò)代碼實(shí)例介紹一下如何實(shí)現(xiàn)此效果，對(duì)無(wú)縫向上滾動(dòng)實(shí)例代碼感興趣的朋友一起學(xué)習(xí)吧2016-01-01
這篇文章主要介紹了JS 替換和時(shí)間插件的結(jié)合使用代碼，需要的朋友可以參考下2013-07-07
微信小程序開(kāi)發(fā)中組件的生命周期詳細(xì)介紹
生命周期是指一個(gè)對(duì)象從創(chuàng)建→>運(yùn)行>銷毀的整個(gè)階段，強(qiáng)調(diào)的是一個(gè)時(shí)間段，文中介紹了小程序中組件的生命周期，需要的朋友可以參考下2022-08-08
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個(gè)與正則表達(dá)式匹配的子串，這篇文章主要介紹了js中進(jìn)行字符串替換的方法,需要的朋友可以參考下2024-01-01
JavaScript四種調(diào)用模式和this示例介紹
JavaScript調(diào)用時(shí)除了聲明時(shí)定義的形參外，每個(gè)函數(shù)接受兩個(gè)附加參數(shù)：this 和arguments，下面為大家介紹下JavaScript四種調(diào)用模式和this2014-01-01
JavaScript用構(gòu)造函數(shù)如何獲取變量的類型名
在JavaScript中,如何準(zhǔn)確獲取變量的類型名是一個(gè)經(jīng)常使用的問(wèn)題。但是常常不能獲取到變量的精確名稱,或者必須使用jQuery 中的方法,這里通過(guò) typeof ,jQuery.type 和 通過(guò)構(gòu)造函數(shù)來(lái)獲取變量類型這三種方法詳細(xì)介紹一遍。有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-12-12
JS實(shí)現(xiàn)自適應(yīng)高度表單文本框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)自適應(yīng)高度表單文本框的方法,實(shí)例分析了針對(duì)IE內(nèi)核與非IE內(nèi)核下的javascript控制文本框樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02