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

Question

我不明白为什么在我的项目脚本中花太多时间来加载页面。看起来Angular 6从assest文件夹加载css和js花费时间，以及加载供应商和主要js花费的时间。我不明白为什么会这样。

下面是我的路由文件

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>

我正在从资产文件夹加载css和js，但仍然需要23-30秒才能加载页面。

我有一个模块和多个组件项目。即使我发表评论，我的逻辑空白组件也需要10秒钟来加载CSS和JS。缓存css和js之后的事件，它花费8秒来显示一个空组件。我该怎么办建议

Answer 1

这可能是由于不正确的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进行编译，它将对性能产生巨大影响