Angular應(yīng)用prerender配置

我們在某些 Angular 應(yīng)用的 angular.json 文件里，能看到下面的代碼：

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

首先，讓我們來理解上述代碼的作用。這是一個(gè)在 angular.json 文件中定義的 prerender 配置，該配置是用于預(yù)渲染的設(shè)置。預(yù)渲染（Prerendering）是一種在服務(wù)端生成靜態(tài) HTML 頁面的策略，這樣在客戶端首次加載時(shí)，可以立即顯示出內(nèi)容，而不需要等待 JavaScript 執(zhí)行完畢。這可以提高頁面的首屏加載速度，同時(shí)也有助于改善 SEO，因?yàn)樗阉饕婵梢灾苯咏馕鲮o態(tài) HTML 頁面內(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)在，讓我們通過一個(gè)詳細(xì)的例子來解釋這段代碼的作用。假設(shè)我們有一個(gè) Angular 項(xiàng)目，它的根路徑 / 對應(yīng)的是首頁，首頁中有一些從服務(wù)器動態(tài)獲取的內(nèi)容，例如新聞列表。如果我們不使用預(yù)渲染，那么當(dāng)用戶訪問首頁時(shí)，瀏覽器首先需要下載和執(zhí)行所有的 JavaScript 代碼，然后 JavaScript 代碼會向服務(wù)器發(fā)送請求獲取新聞列表，然后再將新聞列表渲染到頁面上。在這個(gè)過程中，用戶需要等待一段時(shí)間才能看到新聞列表，這會影響用戶體驗(yàn)，同時(shí)，搜索引擎也可能因?yàn)闊o法執(zhí)行 JavaScript 而無法獲取到新聞列表的內(nèi)容。

為了解決這個(gè)問題，我們可以使用預(yù)渲染。通過預(yù)渲染，我們可以在服務(wù)器端先生成一個(gè)包含了新聞列表的靜態(tài) HTML 文件，然后當(dāng)用戶訪問首頁時(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)建器會根據(jù)這個(gè)配置，生成一個(gè)包含了新聞列表的靜態(tài) HTML 文件。這個(gè)靜態(tài) HTML 文件會被保存在服務(wù)器上，當(dāng)用戶訪問首頁時(shí)，服務(wù)器就可以直接返回該靜態(tài)頁面。

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

最新評論