javascript - 如何对我网站上的 .css 和 .js 文件使用 gzip 压缩？

Question

为了在我的共享托管服务器上的网站上运行 gzip 压缩，我已经辛苦了好几天。我取得了一定程度的成功，但遗憾的是 .css 和 .js 文件被排除在外，尽管我尽了最大努力。由于我使用的是共享主机，我无法访问 apache 配置文件，所以我使用我的 .htaccess 文件来实现这一点。

我目前正在处理的站点是 Peak Heat ，运行 Wordpress，下面是我正在使用的 .haccess 文件:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 week"
</IfModule>
## EXPIRES CACHING ##

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary Accept-Encoding
  </FilesMatch>
</IfModule>

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

当我使用 Firebug v1.8.3 和 Google PageSpeed v1.12 检查站点时，它显示以下文件没有被压缩:

/wp-includes/js/jquery/jquery.js?ver=1.6.1

/wp-content/themes/peak-heat/script/global.js

/wp-content/plugins/contact-form-7/jquery.form.js?ver=2.52

/wp-content/themes/peak-heat/style.css

/wp-content/plugins/contact-form-7/scripts.js?ver=3.0

/wp-content/plugins/contact-form-7/styles.css?ver=3.0

/wp-content/plugins/testimonials-widget/testimonials-widget.css

使用 online GIDZipTest 检查网站 URL 本身站点，它确认启用了压缩，但是当我检查上面的 .css 和 .js 文件时，它说它们没有被压缩。

如何在压缩我的网站时包含所有 .css 和 .js 文件？

Answer 1

AddOutputFilterByType DEFLATE text/css 将压缩设置为 deflate，而不是 gzip，因此使用 filesMatch 并设置Content-Encoding header 到 x-deflate:

<filesMatch "\.(js|css)$">
Header set Content-Encoding x-deflate
# Header set Content-Encoding compress
# Header set Content-Encoding x-gzip
</filesMatch>

如果失败，取消注释 compress 行并注释 x-deflate 行。 gzip 不是标准 Apache 安装的一部分，因此请安装 gzip module如果放气还不够。作为最后的手段，create gzipped versions of your CSS and JS files .