0

我最近使用 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 { }

应用程序路由.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 { }
4

1 回答 1

1

这里有一些减少角束大小的方法。

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

节点js

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

爪哇

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
  1. 分析您的捆绑包。

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

webpack_example

获取图表的步骤：

1.npm install -g webpack-bundle-analyzer

  1. 在您的 Angular 应用程序中，运行 ng build --stats-json（不要使用标志 --prod）。通过启用 --stats-json 你会得到一个额外的文件 stats.json

  2. 最后，运行 webpack-bundle-analyzer path/to/your/stats.json，你的浏览器会弹出 localhost:8888 的页面。玩得开心。

你可能会感到惊讶，

a）您忘记删除一些不再使用的软件包和/或

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

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

  1. 延迟加载

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

  1. 使用 Angular Universal AKA 服务器端渲染（不在 cli 中）

  2. Web Workers（同样，不是在 cli 中，而是一个非常需要的功能）请参阅：https ://github.com/angular/angular-cli/issues/2305

  3. 服务工作者见：https ://github.com/angular/angular-cli/issues/4006

参考：

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

如何减小产品包大小？

于 2021-05-01T06:47:32.230 回答