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

Question

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

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

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

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

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

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

我们还使用 https://tools.pingdom.com 测试了网站速度这就是结果:

建议的优化是:

• 指定 Vary: Accept-Encoding header :这里的解决方案应该是 配置 apache 将 Header Vary: Accept-Encoding 添加到 回复。根据我对 Vary header 的了解，它允许 缓存、CDN 或中间的其他服务器来服务不同的缓存 资源的版本取决于请求 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 header 很远 这是添加到 .htaccess 的配置，它使用 mod_expires 向 HTTP 响应添加一个漂亮的 Expires header

<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>