问题描述
我想通过整合和压缩CSS和JS文件来优化网站性能。我的问题是更多关于如何实现这一点的具体步骤,考虑到我面临的一个真实情况(应该是其他开发商也是典型的)。
我的页面引用几个CSS和JS文件,如下所示:
<! -
较小的文件。
因此,多个CSS和JS文件。
- >
< link type =text / css =stylesheethref =/ css / main.css/>
< link type =text / css =stylesheethref =/ css / secondary-1.css/>
< link type =text / css =stylesheethref =/ css / secondary-2.css/>
< script type =text / javascriptsrc =/ scripts / js / main.js>< / script&
< script type =text / javascriptsrc =/ scripts / js / adapter / adapter.js>< / script&
< script type =text / javascriptsrc =/ scripts / js / adapter / title-adapter.js>< / script&
对于生产版本,我想将3个CSS文件合并为一个并将其缩小例如。但是,然后,我需要更新所有需要这3个文件的页面,以引用新近CSS。这看起来容易出错(例如,你在许多文件中删除和添加一些行)。任何其他低风险的方法?
解决方案
我最终使用了来连接我的CSS和JS文件。我发现真正有用的功能是在文件保存时执行连接的能力;因为它监视相应的CSS / JS资产。一旦我得到他们正确组合到1个CSS和1个JS文件,所有其他文件可以简单地引用这两个。
你甚至可以要求CodeKit做即时缩小/压缩。 / p>
免责声明:我不以任何方式与CodeKit关联。我随机在网上找到它,它在我的开发过程中作为一个伟大的工具。自从我在一年多前使用它以来,它也有好的更新。
I am trying to optimize a site performance by consolidating and compressing the CSS and JS files. My question is more about the (concrete) steps on how to achieve this, given a real situation I was facing (should be typical among other developers too, though).
My page references several CSS and JS files like the following:
<!--
It's easier to work on smaller files during development.
Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />
<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>
For the production release, I'd like to combine the 3 CSS files into one and minify it using e.g. YUI Compressor. But then, I'd need to update all pages that needs these 3 files to reference to the newly-minified CSS. This seems error-prone (e.g. you're removing and adding some lines in many files). Any other less-risky approach? The same issue for the JS files.
解决方案 I ended up using CodeKit to concatenate my CSS and JS files. The feature that I find really useful is the ability to do the concatenation upon file save; because it monitors the respective CSS / JS assets. Once I got them properly combined e.g. to 1 CSS and 1 JS files, all other files simply can refer to these 2.
You can even ask CodeKit to do on-the-fly minification / compression.
Disclaimer: I am not affiliated in any way with CodeKit. I randomly found it on the web and it has served as a great tool in my development process. It also comes with good updates since I first used it more than a year ago.
这篇关于组合和缩小多个CSS / JS文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!