Angular 6供应商和主要js花费太多时间来加载数据 [英] Angular 6 vendor and main js taking too much time to load the data

问题描述

我不明白为什么在我的项目脚本中花太多时间来加载页面.看起来Angular 6从assest文件夹加载css和js花费了时间，以及加载供应商和主要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代码

this is my index.html code for loading css and js

<!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秒才能加载页面.

I am loading css and js from asset folder but still its taking 23-30 second to load the page which is too much.

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

I have a single module and multiple component project. Even if i comment my logic empty component is taking 10 seconds for loading css and js. Event after caching css and js its taking 8 seconds for displaying an empty component. What should i do please suggest

推荐答案

这可能是由于不正确的Web Pack捆绑而发生的.所以请这样做

This may happen due to incorrect web-pack bundling. so please do this

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

然后进行yarn或npm更新

then yarn or npm update

等是您需要延迟加载组件.有时，它在逻辑上不能分组到模块中，但是必须寻求负载和性能.那么main.js的大小将被破坏并按需加载.

and other thing is you need to lazy load components. sometimes it can't logically group in to modules but the seek of loading and performance you have to do it. then main.js size will be break and loaded on demand .

还尝试使用--aot进行编译，它将对性能产生巨大影响

also try to compile with --aot and it will give you a huge impact on performance

这篇关于Angular 6供应商和主要js花费太多时间来加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！