【问题标题】:how to load the angular 6 application fast in browser?如何在浏览器中快速加载 Angular 6 应用程序?
【发布时间】:2019-07-18 15:53:48
【问题描述】:

如何减少加载应用程序的时间。我的 angular6 应用程序有一个应用程序模块。在应用程序模块下,我有很多组件,例如主页、注册、登录、用户仪表板、客户端仪表板等。我的应用程序需要很长时间才能加载,我想先加载一两个组件,然后再加载其余组件在后台加载。请让我是否有可能,如果有可能怎么办。提前致谢。

【问题讨论】:

  • 使用延迟加载和角度通用。
  • 我的应用程序加载时间过长。这是相对主观的。什么定义了“太多时间”? 5 秒、1 小时、2 天?请用具体而具体的问题来完善您的问题。

标签: angular angular6 angular4-forms angular4-router


【解决方案1】:

快速加载应用程序的最佳方式是 Lazy Loader(按需加载模块)。并通过以下方式构建生产:

ng build --prod --build-optimizer

【讨论】:

    【解决方案2】:

    基本上,在 Angular 应用程序组件中,只有当它们被点击时才会加载。当你点击一个组件时,ngOninit 会被触发并加载页面。 我猜如果您的应用程序加载缓慢,然后尝试从 module.ts 文件中删除 Entry 组件。删除您认为在加载时不需要的不必要组件。您必须在 module.ts 的 entry 组件中声明所有组件文件。 页面加载缓慢的其他情况是如果您有很多图像和视频。在这种情况下,您可以尝试优化您的代码并使用 javascript 库或延迟加载功能。 如果您的数据没有被渲染或显示,因为您的后端很慢或者从后端获取数据需要时间,那么您需要优化您的后端。在这种情况下,您无法减少加载时间。

    Angular 有许多特性,可以让我们将应用程序配置为尽可能快速和高性能。 浏览以下文章。 AngularCustom Preloading and Lazy Loading Strategies with Angular

    它将指导您并帮助您选择性地加载 Angular 应用程序。

    【讨论】:

      【解决方案3】:

      使用延迟加载可以实现最佳方法。Angular-Lazy-Loading

      如果您在使用 ng serve 时使用 --prod 标志,加载可能需要一些时间,但会提高应用程序的整体性能。

      也可以使用 ng build --prod 来实现。

      【讨论】:

        猜你喜欢
        • 2019-05-27
        • 1970-01-01
        • 2023-02-03
        • 2012-03-05
        • 2018-08-18
        • 2012-12-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多