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

Question

我已经努力了几天，想在共享托管服务器上的网站上启用gzip压缩。我已经取得了一定的成功，但遗憾的是，我的.css和.js文件被忽略了，尽管我已经尽了最大的努力。由于我使用的是共享托管，我无法访问apache配置文件，因此我不得不使用我的.htaccess文件来实现这一目标。

我正在处理的网站是Peak Heat，运行的是WordPress，以下是我使用的.htaccess文件：

# 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

使用在线 GIDZipTest网站检查网站URL本身，确认已启用压缩，但当我检查上述的.css和.js文件时，它显示它们未被压缩。

在压缩我的网站时，我该怎么做才能包括所有的.css和.js文件？

- zxon

---

@Rob W - 我刚刚检查了所有的子文件夹。该网站上没有其他的 .htaccess 文件。 - zxon

@mahnsc - 是的，HTML文件正在被压缩。 - zxon

@mahnsc - 我已按照你的建议将 .htaccess 文件复制到 /wp-content/themes/peak-heat/，但遗憾的是这并没有产生任何影响。 - zxon

这很有趣。你能在根目录的.htaccess文件中添加ServerTokens ProdOnly指令吗？我很好奇是否会从请求默认主页和styles.css页面中剥离apache版本字符串。 - mahnsc

@mahnsc - 我已经在根目录的.htaccess文件中添加了ServerTokens ProdOnly，但结果出现了内部服务器错误（500）。错误日志显示ServerTokens not allowed here。 - zxon

Answer 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模块。 如最后手段，可以创建CSS和JS文件的gzipped版本。

- Paul Sweatte

---

当我在我的Magento中使用这段代码时，它的CSS和JS停止工作。 - user2477139

这对我有用 :) 有一个问题，是否有任何方法压缩外部文件？谷歌说“cdn1.livechat.com/mife.js”可以节省14kb，但它是一个外部文件。有什么办法可以加载压缩的文件吗？ - user2997826

如果您需要压缩外部文件，有一些类似的 问题可以解决此问题，但这是特定于CDN的。 - Paul Sweatte

@Paul Sweatte：当我在.htaccess文件中使用这段代码时，CSS和JS不会加载到DOM上。您有没有其他压缩JS和CSS文件的方法？ - Nipun Tyagi

@user1640432，在答案的末尾有一个替代方法的链接。 - Paul Sweatte

Answer 2

我认为你缺少了AddOutputFilterByType DEFLATE text/javascript。加上这个之后，问题就解决了。

- Nandan Sawant