如何提高 Angular 6.0 应用程序的速度

Question

我们有一个基于 Angular 6 构建的全新应用程序，由 apache 2.4 提供服务。

我们设置了一个本地“预渲染”实例来使网站被搜索引擎抓取，我们尝试了 Angular Universal，但我们在库兼容性方面遇到了很多问题，因此我们决定改用预渲染解决方案。

然后我们添加了 google analytcs 跟踪代码，经过几天的数据收集，我们运行了 google PageSpeed Insights 工具。

这是我们收到的 PageSpeed Insights 分数：

PageSpeed Insights 工具收到的优化建议是：

• 减少服务器响应时间：根据谷歌，页面被提供 大约 3 秒，但我想大部分时间都花在了 预渲染（调用本地预渲染实例）。显而易见的解决方案 这是缓存预呈现的页面，但我很感激任何其他 建议。
• 启用压缩：根据 google，样式文件 (*.css) 是 不压缩。如何激活压缩？我认为某种 Apache 上的过滤器应该可以完成这项工作。谁有好的配置 为此？
• 消除首屏中的渲染阻塞 JavaScript 和 CSS 内容：报告说：“您的 无需等待以下资源即可呈现页面 加载。尝试延迟或异步加载阻塞资源，或者 将这些资源的关键部分直接内联到 HTML。” 阻塞资源是 .css 和字体，所以我真的不知道 知道如何改进这一点。有什么建议吗？
• 利用浏览器缓存：报告称图像文件 (.png, .svg 等）是可缓存的，但“未指定过期时间”。再次，我 我想我需要在 Apache 上添加某种过滤器，但我总是害怕当我们发布新版本的 Angular 应用程序时会发生什么：有什么好的配置吗？

我们还使用https://tools.pingdom.com 测试了网站速度，结果如下：

建议的优化是：

• Specify a Vary: Accept-Encoding header：这里应该是解决方案 配置 apache 以将 Header Vary: Accept-Encoding 添加到 回复。根据我对 Vary 标头的了解，它允许 缓存，CDN ot 中间的其他服务器服务不同的缓存 取决于浏览器的资源版本请求 GZIP 编码与否。有谁知道这个标题的任何副作用 例如，当我们的 Angular 应用程序的新版本时 发布了吗？
• 结合外部JavaScript：几个js用于外部跟踪 工具，所以我们在这里无能为力，但 3 javascript 是 由我们的 Angular 应用程序（main.xxx.js、polyfills.xxx.js、 运行时.xxx.js）。如何在单个 js 中组合主题？

Answer 1

一段时间后，我们对应用程序进行了一些优化；这是我们目前优化的内容，希望对其他人有用。

启用压缩： 经过一番调查，这是我们在 Angular 应用程序的.htaccess 中添加的配置，用于为 HTML、CSS、JavaScript、文本、XML 和字体设置 gzip 压缩。

请参阅 https://httpd.apache.org/docs/2.4/mod/mod_deflate.html 和 https://gtmetrix.com/enable-gzip-compression.html 以获取更多参考。

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

利用浏览器缓存： 因为我们正在使用 ng build --prod 构建 Angular 应用程序，所以应用程序是使用缓存清除打包的：文件名称类似于 runtime.06daa30a2963fa413676.js 并且我们可以在静态资源上使用相当远的 Expires 标头 这是添加到.htaccess 的配置，它使用 mod_expires 向 HTTP 响应添加一个不错的 Expires 标头

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 6 month"
    ExpiresByType image/jpeg "access 6 month"
    ExpiresByType image/gif "access 6 month"
    ExpiresByType image/png "access 6 month"
    ExpiresByType image/svg+xml "access 6 month"
    ExpiresByType text/css "access 6 month"
    ExpiresByType application/javascript "access 1 month"
    ExpiresByType image/x-icon "access 6 month"
    ExpiresDefault "access 1 month"
</IfModule>