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.

我有一个模块和多个组件的项目.即使我评论我的逻辑空组件加载 css 和 js 也需要 10 秒.缓存 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",

然后纱线或 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屋！