Angular 2 应用程序 - Google PageSpeed Insight 告诉我“启用压缩”

Question

我正在使用 Angular 2 CLI 来构建我的项目，它似乎被压缩了，但是当我使用 https://developers.google.com/speed/pagespeed/insights 测试我的网页时，我得到了 43/100 的分数，因为我需要“激活压缩”。我确实在我的 .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 洞察中不断收到“启用压缩”错误。

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

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

ng build --prod --aot

Answer 2

这只是一个想法，但我认为它会起作用。将你的 CSS 分成几部分 1.) 一个包含渲染加载器/第一次渲染所需的最少 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/)**