Angular 站点在 gtmetrix 中的性能不佳

Question

我最近用 Angular 启动了我的网站并使它成为通用的。但是当我在 gtmetrix 上检查这个站点时，它的性能并不好。谁能指导我该怎么做？我大幅缩小了照片的大小，但对 JavaScript 个文件一无所知。

Link Gtmetrix: https://gtmetrix.com/reports/tarhbama.com/4vp1UBUI/

我总是使用 ng build --prod。我使用 gzipper 文件。

app.module.ts

import { BrowserModule, BrowserTransferStateModule, makeStateKey, TransferState } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { environment } from 'src/environments/environment';
import { ServiceWorkerModule } from '@angular/service-worker';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserAnimationsModule,
    BrowserTransferStateModule,
    CoreModule,
    AppRoutingModule,
    SharedModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './core/services/auth-guard.service';
import { AdminContentComponent } from './shared/layout/admin-content/admin-content.component';
import { UiContentComponent } from './shared/layout/ui-content/ui-content.component';

const routes: Routes = [
  { path: 'admin', canActivate: [AuthGuard], component: AdminContentComponent, loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: '', component: UiContentComponent, loadChildren: () => import('./ui/ui.module').then(m => m.UiModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    initialNavigation: 'enabled',
    scrollPositionRestoration: 'enabled',
    onSameUrlNavigation: 'reload',
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

这里有几种减少 angular 包大小的方法。

无论何时构建 angular 应用程序，始终使用 ng build --prod。这个 --prod 标志将执行 aot 和 tree shaking，这将减少包的大小。（对于 angular v5 或更高版本）。对于低于该版本的版本，您将不得不使用 ng build --prod --build-optimizer
检查您的文件是否经过 gzip 压缩。（gzip 文件只有实际文件大小的 25%。）。要检查您是否对文件进行了 gzip 压缩，只需打开开发人员控制台的网络选项卡即可。在“Response Headers”中，如果您应该看到“Content-Encoding: gzip”，那么您就可以开始了。

节点js

const compression = require('compression')
const express = require('xpress')
const app = express()
app.use(compression())

Java

server.compression.enabled=true
server.compression.mime-types=text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json
server.compression.min-response-size=1024

分析您的包。

如果您的包太大，您可能需要分析您的包，因为您可能使用了不合适的大型第三方包，或者如果您不再使用某些包，您会忘记删除它。 Webpack 有一个惊人的功能，可以让我们直观地了解 webpack 包的组成。

获取图表的步骤：

1.npm 安装 -g webpack-bundle-analyzer

在您的 Angular 应用中，运行 ng build --stats-json（不要使用标志 --prod）。通过启用 --stats-json 你会得到一个额外的文件 stats.json
最后，运行 webpack-bundle-analyzer path/to/your/stats.json 你的浏览器会弹出localhost:8888的页面。玩得开心。

你可能会感到惊讶，

a) 您忘记删除一些不再使用的软件包 and/or

b) 有些包裹比预期的要大得多，可以用另一个包裹代替 and/or

c) 您错误地导入了一些库（例如，moment.js 的 80% 只是可能不需要的语言环境数据），以便您有方向寻找答案。

延迟加载

将您的模块拆分为更小的块，并仅加载需要的块。

使用 Angular 通用 A.K.A。服务器端呈现（不在 cli 中）
Web Workers（同样，不是在 cli 中，而是一个非常需要的功能）参见：https://github.com/angular/angular-cli/issues/2305
服务人员参见：https://github.com/angular/angular-cli/issues/4006

参考文献：

https://medium.com/angular-in-depth/optimize-angular-bundle-size-in-4-steps-4a3b3737bf45

Angular 站点在 gtmetrix 中的性能不佳

Bad performance of Angular site in gtmetrix

gtmetrix

angular