网站加载问题：Angular 6项目加载时间过多

Question

在上图中，很明显，我的应用程序花费了太多时间（如图中的3分钟）来首次加载。 我找不到实际原因。

有关我的应用程序的一些细节：

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

如果需要其他详细信息，请帮我找出延迟原因。

Answer 1

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

在示例中，当访问customer路线时，它将加载相关的js文件，其他模块也会加载

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

您也可以运行ng build --prod 。 这将压缩代码，将消除无效代码

Answer 2

1. 它可以是13个具有6K行代码的组件。 组件数量无关紧要，代码复杂度却无关紧要。

2. 延迟加载不会减小包的大小：延迟加载是在询问时而不是在收到 时加载Javascript的功能

3. spec文件没有出现在构建中，并且.scss文件被编译到JS中（无论您使用内联样式还是URL样式，最终版本都没有影响）

4. 见第1点

5. 再次，类似于点n°1，它取决于您运行的命令和需要编译的代码。

我看不到图像，但是您是否对应用程序进行了灯塔审核 ？ 它可能会告诉您可以改进的地方。