缩小Css / Js - 正确的方法?

时间:2011-12-20 20:23:27

标签: javascript jquery css asp.net-mvc minify

在我的项目中,每个页面都有一堆依赖的Javascript和Css。虽然开发我只是把这个代码直接放到页面中,但现在我想要清理它......

似乎一般的方法是将应用程序的所有Javascript / CSS打包成两个最小化的大文件。

这种方法的好处是它可以减少带宽,因为所有的前端代码只需从服务器中提取一次......但是,我担心我会通过定义一个整体来增加应用程序的内存占用量我实际上不需要每页的大量功能 - 这就是为什么我开始以每页为基础的原因。

是其他人关心的事情,还是有某种方法可以解决这个问题?

是的,我已经考虑过创建条件函数,因为我需要为每个页面有条件地运行代码 - 尽管在我看来这开始变得有点hackish。

另外,定义从未使用的整卷Css还有很多成本吗?

4 个答案:

答案 0 :(得分:1)

为应用程序提供javascript / CSS服务,允许浏览器缓存所有页面所需的全部内容。如果您网站的标准用例是用户将留下并导航一段时间,那么这是一个很好的选择。

但是,如果您希望您的目标网页快速加载,因为用户可能会离开,请考虑仅提供此页面所需的CSS / javascript。

就大型CSS文件的性能开销而言,没有一个是明显的。所有现代浏览器都针对应用样式进行了高度优化。

至于你的javascript - 尽量不使用条件函数创建,条件命名空间创建是可接受和必需的,但你的函数应该只在一个地方声明。

答案 1 :(得分:1)

您可以为带宽做的最重要的事情是确保您的服务器正在压缩输出。应压缩任何静态文档类型(html,js,css等)。

例如jQuery Core来自约。 90KB到30KB只是因为服务器发送到浏览器的压缩输出。

如果你考虑到压缩,那么你必须创建一些庞大的自定义JS包括真正需要来分割你的JS文件。

我真的很喜欢缩小和混淆我的代码,因为我可以将我的文档放到非缩小版本中,然后缩小过程会删除生产环境的所有注释。

答案 2 :(得分:0)

一种方法是将所有共享的javascript缩小并压缩到一个文件中并在每个页面上提供服务。然后可以将特定于页面的javascript压缩/缩小为自己的文件(尽管我会考虑将任何非常常见的页面的javascript放入主javascript文件中)。

我一直习惯于将所有CSS压缩/缩小为一个文件,而不是为每个页面分隔文件。这是因为某些特定于页面的文件可能非常小,理想情况下我们会在网站上共享尽可能多的css。

像Jasper一样,最重要的是要确保你的服务器是GZIPing静态资源(例如javascript和css)。

答案 3 :(得分:0)

如果您有很多javascript代码,可以查看异步加载js文件。

像ExtJs或Qooxdoo这样的大型项目已经构建了加载器以仅加载所需的代码,但是这里有很多用于简化此操作的库,您可以在项目中使用(例如head.js,LAB.js)。 / p>

感谢他们,你可以构建只加载必要文件的应用程序,而不是整个javascript代码,如果大型应用程序可能是浏览器的重要内容。