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

【问题标题】：How can I use gzip compression for .css and .js files on my websites?如何在我的网站上对 .css 和 .js 文件使用 gzip 压缩？
【发布时间】：2011-12-04 00:19:50
【问题描述】：

为了让 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 文件？

【问题讨论】：

你有其他.htaccess 文件/规则与这些文件匹配吗？
你的 html 文件被压缩了吗？
@Rob W - 我刚刚检查了所有子文件夹。网站上没有其他 .htaccess 文件。
@mahnsc - 是的，正在压缩 HTML 文件。
您/您能否将相同的 .htaccess 文件作为测试添加到您的 /wp-content/themes/peak-heat/ 目录以查看 styles.css 是否会被压缩？

标签： javascript css apache compression gzip

【解决方案1】：

AddOutputFilterByType DEFLATE text/css 将压缩设置为deflate，而不是gzip，因此使用filesMatch 并将Content-Encoding 标头设置为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 安装的一部分，因此如果 deflate 不够，请安装 gzip module。作为最后的手段，create gzipped versions of your CSS and JS files。

【讨论】：

当我在我的 magento 中使用此代码时，它的 css 和 js 停止工作
这对我有用 :) 一个问题，有没有办法压缩外部文件？谷歌说“cdn1.livechat.com/mife.js”可以节省 14kb，但它是一个外部文件。知道如何压缩加载它吗？
@user2997826 如果您需要压缩外部文件，有一些similar questions 涵盖了这一点，但这是特定于CDN的。
@Paul Sweatte：当我在 .htaccess 文件中使用此代码时，css 和 js 不会加载到 DOM 上。你有其他压缩js和css文件的方法吗？
@user1640432 答案末尾有一个链接，提供了另一种方法。

【解决方案2】：

我认为你错过了AddOutputFilterByType DEFLATE text/javascript。添加它为我解决了这个问题。

【讨论】：