Javascript 如何提高Angular2应用程序的加载性能？

Angular2应用程序加载缓慢，如何提高加载时的性能

我在html5中使用Angular2、typescript

目前，我的应用程序需要4秒钟才能加载。 我使用Firebase托管并使用cloudflare

我正在做的事情/信息：

• 我压缩了图像
• 我缩小css
• 我缩小js
• 我在脚本上使用异步
• 我的脚本在我的文件夹中
• 脚本大约为700kb
• 我用谷歌速度测试得到65%
• 我使用了我使用的LIB的缩小版本，例如引导等
• 使用systemjs
• 这是种子应用程序im，使用：

流量：

当应用程序加载时，它会显示一个蓝屏（这是引导css），然后4秒钟后，应用程序加载并运行得非常快。但加载需要4秒钟。systemjs缩小到的app.js文件似乎减慢了整个应用程序的速度，并且显示视图的速度不够快

这是我的网站速度测试：

这是我的网站：

如果您需要有关我的应用程序以及我可以做的任何其他事情的更多信息，请告诉我。

关于“代码拆分”的情况如何

从网页包站点：

“对于大型web应用程序，将所有代码放在一个文件中是没有效率的，尤其是在某些情况下只需要一些代码块的情况下。Webpack有一个功能，可以将代码库拆分为“块”，按需加载。其他一些捆绑包称之为“层”、“汇总”或“片段”。此功能称为“代码拆分”

链接此处：

请注意，Angular CLI使用Webpack

---

此外，请确保如果您的应用程序使用数据调用进行引导，您不会在等待这些调用返回时中断组件的呈现。承诺、异步等。

如果不亲自操作整个代码库和后端，则很难诊断出您正面临的精确问题（正如其他人所说，这个问题可能根本不是角度问题）

话虽如此，我强烈建议您开始使用。它是由angular团队设计的，用于在易于使用的命令行界面中完成所有需要执行的操作。因此，我的答案取决于angular cli的使用

以下是优化ng2项目生产的一般方法：

1）提前（AoT）编译-捆绑/缩小/树抖动

听着，忘记配置一堆吞咽任务来完成所有这些任务的麻烦吧。angular cli只需一个简单的步骤即可处理捆绑/缩小/树抖动/AOT编译：

ng build-prod-aot

这将在“dist”文件夹中生成以下js文件：

inline.d41d8cd98f00b204e980.bundle.js
vendor.d41d8cd98f00b204e980.bundle.js
main.d41d8cd98f00b204e980.bundle.js
styles.4CEC2BC5D44C666B4929AB2BB9C4D8EFA.bundle.css

一个单页应用程序在加载时通常需要花费更多的时间，因为它一次加载所有必需的内容

我也遇到了同样的问题，我的团队使用以下方法优化了我们的项目，从8秒加载到2秒

延迟加载模块：延迟加载模块有助于减少启动时间。通过延迟加载，我们的应用程序不需要一次加载所有内容，它只需要加载用户在应用程序首次加载时希望看到的内容。延迟加载的模块只会在用户导航到其路径时加载.Angular2在其最终发行版RC5中引入了模块。请参阅下面的分步指南。

Aot编译：使用Aot，浏览器下载预编译版本的应用程序。浏览器加载可执行代码，以便可以立即呈现应用程序，而无需等待先编译应用程序

它减少了负载大小：如果应用程序已经编译，则无需下载Angular编译器。编译器本身大约只有Angular的一半，因此省略它会显著减少应用程序负载。有关更多信息，请参阅

Webpack:Webpack是一种流行的模块绑定器，用于将应用程序源代码捆绑成方便的块，并将这些代码从服务器加载到浏览器中。您可以使用Webpack配置Angular 2 web应用程序（请参阅）

从index.html中删除脚本、样式表：删除index.html中不需要的所有脚本和样式表。您可以通过调用服务在组件本身中动态加载这些脚本

创建一个文件script.service.ts，该文件可以根据需要加载该组件的任何脚本

\script.service.ts

import { Injectable } from '@angular/core';
declare var document: any;

@Injectable()
export class Script {

  loadScript(path: string) {
    //load script
    return new Promise((resolve, reject) => {
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = path;
      if (script.readyState) {  //IE
        script.onreadystatechange = () => {
          if (script.readyState === "loaded" || script.readyState === "complete") {
            script.onreadystatechange = null;
            resolve({ loaded: true, status: 'Loaded' });
          }
        };
      } else {  //Others
          script.onload = () => {
            resolve({ loaded: true, status: 'Loaded' });
          };
      };
      script.onerror = (error: any) => resolve({ loaded: false, status: 'Loaded' });
      document.getElementsByTagName('head')[0].appendChild(script);
    });
  }
}

这只是一个动态加载脚本的示例代码，您可以根据需要自定义和优化它。 对于样式表，您应该使用样式URL将其加载到组件中

使用浏览器缓存：当您使用浏览器缓存时，您的网页文件将存储在浏览器缓存中。对于重复访问，您的网页将加载得更快，共享相同资源的其他网页也会加载得更快。有关详细信息，请参阅

最小化app.component.ts中的代码：最小化app.component.ts中的代码，该代码在应用程序加载或重新加载时始终运行

设置应用程序初始化数据：如果您在项目或组件中多次使用相同的api调用， 或者您依赖于多个组件中的相同数据，而不是多次调用api，您可以做的是保存 在应用程序初始化时，数据将作为服务中的一个对象。该服务将在整个项目中充当单例，您可以 可以在不调用api的情况下访问该数据

---

逐步延迟加载模块

import { NgModule } from '@angular/core';
import { UserModule } from './user/user.module';
import { AdminModule } from './admin/admin.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login.component';

@NgModule({
  imports: [UserModule, AdminModule],
  declarations: [AppComponent, LoginComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';

const routes: Routes = [
  { path: 'login', component: 'LoginComponent' }, //eager loaded
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }, // Lazy loaded module
  { path: 'user', loadChildren: './user/user.module#UserModule' }  //lazy loaded module
];

ng build --prod --aot --optimization --build-optimizer --vendor-chunk --common-chunk --extract-licenses --extract-css --source-map=false