vue-cli 在 apache 服务下配置 gzip 压缩

修改webpack配置文件

config/index.js文件中配置productionGzip: true

添加apache配置

<IfModule mod_headers.c>
 # 服务器上 gzip 压缩的 css 文件是否存在
 # 检查客户端是否接受 gzip
 RewriteCond "%{HTTP:Accept-encoding}" "gzip"
 RewriteCond "%{REQUEST_FILENAME}\.gz" -s
 RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA]
 # 服务器上 gzip 压缩的 js 文件是否存在
 # 检查客户端是否接受 gzip
 RewriteCond "%{HTTP:Accept-encoding}" "gzip"
 RewriteCond "%{REQUEST_FILENAME}\.gz" -s
 RewriteRule "^(.*)\.js" "$1\.js\.gz" [QSA]
 # Serve correct content types, and prevent mod_deflate double gzip.
 RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]
 RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1]
 <FilesMatch "(\.js\.gz|\.css\.gz)$">
 # 提供正确的编码类型
 Header append Content-Encoding gzip
 # Force proxies to cache gzipped &
 # non-gzipped css/js files separately.
 Header append Vary Accept-Encoding
 </FilesMatch>
</IfModule>

配置可以直接写在.htaccess文件中
apache 配置参考自 http://httpd.apache.org/docs/2.4/mod/mod_deflate.html

如何判断是否生效?

查看浏览器响应头是否包含Content-Encoding: gzip

发表评论