gtmetrix 中 Angular 站点的性能不佳 [关闭]答案

【问题标题】：Bad performance of Angular site in gtmetrix [closed]gtmetrix 中 Angular 站点的性能不佳 [关闭]
【发布时间】：2021-07-24 07:43:47
【问题描述】：

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

链接 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 { }

app-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 { }

【问题讨论】：

标签： angular gtmetrix

【解决方案1】：

这里有一些方法可以减少角度束大小。

无论何时构建 Angular 应用程序，始终使用ng build --prod。这个 --prod 标志将执行 aot 和 tree shaking，这将减小包大小。（对于 angular v5 或更高版本）。对于低于该版本的版本，您必须使用 ng build --prod --build-optimizer
检查您的文件是否经过 gzip 压缩。（gzip 压缩的文件只有实际文件大小的 25%。）。要检查您是否已压缩文件，只需打开开发人员控制台的网络选项卡。在“响应标头”中，如果您应该看到“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 install -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) 您忘记删除一些不再使用的软件包和/或

b) 有些包比预期的要大得多，可以用另一个包替换和/或

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

延迟加载

将您的模块拆分成更小的块并仅加载所需的块。

使用 Angular Universal 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

How to decrease prod bundle size?

【讨论】：