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 进行编译，它会对性能产生巨大影响