时间戳

首页 > 解决方案 > 网站加载问题：Angular 6 项目加载时间过长

javascript - 网站加载问题：Angular 6 项目加载时间过长

问题描述

延迟加载性能图

在上图中，很明显我的应用程序第一次加载花费了太多时间（如图所示 3 分钟）。我无法找到真正的原因。

关于我的申请的一些细节：

  1. 我的项目中总共只有 13 个组件。
  2. 我没有使用延迟加载，因为在我看来它不够大，无法使用延迟加载。因为构建后 main.js 文件大小只有 2.4 MB
  3. 为了缩小尺寸，我什至删除了 spec.ts 文件和不需要的 .scss 文件。
  4. 整个项目中有6个.svg文件。
  5. 这是我用于构建的命令。'ng-build --prod --aot'

如果需要任何进一步的细节，我会提供，请帮助我找出延迟背后的实际原因。

标签： javascriptcssangularperformancesass

解决方案

利用角度路由器和模块延迟加载。例如创建相关组件的模块，当访问 vie 时加载特定的 js 文件

在customer访问路由的示例中，它将加载相关的 js 文件，其他模块也是如此

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  }
];

你也可以运行ng build --prod. 这将压缩代码，将消除死代码

推荐阅读