AngularDart4.0 高級-部署

部署AngularDart web應用程序與部署其它web應用程序相似 , 除了你須要先將應用程序編譯成JavaScript. 本頁描述如何編譯你的應用程序—使其更快更小的技巧—和引導你使用服務應用程序的一些資源.

構建應用程序

使用pub build命令來構建應用程序, 將其編譯到JavaScript 而且生成部署所需的全部資源. 當使用默認pub設置時,獲得一個適當小的JavaScript文件,得益於dart2js編譯器對3次握手的支持.

作一點額外的工做, 可使你的可擴展應用程序 更小, 更快, 更穩定.

使用pub build進行編譯

爲應用程序建立一個可擴展的版本, 使用pub build命令. 默認狀況下, 命令使用dart2js和Angular transformer生成實現應用程序的JavaScript文件. 下面是使用pub build命令和默認設置發生的改變:

• 可擴展文件出如今應用程序的build/web目錄.
• dart2js編譯器在release模式下工做, 在build/web/main.dart.js裏生成足夠小的JavaScript.
• 只要dart_to_js_script_rewriter是應用程序pubspec.yaml文件中的最後一個轉換器 (或者幾乎最後一個, 若是你使用$dart2js轉換器), build/web/index.html文件將被從新鏈接到main.dart.js而不是main.dart.

查看更多信息, 查看文檔中的pub build, 或者在starter app discussion搜索pubspec.

使用dart2js 標記生成更好的JavaScript

Google的應用程序一般使用以下dart2js 選項:

• --trust-type-annotations
• --trust-primitives
• --fast-startup

使用這些選項部署前先測試應用程序! 若是應用程序在檢查模式下使用dart2js中或在dartdevc模式下運行, 那麼咱們推薦使用--trust-type-annotations. 然而, --trust-primitives可能會產生意想不到的結果 (即便代碼類型正確)若是你的數據不老是通過驗證. 使用上述二者構建應用程序不推薦使用--fast-startup, 你能夠判斷使JavaScript加速增大是否值得.

Dart 2.0 note: Dart 2.0中沒有檢查模式. 更多信息, 查看Dart 2.0 Updates.

Important: 在使用--trust-*開頭的兩個選項之一以前，確保應用程序擁有良好的測試覆蓋. 若是某條代碼路徑沒有通過測試, 應用程序能在dartdevc下運行，使用dart2js編譯時出現不正確的行爲.

在應用程序的pubspec文件中可使用$dart2js轉換器指定dart2js選項 , 在pubspec文件中哪個是最後一個轉換器:

transformers:
- ...all other transformers...
- $dart2js:
    commandLineOptions: [--trust-type-annotations, --trust-primitives, --fast-startup]

更多信息, 查看dart2js size和speed選項和configuring the dart2js transformer for pub上的文檔.

讓應用程序更快、更小、更穩定

下面的步驟是可選的,但這些能加強應用程序的穩定性和響應能力.

• 使用 pwa 包使應用程序能離線工做
• 使用緩存加載下降程序初始加載大小
• 遵循Web應用程序最佳實踐
• 移除不須要的構建文件

使用 pwa 包使應用程序能離線工做

pwa包簡化使應用程序功能有限或不需鏈接的工做. 使用此包的更多信息, 查看Making a Dart web app offline-capable: 3 lines of code.

使用緩存加載下降程序初始加載大小

可使用Dart的緩存加載的支持來減小應用程序初始化下載的大小, 如使用Angular Dart懶加載中的描述.

遵循Web應用程序最佳實踐

Web應用程序的一般建議,適用於AngularDart web應用程序. 這裏有一些資源:

• Web 基礎 (尤爲最優化社羣效率)
• 漸進式Web應用程序
• 燈塔

移除不須要的構建文件

Angular轉換器一般會產生許多中間文件(使用後綴像.ng_meta.json和.ng_summary.json) 當部署應用程序時是不須要的.移除這些文件,可使用以下的命令:

# From your app's top directory:
$ find build -name "*.ng_*.json" -exec rm {} +

嚮應用程序提供服務

能夠向AngularDart應用程序提供服務就像其它Web程序同樣. 這一部份內容指導Angular應用程序的一些建議, 正如Dart-specific資源幫助你使用 GitHub Pages 或 Firebase 來嚮應用程序提供服務.

Angular-特殊技巧

你可能須要製做服務器變動信息, 查看Angular TypeScript 部署文檔的Server configuration部分 

GitHub頁

 若是應用程序沒有路由或服務端請求支持, 你可使用GitHub頁來嚮應用程序提供服務. peanut包是爲 Dart web應用程序生成一個gh-pages分支的簡易方式.
startup_namer example使用GitHub 頁做爲主機.它的文件在filiph/startup_namer repo的gh-pages分支 而且使用peanut構建.

Firebase

使用Firebase向聊天程序經過漫遊服務, 查看使用Dart, Angular 2和 Firebase 3構建一個實時聊天Web應用程序.
其它資源:

• Google I/O 2017 代碼實驗室構建一個AngularDart & Firebase Web 應用程序漫遊使用Firebase爲服務端通訊, 可是不包含對服務應用程序的說明.
• Firebase主機代管描述如何使用Firebase配置Web應用程序.
• 在Firebase主機代管文檔中, 自定主機代管行爲覆蓋重發, 改寫, 和更多