减小Javascript和CSS文件大小的最佳方法是什么?

减小Javascript和CSS文件大小的最佳方法是什么?

What is the best method to reduce the size of my Javascript and CSS files?

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


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

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

...代替:

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

另外,请使用CSS的级联性质。例如,如果您知道您的站点将使用一个字体家族,则对body标记中的所有元素进行定义,如下所示:

1
body{font-family:arial;}

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

包括JavaScript

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

包括CSS

1
<link rel="stylesheet" href="/css/myStyle.css" type="text/css" media="All" />

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

在Web服务器级别启用zip也有帮助。


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

我认为您会发现这更容易且同样有效。

杰夫(Jeff)冒险之旅的更多细节。


我很惊讶没有人建议将您的代码压缩。节省约50%!


压缩和最小化(删除空白)是一个开始。

另外:

  • 将所有JavaScript和CSS包含项合并到一个文件中。这样,浏览器可以在单个请求中将源下载到服务器。使这成为您的构建过程的一部分。

  • 使用cache-control http标头在Web服务器级别打开缓存。将有效期设置为较大的值(例如一年),这样浏览器将仅下载源一次。要允许将来进行编辑,请在查询字符串中包括一个版本号,如下所示:

  • 我将对http://www.codeplex.com/NCOptimizer上发布的ASP.Net中的新运行时优化器进行测试。


    推荐阅读