我该如何提高Angular2应用程序的负载性能？
Angular2的应用程序加载速度慢，我怎样才能提高性能的负载？
我使用Angular2，使用html5打字。
目前我的应用程序需要4秒加载。 我使用Firebase托pipe并使用cloudflare。
我正在做的事情/信息：
- 我压缩了图像。
- 我缩小CSS
- 我把js缩小了。
- 我在脚本上使用asynchronous。
- 我的脚本在我的。
- 脚本大约700kb
- 我用谷歌速度testing，并得到65％
- 我使用的库的缩小版本，例如bootstrap等
- 使用systemjs。
- 这是使用的种子应用程序： https ： //github.com/mgechev/angular-seed
stream：
当应用程序加载它显示一个蓝色的屏幕（这是引导的CSS），然后4秒后，应用程序加载和工作非常快。 但需要4秒加载。 这似乎是systemjs最小化的app.js文件正在减慢整个应用程序，而不是足够快地显示视图。
这是我的网站速度testing： https ： //www.webpagetest.org/result/161206_F5_N87/
这是我的网站：
https://thepoolcover.co.uk/
让我知道，如果你需要更多的信息关于我的应用程序和我可以做的任何其他事情。
如何“代码分割”。
从Webpack网站：
“对于大型Web应用程序来说，把所有的代码放到一个单独的文件中是没有效率的，特别是在某些情况下只需要一些代码块.Webpack有一个function可以将你的代码分割成按需加载的”块“。捆绑商把它们称为“图层”，“汇总”或“碎片”，这个特征被称为“代码分割”。
链接：
https://webpack.github.io/docs/code-splitting.html
请注意，Angular CLI使用Webpack。
此外，请确保您的应用程序使用数据调用进行引导，以防止等待这些调用返回的组件呈现。 承诺，asynchronous等
单个页面应用程序通常在加载时需要更多的时间，因为它一次加载所有必要的东西。
我也面临同样的问题，我的团队已经优化我们的项目从8秒加载到2秒使用以下方法。
-
延迟加载模块：延迟加载模块有助于减less启动时间。 通过延迟加载，我们的应用程序不需要一次加载所有内容，只需要加载用户在加载应用程序时所期望的内容。 只有当用户导航到他们的路线时才会加载延迟加载的模块。 Angular2在其最终版本RC5中引入了模块。 请参阅下面的分步指南。
-
Aot编译：使用AoT，浏览器下载应用程序的预编译版本。 浏览器加载可执行代码，以便可以立即呈现应用程序，而无需等待先编译应用程序。
它减less了有效负载的大小：如果应用程序已经编译，则不需要下载Angular编译器。 编译器大约是Angular的一半，所以省略它大大减less了应用程序的有效载荷。 欲了解更多信息，请参阅。
-
Webpack： Webpack是一个stream行的模块打包工具，它将应用程序源代码捆绑在方便的块中，并将服务器中的代码加载到浏览器中。 您可以使用webpackconfiguration您的Angular 2 Web应用程序（请参阅本指南 ）。
-
从index.html中删除脚本，样式表：删除index.html中不需要的所有脚本和样式表。 您可以通过调用服务在组件本身中dynamic加载这些脚本。
创build一个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); }); } } 这只是一个dynamic加载脚本的示例代码，您可以根据自己的需要自定义和优化它。 对于样式表，您应该使用styleUrl将其加载到组件中。
-
使用浏览器caching：当您使用浏览器caching时，您的网页文件将被存储在浏览器caching中。 您的网页加载速度要快得多，重复访问者的页面也会更快，其他页面也会共享相同的资源。 欲了解更多信息https://varvy.com/pagespeed/leverage-browser-caching.html
-
最小化app.component.ts中的代码：最小化app.component.ts中存在的代码，它总是在应用程序加载或重新加载时运行。
-
在应用程序上设置数据初始化：如果您在项目或组件中多次使用相同的api调用，或者依赖多个组件中的相同数据，而不是多次调用api，则可以将数据保存为对象在应用程序初始化服务。 该服务将在整个项目中充当单例，您可以在不调用API的情况下访问这些数据。
一步一步延迟加载模块
-
模块化结构：我们必须将我们的应用程序分成不同的模块。 例如，一个应用程序可能有一个用户端和一个pipe理端，每个应用程序都有自己的不同组件和路由，所以我们将这两个端口分成模块admin.module.ts和user.module.ts。
-
根模块：每个Angular应用程序都有一个根模块类。 按照惯例，它是一个名为app.module.ts的名为AppModule的类，该模块将导入上述两个模块以及用于引导的AppComponent。 您也可以根据您的需要声明多个组件。 app.module.ts中的代码示例：
\ app.module.ts
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 { }
- 路线：现在在你的路线，你可以指定如下
\ app.router.ts
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 ];
现在，当应用程序加载时，它只会加载LoginComponent和AppComponent代码。 这些模块只会在我们访问/ admin或/ user路由时加载。 因此，它会减less装载到浏览器中的有效负载的大小，从而导致快速加载。
- 嵌套模块：就像app.module一样，每个模块都有自己的一套组件和路由。 随着项目规模的扩大，模块内部模块的嵌套是最佳的优化方式，因为我们可以在需要的时候懒惰地加载这些模块。
请注意
以上代码仅供参考，具体请参考https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html
如果没有亲身体验到您的整个代码库和后端（如其他人所暗示的，这个问题可能根本不是angular度的），那么很难诊断出您正在遇到的问题。
话虽如此，我强烈build议你开始使用angular-cli 。 它是由angular度团队devise的，在一个简单易用的命令行界面中完成所有你需要做的事情。 所以我的回答是基于angular度的使用。
下面是你可以做的一些优化你的ng2项目的产品：
1）提前（AoT）编译 – 捆绑/缩小/树状结构
看，忘记configuration一堆吞咽任务来完成所有这些事情的头痛。 angular色cli在一个简单的步骤中处理Bundling / Minification / Tree-shaking / AOT编译：
ng build -prod -aot
这将在您的“dist”文件夹中生成以下js文件：
inline.d41d8cd98f00b204e980.bundle.js vendor.d41d8cd98f00b204e980.bundle.js main.d41d8cd98f00b204e980.bundle.js styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.css
因为它的SPA和angular 2 init太慢了。 而已。 加上RXjs，吨polifills等AOT可以帮助，但很多angular2库不工作。 angular度通用真的有帮助
尝试通过运行ng serve --sourcemap=false禁用源映射
