Angular 6 供应商和主 js 加载数据花费太多时间

I dont understand why in my project scripting is taking too much time to load the page. It look like angular 6 is taking time in loading css and js from assest folder as well its taking time to load vendor and main js. I dont understand why its happening.

下面是我的路由文件

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './auth-guard.service';
import { TeamCardComponent } from './team-card/team-card.component';
import { TeamComponent } from './team/team.component';
import { TeamDetailsComponent } from './team-details/team-details.component';
import { PipelineComponent } from './pipeline/pipeline.component';
import { ProfileComponent } from './profile/profile.component';
import { LeadsComponent } from './leads/leads.component';
import { TestpopupComponent } from './testpopup/testpopup.component';
import { CreateleadComponent } from './createlead/createlead.component';
import { ProductsComponent } from './products/products.component';
import { CreateTeamComponent } from './create-team/create-team.component';
import { CreatePipelineComponent } from './create-pipeline/create-pipeline.component';
import { PipelineDetailsComponent } from './pipeline-details/pipeline-details.component';
import { FormValidationComponent } from './form-validation/form-validation.component';
import { AssociateDashboardComponent } from './associate-dashboard/associate-dashboard.component';
import { AssociateProfileComponent } from './associate-profile/associate-profile.component';
import { AssociateProductComponent } from './associate-product/associate-product.component';
import { AssociateCalendarComponent } from './associate-calendar/associate-calendar.component';
import { AssociateLeadComponent } from './associate-lead/associate-lead.component';
import { TwilioVideoComponent } from './twilio-video/twilio-video.component';
import { CreateUpdateProductComponent } from './create-product-new/create-product-new.component';
import { UnAuthenticatedTaskListComponent } from './un-authenticated-task-list/un-authenticated-task-list.component';
import { ProductSignalDemoComponent } from './product-signal-demo/product-signal-demo.component';

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'app', component: AppComponent },
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'teams', component: TeamComponent, canActivate: [AuthGuard] },
  { path: 'teamdetail/:id', component: TeamDetailsComponent, canActivate: [AuthGuard] },
  { path: 'pipeline', component: PipelineComponent, canActivate: [AuthGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'leads', component: LeadsComponent, canActivate: [AuthGuard] },
  { path: 'testpopup', component: TestpopupComponent, canActivate: [AuthGuard] },
  { path: 'createlead', component: CreateleadComponent, canActivate: [AuthGuard] },
  { path: 'products', component: ProductsComponent, canActivate: [AuthGuard] },
  { path: 'createteam', component: CreateTeamComponent, canActivate: [AuthGuard] },
  { path: 'create-pipeline', component: CreatePipelineComponent, canActivate: [AuthGuard] },
  { path: 'pipeline-details/:id', component: PipelineDetailsComponent, canActivate: [AuthGuard] },
  // { path: 'form-validation', component: FormValidationComponent, canActivate: [AuthGuard] },
  { path: 'dashboard-associate', component: AssociateDashboardComponent, canActivate: [AuthGuard] },
  { path: 'profile-associate', component: AssociateProfileComponent, canActivate: [AuthGuard] },
  { path: 'product-associate', component: AssociateProductComponent, canActivate: [AuthGuard] },
  { path: 'calendar-associate', component: AssociateCalendarComponent, canActivate: [AuthGuard] },
  { path: 'lead-associate', component: AssociateLeadComponent, canActivate: [AuthGuard] },
  { path: 'twilio-video', component: TwilioVideoComponent },
  { path: 'productedit/:productId', component: CreateUpdateProductComponent, canActivate: [AuthGuard] },
  { path: 'demo', component: UnAuthenticatedTaskListComponent },
  { path: 'signals', component: ProductSignalDemoComponent },
];


@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是我用于加载 css 和 js 的 index.html 代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Tant</title>
  <base href="/">
  <meta http-equiv="x-ua-compatible" content="IE=9">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/jquery.dataTables.css" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="assets/css/ngselect.css" />

  <link rel="stylesheet" type="text/css" href="assets/css/dropzone.css" />
  <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css" />
  <link rel="stylesheet" type="text/css" href="assets/css/all.css" />
  <link rel="stylesheet" type="text/css" href="assets/css/font-family-Lato.css" />
  <link href="../node_modules/intl-tel-input/build/css/intlTelInput.css" rel="stylesheet">
  <link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.theme.default.min.css">


  <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
    crossorigin="anonymous"> -->


  <link rel="icon" type="image/x-icon" href="favicon.png">
</head>

<body class="background position-relative">
  <app-root></app-root>
  <script src="assets/js/jquery-3.3.1.slim.min.js"></script>
  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/jquery.dataTables.js"></script>
  <!-- <script src="assets/js/twilio.min.js"></script> -->
  <script type="text/javascript" src="assets/js/twilio.min.js"></script>
  <script src="assets/js/intlTelInput.js"></script>
  <script src="../node_modules/intl-tel-input/build/js/utils.js"></script>
  <script type="application/javascript" src="assets/js/owl.carousel.js"></script>




</body>

</html>

我正在从 asset 文件夹加载 css 和 js，但加载页面仍然需要 23-30 秒，这太多了。

我有一个模块和多个组件项目。即使我评论我的逻辑空组件也需要 10 秒来加载 css 和 js。缓存 css 和 js 后的事件需要 8 秒才能显示空组件。我该怎么办请建议

这可能是由于不正确的 web-pack 捆绑造成的。所以请这样做

1.just open the package.json, 
2.modify the "devDependencies" section,
3.add line "webpack-sources": "1.2.0",

然后yarn或npm更新

另一件事是你需要延迟加载组件。有时它不能在逻辑上分组到模块中，但为了加载和性能的寻求，你必须这样做。那么 main.js 的大小将被打破并按需加载。

还尝试使用 --aot 进行编译，它会给你带来巨大的性能影响