使用yui压缩生产环境上的js和css文件-HTML教程-爱易网页

使用yui压缩生产环境上的js和css文件

日期：2014-05-17　浏览次数：20564 次

使用yui压缩生产环境下的js和css文件。
本文是借助Maven为项目划分development，test，production环境的延续。

为了提高页面响应速度，一般要对页面应用的js和css文件进行压缩、合并。但在开发环境不能压缩和合并，避免影响前端web开发调试。这里提出我的实现方案，利用profile特性，判断是在test和production环境中，页面自动压缩合并。为此我们替换掉页面的<script>和<link>。使用自定的标签引入js和css文件。实例如下：

                <yui:compressor type="css" location="embed">
			/resources/css/Main.css;
			/resources/js/easyui/themes/default/easyui.css;
			/resources/js/easyui/themes/icon.css
		</yui:compressor>
		<yui:compressor type="javascript" location="embed">
			/resources/js/jquery.min.js;
			/resources/js/easyui/jquery.easyui.min.js;
			/resources/js/user.js
		</yui:compressor>

如果是在开发环境下，生成的code如下：

<link rel="stylesheet" type="text/css" href="/resources/css/Main.css"><link rel="stylesheet" type="text/css" href="
			/resources/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="
			/resources/js/easyui/themes/icon.css">
		<script type="text/javascript" src="/resources/js/jquery.min.js"></script><script type="text/javascript" src="
			/resources/js/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="
			/resources/js/user.js"></script>

如果是在生产和测试环境，js文件可以压缩合并后，存放到临时文件，页面引用临时文件。js压缩合并文件也可以嵌入在当前页面。css也是同样的。

这里简单介绍了我的的实现方案，也是借此希望看到大家能够提出更好的方案。

1 楼 hellohank 2012-01-11

我们也是使用的这个工具进行的压缩，呵呵

2 楼 tywo45 2012-01-11

yui的压缩工具,压缩不了我的那个验证框架:http://tywo45.iteye.com/blog/1221040
不知为何

3 楼 hellohank 2012-01-11

tywo45 写道

yui的压缩工具,压缩不了我的那个验证框架:http://tywo45.iteye.com/blog/1221040
不知为何

yui插件有很多参数，你试试将这两上置为下：

<nomunge>true</nomunge>
<linebreakpos>-1</linebreakpos>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

使用yui压缩生产环境上的js和css文件

相关资料更多>

推荐阅读更多>