gtmetrix 中 Angular 站点的性能不佳

编程问答 2022-05-04

问题描述

我是 Angular 的新手。我最近用 Angular 推出了一个网站，并让它变得普遍。但是当我在 gtmetrix 站点上查看时，它的性能根本不理想。谁能指导我该怎么做？我大幅缩小了照片的大小，但对 JavaScript 和样式文件一无所知。

https://gtmetrix.com/reports/tarhbama.com/YyPwT8nS/

解决方法

这里有几种减小角束大小的方法。

  1. 无论何时构建 Angular 应用程序，请始终使用 ng build --prod。这个 --prod 标志将执行 aot 和 treeshaking，这将减少包的大小。（对于 angular v5 或更高版本）。对于低于该值的版本，您必须使用 ng build --prod --build-optimizer
  2. 检查您的文件是否被 gzip 压缩。 （gzipped 文件只有实际文件大小的 25%。）。要检查您是否已压缩文件，只需打开开发者控制台的网络选项卡。在“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
  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) 您错误地导入了一些库（例如，80% 的 moment.js 只是可能不需要的语言环境数据），以便您有一些方向可以寻找答案。

  1. 延迟加载

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

  1. 使用 Angular Universal A.K.A.服务器端渲染（不在 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

How to decrease prod bundle size?

angularangulargtmetrix