預渲染理解
客戶端在接收html檔案之前，服務端將html標簽占位做動態資料填充；服務端處理好一個html字串檔案生成一個靜態的html頁面檔案回傳給客戶端，客戶端即會決議html，渲染呈現出UI/UX；
特性：
1、訪問加載速度比其它任意方式幾乎都快；
2、利于搜索引擎抓取，方便網站SEO
3、單個靜態頁只分配特定的路由
4、不用執行Javascript
5、chrome中訪問后，當前頁右鍵【查看網頁源代碼】，對應頁面內容都可在源代碼中查看
6、資源只單次渲染，無任何異步加載
為深入了解，我們以prerender專案為步驟實體，從框架搭建到打包發布；
一、構建生成Angular工程環境
首先參照Angular中文檔案 搭建環境 指南，生成一個Angular專案，
Angular CLI 工具[/color]搭建你的 Angular 開發環境；
此環境下的ng專案只可打包發布成異步請求下的靜態資源，只需要往某個服務中一丟即可直接訪問；
例如 放到 nginx中html目錄下，或放到IIS服務指定網站目錄下。
一般型別的管理類網站通常采用這種做法，重心點在于使用操作管理上；
二、生成Angular服務端渲染工程
*步驟一完成后，請一定要先 yarn install ，將依賴包安裝；
在服務端渲染指南中，我們參照指南執行命令
ng add @nguniversal/express-engine
執行完該命令后，專案結構中會多了幾個有關于服務端渲染的檔案與配置，在此不做比
對以及檔案細節說明；指南中有做詳細講解；
左側工程目錄結構為服務端渲染
SSR簡單理解即為組件或頁面通過服務器生成html字串，再發送到瀏覽器，客戶端決議html；
預渲染構建方式與SSR構建方式到目前為止都基本保持一樣；
預渲染生成的html，也需要通過node后臺服務進行加工處理；最明顯的區別為：
SSR是本在客戶端渲染的程序由服務端代為處理了，然后由服務端渲染完成回傳渲染后的頁面(html字串),
預渲染是服務端未有任何渲染，直接回傳完整的html頁面；
三、預渲染配置與構建
在當前PreRender專案工程中，打開 angular.json 組態檔，在檔案中找到 prerender構建器，會發現有一個 “routes“ 配置項，如下圖所示：
./angular.json
在紅色框中配置不同的路由，當構建時也將會打出各路由下的html檔案包；
如果要渲染生成非常多的靜態頁面，可以去掉 “routes” 配置項，使用 “routeFile” 配置項，該配置項可配置一個相對url路徑，在url所指向的檔案(js/txt/json…)中配置的路由都是打包構建的預定義路由，配置如下圖所示：
./pre-routes.txt
./angular.json
以上配置OK，我們來打包運行，執行命令： yarn prerender
在打包構建成功后我們可以看到執行結果資訊，如下圖所示：
在結果資訊中我們可以看到生成了三個不同的html檔案，分別對應于所配置的訪問路由路徑；接下來打開dist目錄，如下圖所示：
可以一一找到配置所打包的各html。
在 ./dist/app/browser/ 目錄是我們打好的靜態資源檔案，可以直接訪問不同的html，從而顯示不同的界面效果；
下面我們啟動node服務，該服務所在目錄為 ./dist/app/server/ ,執行命令：
yarn serve:ssr
Tip：也可將browser下的所有資源放到nginx/apache/IIS/tomcat... 進行訪問
另外 .Net Core引擎也可以在服務器上跑Angular的應用，進行服務端渲染，該特性由ng團隊在.net core上做的集成
四、訪問分析預渲染頁面
在node服務啟動好之后，在瀏覽器中訪問 http://localhost:4000
右鍵原始碼中查看，如下圖所示：
紅色框中內容是直接獲取而來，非異步加載訪問插入；
預渲染參照如下流程圖：
注解：
1、 服務端存放了打包好的靜態資源與檔案（./dist/browser下的所有檔案）。
2、 瀏覽器決議渲染回傳的html內容。
3、 打包好的bundle.js / chunk.js
五、不需要的預渲染情況
1、生成針對特定路由的靜態HTML 檔案，可以是一個專案工程，也可以是一個CDN服務；所以預渲染不適合動態路由的頁面專案；
2、如果頁面中有動態的操作，以及頻繁的資料變動，就不得不經常升級/發布頁面，對運維以及開發維護不友好；不建議使用預渲染
3、Pre-render幾乎涵蓋了SSR的所有優點，但如果是一個復雜操作功能的專案，且還有N多個頁面，那么預渲染在開發維護階段將會變得例外艱難，因為它生成的是一個個對應的html頁面，即有N多個路由，所以在它開發構建之時編譯將會變得例外緩慢；
PreRender專案是一個對外推廣實時活動頁面，需要SEO，同時專案需求頁少，無任何復雜互動邏輯，所以預渲染方案是它的首選；
總結
PreRender采用預渲染的方案最大的利處在兩方面：
1、 網頁訪問速度極快！
2、 非常利于SEO引擎；已被百度與Google收錄，如下圖：
快照生成時間為19號發布后的第二天早晨
相關關鍵字 （編譯構建時對于預渲染或ssr的錯誤排查）
預 (ahead-of-time, AOT) 編譯
Angular 的預先（AOT）編譯器可以在編譯期間把 Angular 的 HTML 代碼和 TypeScript 代碼轉換成高效的 JavaScript 代碼，這樣瀏覽器就可以直接下載并運行它們。 對于產品環境，這是最好的編譯模式，相對于即時 (JIT) 編譯而言，它能減小加載時間，并提高性能。
使用命令列工具 ngc 來編譯你的應用之后，就可以直接啟動一個模塊工廠，這意味著你不必再在 JavaScript 打包檔案中包含 Angular 編譯器。
PreRender在Github樣例地址
ngcc
Angular 兼容性編譯器。如果使用 Ivy 構建應用程式，但依賴未用 Ivy 編譯的庫，則 CLI 將使用 ngcc 自動更新依賴庫以使用 Ivy。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/251074.html
標籤：JavaScript
上一篇：報錯
下一篇：我用html寫了一個可以啟用攝像頭和麥克風的程式，我想在這個程式上加兩個按鈕，一個靜音麥克風，一個關閉攝像頭。應該怎么寫呢，用什么語言？