Angular 2 非单页应用程序的初始化速度缓慢

Question

我们正在评估Angular 2用于项目，我注意到一些需要澄清的点，无论这是一个Angular问题还是我使用Angular有误。

我们正在将静态页面的某些部分替换为Angular，以增强用户体验。由于被替换的元素可以在页面的任意位置，因此我们无法引导单个Angular应用程序（组件不像DOM中的树形结构，我们需要遗留模板）。我们也没有使用Angular的任何路由。

所以第一个问题是，如果非SPA站点只是要构建“小部件”，Angular是否是正确的技术选择。

第二个问题是关于性能的。如果您有一个非SPA页面，您无法省略页面重新加载。每次重新加载页面时，都必须重新初始化Angular。好处是，在这里实例化多个根组件不会显着增加引导时间，这是一个优点。坏处是，如果我使用快速入门教程中的配置，则需要大约1.7秒才能初始化应用程序和组件显示，其中大部分时间归因于系统.js，类加载器。将其更改为webpack并预编译所有内容后，仍需要300-400ms才能出现组件。这个页面与我的组件具有非常相似的引导。

这个性能是否可以进一步优化（比如说<130ms），或者我应该寻找另一种技术（例如React），因为Angular并不是用于非SPA页面的范围。

祝福

汤姆

- Tom

---

300-400毫秒对于类似Angular 2这样过度设计的庞然大物已经非常不错了，我不会再寻找更好的方案了。考虑一种PJAX方法来启动页面，然后通过pushState替换标题和正文内容以浏览静态页面。顺便问一下，如果这就是你追求的东西，为什么不直接使用Web组件呢？Angular始终专注于单页应用程序（SPA）。 - Estus Flask

嘿，感谢您的评论。不幸的是，我无法在原始系统（PHP遗留系统）上使用PJAX方法，将其视为就地处理，我们不想除了“删除此div并放入漂亮的ajax组件”之外触及它。我只是用React原型化了相同的多组件方法，并且通过预编译JSX模板，我可以使组件在80-100ms内初始化。唯一令人遗憾的是，我发现React的语法缺乏优雅感，与Angular相比感觉有些古怪。 - Tom

PJAX 的作用在于处理传统的服务器端页面，可以在不改变任何东西的情况下提高用户体验。这可能取决于组件的复杂程度，但 Angular 1 可能是一个可行的替代方案，它的引导开销很小。 - Estus Flask

自从引入预编译技术后，情况变得更好了。也不需要捆绑@angular/compiler了。 - André Werlang

我已经使用AngularJS（即Angular 1）完成了这个项目，它运行良好。而Angular 2则是一团糟。 - Aluan Haddad

Answer 1

你可以将优化到小于130ms。我目前正在开发一个混合应用程序（一些页面是静态服务器呈现的，另一些包含Angular小部件，包括路由），我们的加载/呈现时间非常快。我们使用AOT和每个小部件的应用程序捆绑包大小约为50kb。我正在使用webpack，并输出单个polyfills和单个供应商捆绑包，该捆绑包在原始布局上加载并被缓存。这样每个页面只需要下载包含该页面的任何Angular小部件的应用程序捆绑包。AOT有很大的区别。此外，请确保您已经将应用程序结构化以进行良好的树摇动，即不要加载整个RxJS库，而仅加载您需要的操作员。此外，请注意您如何组织桶，因为它可能会导致不必要的代码无法进行树摇动。

- Tyler Jennings