如何压缩JavaScript和CSS文件?可以使用gzip进行压缩。

24

我有一个问题,我需要对一个原型库进行gzip压缩,但我完全不知道如何做,从哪里开始以及如何工作。:)

我找到了一些教程,但都没有帮助......

所以我有一个包含JS文件的文件夹:

/compressed/js/ 1.js 2.js 3.js

我在这个文件中调用这些文件进行测试:

/compresses/index.php

<link rel="javascript" type="text/js" href="js/tabs.js" />
<link rel="javascript" type="text/js" href="js/fb.js" />

那么我需要做什么呢?:)


5
请注意,<link rel="javascript"> 并不存在(遗憾),也没有 text/js 这种 MIME 类型。 - bobince
6个回答

22

你可以使用Apache的mod_deflate,实现对文件的自动压缩。

示例:

AddOutputFilterByType DEFLATE text/html text/xml text/css text/javascript 

[编辑]

如果你想检查你的 Apache 服务器是否已启用输出压缩,请将上面的示例放入 .htaccess 文件中。然后通过服务器加载一个 HTML 或 JS 文件,并检查响应头是否含有 "Content-Encoding",如果它显示为 gzip 或 deflate,则说明已启用。


在我的htaccess文件中,我需要准备我的js和css文件吗?需要将它们压缩成zip文件或类似的方式吗? - Alexander_F
你需要访问vhost/server配置文件以全局启用压缩。你不需要准备文件,它们会在请求时自动压缩。 - elias
1
哦,如果启用了输出压缩,您可以在 .htaccess 中使用上面的示例。 - elias
@elias:Nginx 怎么样? - Sankalp Singha
非常有帮助。很高兴看到我的个人网站托管方默认启用了这个功能。我需要查看IIS是否在后台执行此操作,我也想知道为什么一些IDE有一个选项可以为您压缩文件,并且将GZIP文件上传到FTP上会有什么好处。在我对IIS的快速测试中(无法保证Apache),您无法在<script>标记的一部分中使用.js.gzip,并使其工作。我对内部工作方式很感兴趣。 - EHorodyski

15
将以下代码添加到您的.htaccess文件中,它将压缩所有CSS和JS文件。
# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP

3
抱歉,如果这个问题很愚蠢,但是这就是我需要做的全部吗?我不需要手动压缩文件吗?只需将此内容放入.htaccess文件中即可? - Belladonna
4
没问题!这就是你需要做的全部内容! - Waiyl Karim

6

我之前提到的示例与这个类似,但没有压缩JavaScript。我需要添加"application/javascript"。

AddOutputFilterByType DEFLATE text/html text/xml text/css text/javascript application/javascript 

5

如果您使用的是Nginx服务器,则上述方法将无法帮助您。请通过命令vi /etc/nginx/nginx.conf编辑文件,并添加以下行。

gzip on;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types    text/plain text/html text/css
          application/x-javascript text/xml
          application/xml application/xml+rss
          text/javascript;

使用命令/etc/init.d/nginx reload重新启动nginx。这将压缩JS和CSS文件。


经过多次尝试,这对我起作用了...非常感谢。 我还添加了一些类型,因为我的js需要application/javascript: gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/xhtml+xml font/opentype font/otf font/ttf image/svg+xml image/x-icon; - Jorge

1

我需要对我的文件进行任何准备吗? - Alexander_F
不需要,但压缩它们也不是坏主意 ;) - kovshenin

1

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接