非SPA站点的Angular 2缓慢初始化

Question

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

我们正在用Angular替换部分静态页面，以增强用户体验。由于替换的元素可以位于页面上的任意位置，因此我们无法引导单个Angular应用程序（组件在DOM中不像树一样，我们需要传统的模板）。我们也没有使用任何Angulars路由。

首先，如果Angular是非SPA网站的正确技术，那么问题就出现了。要构建'小部件'。

第二个问题是关于表现。如果您有非SPA页面，则无法省略页面重新加载。每次页面重新加载时，都必须再次初始化Angular。这里的好处是，实例化多个根组件不会显着增加引导程序，所以这是一个加号。不好的是，如果我使用Quickstart tutorial中的配置，我需要大约1.7s来初始化应用程序和组件，并且很多时间都归因于system.js，类加载器。将此更改为webpack并预编译所有内容仍需要300-400毫秒才能显示组件。 This页面与我的组件具有非常相似的引导程序。

这可以进一步优化（比方说＆lt; 130ms）或者我应该寻找其他技术（例如React），因为它不在Angular的范围内用于非SPA页面。

干杯

汤姆

Answer 1

您可以对＆lt;进行更多优化。 130ms标记。我目前正在开发一个混合应用程序（一些页面是静态服务器渲染，其他页面包含Angular小部件，包括路由），我们的加载/渲染时间非常快。我们正在使用AOT，每个小部件的应用程序包大约是50kb。我正在使用webpack并输出单个polyfill和单个供应商包，它们加载到原始布局上并被缓存。这样，每个页面只需要为该页面包含的任何Angular小部件下拉应用程序包。 AOT让世界变得与众不同。此外，请确保您已将应用程序构建得很好，即不加载整个RxJS库，而只加载您需要的运算符。另外，请注意你的结构如何，因为它可以导致不需要的代码不被树木化。