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

Question

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

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

因此,第一个问题是Angular是非SPA网站的正确技术.要构建'小部件'.

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

这可以进一步优化(假设<130ms)或者我应该寻找其他技术(例如React),因为它不在Angular的范围内用于非SPA页面.

干杯

汤姆

Answer 1

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