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

Question

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

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

所以第一个问题是 Angular 是否适合非 SPA 网站。只是构建“小部件”。

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

这是否可以进一步优化(比如说 <130 毫秒)，或者我应该寻找另一种技术(例如 React)，因为它不在 Angular 的范围内，不能用于非 SPA 页面。

干杯

汤姆

Answer 1

您可以获得更优化的 < 130 毫秒标记。我目前正在开发一个混合应用程序(一些页面是静态服务器呈现的，其他页面包含 Angular 小部件，包括路由)并且我们正在获得非常快的加载/呈现时间。我们正在使用 AOT，每个小部件的应用程序包约为 ​​50kb。我正在使用 webpack 并输出单个 polyfill 和单个供应商包，它们加载到原始布局上并被缓存。这样每个页面只需要为该页面包含的任何 Angular 小部件下拉应用程序包。 AOT 让世界变得不同。此外，请确保您已将应用程序结构化为 tree-shake 良好，即不加载整个 RxJS 库，而仅加载您需要的运算符。另外，请注意你的桶的结构，因为它可能导致不需要的代码不被摇树。