具有多个组件的 Angular 模块加载速度变慢

Question

我发现了一个延迟在 Angular 2 中启动我的模块的场景。 我不是 Angular 方面的老手。这是我的第一个项目。所以，不知道如何处理这种情况:

我创建了一个小型应用程序，其中包含各种模块。每个模块有 2-3 个子组件。但是我的 SignUp Module 和 MyAccount Module 是各种组件的混合体。

下面是我的应用程序的层次结构。

app
--Front-end
----videos
------Detail
--------videodetail.component.html
--------videodetail.component.ts
------List
--------list.component.html
--------list.component.ts
------videos.component.html
------videos.component.ts
------videos.routing.ts
------videos.module.ts
----article
------article.component.html
------article.component.ts
----front-end.routing.ts
----front-end.module.ts
----front-end.component.ts
----front-end.component.html
--signup
----stepone
------stepone.component.html
------stepone.component.ts
----steptwo
------steptwo.component.html
------steptwo.component.ts
----stepthree
------stepthree.component.html
------stepthree.component.ts
----stepfour
------stepfour.component.html
------stepfour.component.ts
----final
------final.component.html
------final.component.ts
----OneMore
------onemore.component.html
------onemore.component.ts
----signup.module.ts
----signup.component.ts
----signup.routing.ts
----signup.component.html app.module.ts app.component.ts app.component.html app.routing.ts

下面是 child 的signup-routing.module.ts路由代码。

const routes: Routes = [
    { path: '', component: SignupComponent },
    { path: 'terms', component: TermsComponent },
    { path: 'first', component: StepOneComponent },
    { path: 'second', component: SteptwoComponent },
    { path: 'third', component: StepthreeComponent },
    { path: 'third/:status', component: StepthreeComponent },
    { path: 'third/:status/:type', component: StepthreeComponent },
    { path: 'success', component: FinalComponent }

根据要求，下面是SingupComponent和BaseComponent的构造函数。

export class BaseComponent implements OnInit  {
    public SiteConfigurations: SiteConfigurations;
    public options: any
    constructor() {
        this.SiteConfigurations = new SiteConfigurations();
        var currentClass= this;
        window["SetDefaultImage"] = function(){}
        window["SetDefaultImage"]=function (event){
          currentClass.SetDefaultImageWithCurrentClass(event,currentClass);
        };
    }

    ngOnInit() {
      //  this.options = Baser
    }

    SetDefaultImageWithCurrentClass(event,currentClass) {
        event.target.src = currentClass.SiteConfigurations.EnvironmentConfigurations.siteURL+"assets/images/no-image.png";
    }
    SetDefaultImage(event) {
      this.SetDefaultImageWithCurrentClass(event,this);
    }
}

export class SignupComponent extends BaseComponent implements OnInit, OnDestroy {
constructor(router: Router, accountService: AccountService) {
    super();
    this.accountService = accountService;
    this.router = router; }

    ngOnInit(): void {
        this.packageType = this.getStepData("packageType");
        this.stepone = this.getStepData("stepone");
        this.steptwo = this.getStepData("steptwo");

        this.options = this.accountService.notificationService.options;
        this.clear = true;
    }
}

下面是我的 app-routing.module.ts 代码。

const routes: Routes = [
    {
        path: '', component: FrontEndComponent,
        children: [
        { path: 'home', loadChildren: './home/home.module#HomeModule' },
        { path: 'videos', loadChildren: './videos/videos.module#VideosModule' },
        { path: 'myaccount', loadChildren: './users/users.module#UsersModule', canActivate: [AuthGuard] },
        { path: 'signup', loadChildren: '../signup/signup.module#SignupModule' }]   
    } 
];

当我运行我的应用程序并加载主页时，当我第一次单击 SignUp 时，需要一些时间来执行 signup.component.ts 的构造函数 我发现的原因是在注册模块中有各种子组件在第一次调用注册模块时加载(即生成 block 文件时)。 AccountModule 也存在同样的问题，其中大约 8 到 10 个子组件用于在用户帐户仪表板中显示数据。

在调用 SignUp 组件的构造函数和 onInit 方法之前，它会保持 2-3 秒，然后转到服务器端从数据库中获取数据。 而其他模块(如视频、文章和其他模块)只有 2 个且最多 3 个子组件，并且它们会立即执行。

Answer 1

在不访问代码库的情况下找出您的应用程序中的问题并不容易，但我尝试同样地给出一些可以帮助您的好建议。

使用@angular/cli

我知道很多人拒绝使用构建工具，因为如果配置得当，webpack 已经能够执行优化和丑化，但这些人无法想象它有多强大这个命令:

ng build --prod

它将:

1. 提前 (AOT) 编译您的代码
2. 设置生产标志
3. 散列文件名(以防止缓存)
4. 不生成源 map
5. 优化您的代码(来自 Angular 5)
6. 在代码上运行UglifyJS

因此，如果您不使用 @angular/cli，请开始使用它。如果你使用它但你仍然没有更新你的版本，那就更新它。

使用源 map 资源管理器

source-map-explorer是一个让您知道文件权重来自何处的工具。也许您导入了整个库，但只需要几个函数？您可以通过此工具发现它。

Chrome 是你的 friend

另一个经常被忽视的强大工具是 Chrome 开发者工具。您不需要安装任何东西，只需按 F12，单击性能 选项卡和 start profiling .

也许您使用了繁重的同步功能，这会减慢所有应用程序的速度？也许有一个功能需要优化？您可以发现它，在分析之后您可以看到您的应用程序在哪些地方花费了更多时间，单击调用树选项卡您可以发现该函数的名称和来源。

出于类似目的，您还可以查看 webpagetest.org .

使用 service worker

加速应用程序的一种众所周知的方法是使用服务 worker 。您可以点击 here 阅读一篇有趣的文章.

想法是应用 PRPL pattern到 Angular(这是一种旨在优化解析和执行的模式，以便通过积极的代码拆分和缓存在短时间内实现交互性)。

我希望我的一些提示可以引导您朝着正确的方向前进。让我知道这件事