快捷導(dǎo)航

Angular應(yīng)用prerender預(yù)渲染提高頁(yè)面加載速度

更新時(shí)間：2023年10月29日 11:36:54 作者：JerryWang_汪子熙

這篇文章主要介紹了Angular應(yīng)用prerender預(yù)渲染提高頁(yè)面加載速度,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

Angular應(yīng)用prerender配置

我們?cè)谀承?Angular 應(yīng)用的 angular.json 文件里，能看到下面的代碼：

prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "routes": ["/"]
          }
}

首先，讓我們來(lái)理解上述代碼的作用。這是一個(gè)在 angular.json 文件中定義的 prerender 配置，該配置是用于預(yù)渲染的設(shè)置。預(yù)渲染（Prerendering）是一種在服務(wù)端生成靜態(tài) HTML 頁(yè)面的策略，這樣在客戶端首次加載時(shí)，可以立即顯示出內(nèi)容，而不需要等待 JavaScript 執(zhí)行完畢。這可以提高頁(yè)面的首屏加載速度，同時(shí)也有助于改善 SEO，因?yàn)樗阉饕婵梢灾苯咏馕鲮o態(tài) HTML 頁(yè)面內(nèi)容，而不需要執(zhí)行 JavaScript。

重要部分解析

這段配置中有三個(gè)重要的部分：

"builder"：指定了預(yù)渲染的構(gòu)建器，這里使用的是 Angular Universal 提供的預(yù)渲染構(gòu)建器 @nguniversal/builders:prerender。這個(gè)構(gòu)建器的任務(wù)就是按照配置，生成靜態(tài) HTML 文件。
"options"：這是預(yù)渲染的選項(xiàng)，提供了預(yù)渲染構(gòu)建器需要的一些參數(shù)。
"routes"：這是一個(gè)數(shù)組，指定了需要預(yù)渲染的路由列表。在這個(gè)例子中，只有一個(gè)元素：/，意味著只有根路徑 / 需要被預(yù)渲染。

現(xiàn)在，讓我們通過(guò)一個(gè)詳細(xì)的例子來(lái)解釋這段代碼的作用。假設(shè)我們有一個(gè) Angular 項(xiàng)目，它的根路徑 / 對(duì)應(yīng)的是首頁(yè)，首頁(yè)中有一些從服務(wù)器動(dòng)態(tài)獲取的內(nèi)容，例如新聞列表。如果我們不使用預(yù)渲染，那么當(dāng)用戶訪問(wèn)首頁(yè)時(shí)，瀏覽器首先需要下載和執(zhí)行所有的 JavaScript 代碼，然后 JavaScript 代碼會(huì)向服務(wù)器發(fā)送請(qǐng)求獲取新聞列表，然后再將新聞列表渲染到頁(yè)面上。在這個(gè)過(guò)程中，用戶需要等待一段時(shí)間才能看到新聞列表，這會(huì)影響用戶體驗(yàn)，同時(shí)，搜索引擎也可能因?yàn)闊o(wú)法執(zhí)行 JavaScript 而無(wú)法獲取到新聞列表的內(nèi)容。

為了解決這個(gè)問(wèn)題，我們可以使用預(yù)渲染。通過(guò)預(yù)渲染，我們可以在服務(wù)器端先生成一個(gè)包含了新聞列表的靜態(tài) HTML 文件，然后當(dāng)用戶訪問(wèn)首頁(yè)時(shí)，服務(wù)器直接返回這個(gè)靜態(tài) HTML 文件。這樣，用戶可以立即看到新聞列表，不需要等待 JavaScript 執(zhí)行完畢。同時(shí)，搜索引擎也可以直接解析這個(gè)靜態(tài) HTML 文件，獲取到新聞列表的內(nèi)容。

添加配置

在這個(gè)例子中，我們可以在 angular.json 文件中添加以下配置：

`prerender`: {
  `builder`: `@nguniversal/builders:prerender`,
  `options`: {
    `routes`: [`/`]
  }
}

這樣，當(dāng)我們運(yùn)行預(yù)渲染命令時(shí)，Angular Universal 的預(yù)渲染構(gòu)建器會(huì)根據(jù)這個(gè)配置，生成一個(gè)包含了新聞列表的靜態(tài) HTML 文件。這個(gè)靜態(tài) HTML 文件會(huì)被保存在服務(wù)器上，當(dāng)用戶訪問(wèn)首頁(yè)時(shí)，服務(wù)器就可以直接返回該靜態(tài)頁(yè)面。

以上就是Angular應(yīng)用prerender機(jī)制使用講解的詳細(xì)內(nèi)容，更多關(guān)于Angular應(yīng)用prerender機(jī)制的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: