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

目標

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

效果動畫

效果實現

方法介紹 (基於Angular8)

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

01 Angular Universal

官網文檔:angular.io/guide/unive…css

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

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

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

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

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

效果展現


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

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

src/style.css寫入加載動畫windows

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

<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-with-ssr的項目下新建文件名爲mobile的cordova項目

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

    cd mobile : 進入cordova文件

    rmdir /s www : 刪除www文件

    刪除www文件

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

    mklink /d [目標文件][源文件]

  • 修改文件

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的顏,寫點小清新的東西淨化心靈,就一塊兒用上了。初體驗一下仍是蠻開心的,也和前輩總結出很多有意思的東西。雖然知曉還有很多東西值得深挖。因此嘛,雖然上海最近的天氣不是很美麗,但仍是很快樂遊了坑。 最後,祝你們,一塊兒遊坑快樂哦。

相關文章
相關標籤/搜索