网站加载问题：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. 延迟加载不会减小捆绑包的大小：延迟加载是在要求时而不是收到时

   < / li>

3. spec文件没有出现在构建中，并且.scss文件被编译到JS中（无论您使用内联样式还是URL样式，最终构建都没有区别）< / p>

4. 看到n°1点

同样，类似于点1，它取决于您运行的命令和需要编译的代码。

我看不到图像，但是您是否在应用程序上运行了lighthouse audit？它可能会告诉您可以改进的地方。