Question

我已经开发了一个角度应用程序，并使用Windows服务器（ IIS ）中的（ ng build --prod ）将其部署到生产版本中。所有图像均已压缩，API响应花费正常时间（最长800毫秒），但是我的应用程序太慢，无法首次加载；当我在浏览器中单击URL时，完全加载应用程序大约需要75秒。之后，所有组件均正常运行。我对以下几点表示怀疑。

角负荷是否在初始化时在路径中声明了所有组件？
我是否必须使用延迟加载来克服此性能问题？

我的应用程序中的路由文件如下。

const appRoutes:Routes=[
    {path:'',component:HomeComponent},
     ...
     ]

@NgModule({
    imports:[
        RouterModule.forRoot(appRoutes)
    ],
    exports:[ RouterModule ]
})

export class AppRountingModule{

}

自从上周以来，我一直坚持这样做，关于上述内容的任何建议都将非常有帮助。预先感谢！

Answer 1

如果您不使用延迟加载，则Angular绝对会预先加载所有内容。这当然很慢（但是75秒太慢了，因此可能表明存在其他问题）。

您需要将组件组织到模块中，并使用延迟加载来加载这些模块。这样只会在首次访问路由时按需加载在延迟加载的模块中声明的组件，而不会预先加载所有组件。

这将减少您的初始应用程序加载时间。首次加载路由可能会有些延迟，但是如果该路由没有组件过载，就可以了。

此外，请注意Angular使用服务的新方式：

@Injectable({
  providedIn: 'root'
})

这意味着该服务不再需要放在provider数组中，而是按需加载。这具有简化代码组织的双重好处，如果您仅使用单例服务，则很棒。如果仅在单个模块中使用服务，则还可以指定模块而不是“ root”。

Answer 2

是否进行角向加载在以下时间在路径中声明的所有组件初始化？

如果您使用延迟加载，则不会。

我必须使用延迟加载来克服此性能问题吗？

首先，您必须确定是否存在带宽问题。您可以使用开发者工具（例如Chrome开发者工具->网络概述）来分析应用的加载概述，以了解哪个部分花费的时间太长。有时是托管服务提供商出现DNS问题或其他网络问题，或者应用程序内部的承诺使事情变慢了。

将Angular 6应用程序发布到服务器后，响应时间过长

2 个答案: