AngularDart4.0 高级-部署 顶
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应用程序. 这里有一些资源:
移除不需要的构建文件
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主机代管文档中, 自定主机代管行为覆盖重发, 改写, 和更多