提升启动速度

[asnowwolf]

通过AoT、Server-render等技术来提高首屏加载速度

[rxjs-space]

我在尝试使用 angular-cli 作为 build tool, aot 编译之后首次载入大小在 250k 以下，耗时最久的 vendor chunk 是 150k 左右。

• demo@github
• demo@coding.net
• source repo

因为还不知道该如何（在不更改源码的情况下）在 angular-cli 里面装 webpack 的 loaders、plugins，导致不能顺利的 render markdown。 所以借用 github 来提供 render 服务，即 markdown 文件还是存放在 github 上，通过调用 github api 获取 render 好的 html，替换其中的 img:src，再用 github 的 css 来 highlight syntax。 到后来，我想不如将 api （markdonw、img等等） 全部分离出来，放在一个 api repo ，并在 api repo 存放 json 列表。source repo 通过获取 json 列表来 mock backend（点击 资料中心下面的精品文章，会停顿一下，是去读 json 文章列表）。 目前，library module下面的 articles/authors/columns 三部分是这样运转的。

之前也尝试过 angular2-webpack-starter, universal-starter，手动配置 webpack，搞了好久也没弄明白。 另外，server-render 我想先等等 angular-4.0 里的 universal。

[rexebin]

angular-cli目前还不能自己安装loader或者plugins，这也是user-ui没有用它的主要原因。

我觉得你把api分离出来的主意非常好！user-ui目前采用的是angular2-webpack-starter。如果能分离的话，完全可以尝试切换回angular-cli（我记得还有svg的支持，不知道angular-cli是否支持）。

universal我也觉得等合并到angular了才动比较好。

[rxjs-space]

inline svg 我也没弄成。我用的是两种笨方法：1）对于不需要 css 设定 style的情况，在 svg 上设定好 style，用 img 标签导入；2）对需要 css 设定 style 的情况，将若干个 svg 的源码作为 templaterefs 放在一个 component 里，随 root component 载入，然后将 templateRefs 传给一个service，之后在需要用的地方使用 ngTemplateOutlet 导入。