Angular 2 个应用程序 - Google PageSpeed Insight 告诉我 "enable compress"

Question

我正在使用 angular 2 CLI 来构建我的项目，它看起来很压缩，但是当我使用 https://developers.google.com/speed/pagespeed/insights 测试我的网页时，我得到 43/100 的分数，因为我需要 "turn compression active"。我确实在我的 .htaccess 中包含了以下内容：

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

但我在 pagespeed insight 中不断收到 "Enable compression" 错误。

Compressing main.md5.bundle.js could save 1.2MiB (78% reduction).
Compressing could save 19.9KiB (82% reduction).

我还需要：

移除渲染阻塞JavaScript:

inline.js
/styles.md5.bundle.js
main.md5.bundle.js

如果这对所有 Angular 2 个用户来说都是一个问题，或者是否有解决方法，您有什么想法吗？

Answer 1

这只是一个想法，但我认为它会奏效。把你的 css 分成几部分 1.) 一个包含渲染 loader/first 渲染所需的最小 css。 2.) 将所有其他 css 保留在这里。 现在您可以动态生成它

  ngOnInit(){
    let link = document.createElement('link'),
        head = document.getElementsByTagName('head')[0];
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = "assets/css/style.css";
    head.appendChild(link);
  }

**or load asynchronously (http://keithclark.co.uk/articles/loading-css-without-blocking-render/)**

Answer 2

如果您使用的是 CLI，您应该能够使用带有 prod 标志的 ng build 提供 gzip 版本（取决于您提供它的方式，您可能需要更新您的节点服务器或将压缩设置为活动状态如果您使用的是 CDN)

ng build --prod --aot

Angular 2 个应用程序 - Google PageSpeed Insight 告诉我 "enable compress"

Angular 2 app - Google PageSpeed Insight tell me to "enable compress"

pagespeed

angular