23

处理大型和/或许多 Javascript 和 CSS 文件时,减小文件大小的最佳方法是什么?

4

18 回答 18

20

除了使用服务器端压缩之外,使用智能编码是保持低带宽成本的最佳方式。您始终可以使用Dean Edward 的 Javascript Packer 之类的工具,但对于 CSS,请花时间学习CSS Shorthand。例如使用:

background: #fff url(image.gif) no-repeat top left;

...代替:

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

此外,使用 CSS 的级联特性。例如,如果您知道您的网站将使用一种字体系列,请为 body 标签中的所有元素定义它,如下所示:

body{font-family:arial;}

另一件可以帮助的事情是将您的 CSS 和 JavaScript 作为文件而不是内联或在每个页面的开头包含在内。这样,您的服务器只需在浏览器从缓存中删除后将它们提供给浏览器一次。

包括 Javascript

<script type="text/javascript" src="/scripts/loginChecker.js"></script>

包括 CSS

<link rel="stylesheet" href="/css/myStyle.css" type="text/css" media="All" />
于 2008-09-15T20:08:36.753 回答
7

Minify似乎是缩小 Javascript 的最简单方法之一。

在 Web 服务器级别打开 zip 也会有所帮助。

于 2008-09-15T18:38:11.747 回答
6

我建议不要直接调整文件,而是压缩它们。大多数客户都支持它。

我想你会发现这更容易而且同样有效。

更多来自 Jeff 的冒险经历

于 2008-09-15T18:40:45.890 回答
3

压缩和缩小(删除空格)是一个开始。

此外:

  1. 将所有 JavaScript 和 CSS 包含到一个文件中。这样,浏览器可以在一个请求中下载源到服务器。将此作为构建过程的一部分。

  2. 使用缓存控制http 标头在 Web 服务器级别打开缓存。将过期时间设置为较大的值(如一年),这样浏览器只会下载一次源。要允许将来进行编辑,请在查询字符串中包含版本号,如下所示:

<script src="my_js_file.js?1.2.0.1" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="my_css_file.css?3.1.0.926" />

于 2008-09-16T21:47:16.650 回答
3

我很惊讶没有人建议对您的代码进行 gzip 压缩。直接节省约 50%!

于 2008-09-21T22:28:19.463 回答
3

以下是您可以执行此操作的在线工具:-

以上是我似乎对你有用的工具。

于 2018-12-12T08:51:10.157 回答
2

查看问题:最佳 javascript 压缩器

根据您是否要对 JavaScript 文件进行 gzip 压缩,可能会改变您对压缩器的选择。(如果您还打算使用 gzip,目前 Packer 不是最佳选择,但请参阅上述问题以获取当前最佳答案)

于 2008-09-15T18:47:56.310 回答
1

Dojo Shrinksafe是一个使用真正的 JS 解释器的 Javascript 压缩器,因此它不会破坏您的代码。其他的可以很好地工作,但是 Shrinksafe 是在构建脚本中使用的好方法,因为您不必重新测试压缩脚本。

于 2008-09-15T18:48:25.120 回答
1

Shrinksafe 可能会有所帮助:http ://shrinksafe.dojotoolkit.org/ 我们正在使用它,它做得很好。在打包我们的 Web 应用程序时,我们从 ant 构建中执行它。

于 2008-09-15T20:19:06.043 回答
1

帮助 YUI Compressor提供了一些关于如何调整脚本以实现更好的节省的好建议。

于 2008-09-15T20:28:46.410 回答
1

Google 托管了一些预压缩的 JavaScript 库文件,您可以将它们包含在您自己的网站中。谷歌不仅为此提供带宽,而且基于大多数浏览器的文件缓存算法,如果用户已经从谷歌下载了另一个网站的文件,他们就不必再为你的网站下载了。对于那里的一些 90k+ JS 库来说,这是一个不错的小奖励。

于 2008-09-16T20:32:12.010 回答
0

对于 javascript,我使用Dean Edwards 的 Javascript Packer。它已被移植到 .NET、perl、php4、php5、WSH,甚至还有一个 aptana 插件。

Javascript 打包有几种风格——有些只是去掉注释和空格,有些会改变你的变量名以使其简洁,还有一些,好吧,我什至不知道他们做了什么,但输出肯定很小。高端压缩通过使用 eval() 函数来工作,这会给客户端带来一些额外的负担,因此如果您的脚本特别复杂,或者您正在为较慢的硬件进行设计,请记住这一点。Javascript 打包程序为您提供了您想要使用的压缩级别的选项。

对于 CSS,你能做的最好的就是去掉空格和注释。值得庆幸的是,这意味着您可以使用单行函数来实现:

function compressCSS($css) {
    return
        preg_replace(
            array('@\s\s+@','@(\w+:)\s*([\w\s,#]+;?)@'),
            array(' ','$1$2'),
            str_replace(
                array("\r","\n","\t",' {','} ',';}'),
                array('','','','{','}','}'),
                preg_replace('@/\*[^*]*\*+([^/][^*]*\*+)*/@', '', $css)
            )
        )
    ;
}

虽然该功能和 Javascript 打包程序将减少单个文件的文件大小,但为了从您的站点获得最佳性能,您还需要减少您发出的 HTTP 请求的数量。每个 Javascript 和 CSS 文件都是一个单独的请求,因此将它们组合到一个文件中将获得最佳结果。您可以使用我在我的博客(无耻的自我插件)上写的程序/技术,而不是尝试维护一个单一的庞然大物 JS 文件,网址为http://spadgos.com/?p=32

该程序基本上会读取一个“构建脚本”类型的文件,该文件会同时将多个 Javascript 和 CSS 文件组合并压缩为一个(每个)为您(或更多,如果您愿意)。所有文件的输出和显示有几个选项。那里有更大的文章,源代码是免费提供的。

于 2008-09-15T18:38:16.910 回答
0

YUI Compressor 在压缩 Javascript 和 CSS 方面做得很好。

于 2008-09-16T06:15:17.780 回答
0

YUI Compressor 有我的投票权,原因很简单,它不仅仅对代码执行正则表达式转换,它实际上构建了代码的解析树,类似于 Javascript 解释器,然后以这种方式压缩它。它通常非常小心它如何处理标识符的压缩。

此外,它还有一个 CSS 压缩模式,我没怎么玩过。

于 2008-09-16T06:36:31.783 回答
0

CssTidy是我所知道的最好的 CSS 优化器。它(可配置地)去除注释,消除空格,重写以使用许多速记规则nickf 提到的等等。压缩结果也有帮助,正如其他人所提到的。

压缩率可能相当高,它可以让您自由地广泛评论您的 CSS 而不必担心文件大小。

不幸的是,这种级别的预处理以不可预测(或可预测但不受欢迎)的方式与一些流行的“css hacks”交互。有些工作,有些不工作,有些需要配置设置来降低其他事物的压缩级别(尤其是注释)。

于 2008-09-21T22:45:44.790 回答
0

我发现JSCompress是一种很好的方法,它不仅可以缩小 JavaScript,还可以组合多个脚本。如果您只使用各种脚本一次,这很有用。压缩前节省了 70%(压缩后也节省了类似的东西)。

记得在之后添加任何版权声明。

于 2015-12-20T22:03:48.183 回答
-1

我会试驾一下发布在http://www.codeplex.com/NCOptimizer上的 ASP.Net 中的新运行时优化器

于 2008-09-15T20:21:35.087 回答
-1

尝试使用 Boryi 的 Web 压缩器工具来压缩您的标准 HTML 文件(没有嵌入 Javascript 代码和 css 代码,但可以链接或导入)、Javascript 代码(正确以 ; 结尾)和 css 代码。

于 2009-06-17T14:25:00.423 回答