Angular Universal初體驗以及首屏優化方案討論

目標

• 防止頁面刷新的瞬間空白

效果動畫

方法介紹 (基於Angular8)

• 01 Angular Universal（首屏輸出）
• 02 使用ngIf方法以及Index.html寫入動畫
• 03 補充點：如何只用Angular與cordova直接打包(windows)

01 Angular Universal

官網文檔：angular.io/guide/unive…

《Angular5 服務端渲染實戰》：閱讀資料

《angualr 6+ 服務端渲染 SSR 問題記錄》：閱讀資料

參照官方文檔，在新建的angular8項目內部安裝。遇到的問題結合另外兩個連接進行配置和解決便可。另外，因爲在本次練習中使用了 localstorage ，而服務器端渲染不支持瀏覽器api，於是須要下載插件進行配置。

//  server.ts
//  cmd: npm install localstorage-polyfill
import 'localstorage-polyfill';
global['localStorage'] = localStorage;
複製代碼

執行 npm run build:ssr , 運行node.js，點擊localhost進行查看。文本直接渲染顯示，配置成功。

02 使用ngIf方法以及Index.html寫入動畫

src/index.html的<app-root></app-root>內寫入加載動畫

src/style.css寫入加載動畫

src/app/pages/home-page/home-page.html寫法以下

<div class="content" *ngIf="galleryList; else loading">
  //在加載gallertList完畢以前，顯示#loading
  ...
</div>

<ng-template #loading>
 //搭建骨架屏，使用靜態頁面填充
 //何爲骨架屏 --> https://ng.ant.design/components/skeleton/zh
  ...
</ng-template>
複製代碼

03 補充點：如何只用Angular與cordova直接打包(windows)

配置cordova：cordova中文網

• 使用管理員身份運行打開cmd，進入項目文件。執行cordova新建命令：cordova create [文件名]

  

• 進入mobile文件，刪除原www文件，軟鏈接dist文件。如下3步均在cordova項目內執行，此處即我新建的mobile文件夾下。

  cd mobile : 進入cordova文件

  rmdir /s www : 刪除www文件

  

  mklink /d [目標文件][源文件] : 將mobile/www和build出的dist文件同步

  

• 修改文件

browser/index.html :

<base href="/">  --修改成-->  < base href="./">
複製代碼

mobile/config.xml :

<content src="index.html" />  --修改成-->  <content src="/browser/index.html" />
複製代碼

必須修改以上文件的對應路徑，不然打包出來的應用在模擬器上運行會報出以下錯誤。

最後，執行cordova platform add android在模擬器上運行便可。

總結

最近作的Loading一直都在用小菊花轉啊轉的，就想除了旋轉也來嘗試下另外一種加載形式—骨架屏。加之這幾天也在研究服務端渲染，順便也想舔舔我OOR的顏，寫點小清新的東西淨化心靈，就一塊兒用上了。初體驗一下仍是蠻開心的，也和前輩總結出很多有意思的東西。雖然知曉還有很多東西值得深挖。因此嘛，雖然上海最近的天氣不是很美麗，但仍是很快樂遊了坑。 最後，祝你們，一塊兒遊坑快樂哦。