一、FreeMarker实现对js和css压缩

1、代码压缩理解：实际上就是将原有的文本中无用的注释、空行、空格去掉来压缩文件的大小。进行js和css压缩会带来如下好处：
1）减小了文件的体积，减少文件占用的内存;
2）减小了网络传输量和带宽占用;
3）减小了服务器的处理的压力;
4）提高文件加载、页面的渲染速度，提高性能能;

2、ftl页面中实现对js和css文件压缩
1）可在vars.dev.properties文件中进行如下配置：
scriptCompress=true
scriptConcat=true
scriptMinSuffix=-min

2）主页面引入：(main.ftl)
<#import "common/yaSuo.ftl" as ys>
<@ys.cssurl url= ["css/search/search","css/common/main"] />
<@ys.jsurl url= ["js/search/search","js/common/main"]/>

3）公用压缩文件：yaSuo.ftl
<#-- 静态资源压缩、合并-->
<#ftl strip_whitespace=true>
<#-- jsurl 格式化js的url加入版本号，用list形式可一次可以传入多个 -->
<#macro jsurl url=[] scriptCompress='${scriptCompress}' scriptConcat='${scriptConcat}'>
   <#if scriptConcat == 'true'>
       <script type="text/javascript" src="${scriptHost}/??
       <#list url as js>
           <#if js?index_of("min") lt 0 && scriptCompress =='true'>
               ${js}${scriptMinSuffix}.js
           <#else>${js}.js
           </#if>
            <#if js_has_next>
           ,
           </#if>
       </#list>?${version}">
       </script>
   <#else>
       <#list url as js>
           <script type="text/javascript" src='${scriptHost}/
           <#if js?index_of("min") lt 0 && scriptCompress == 'true'>
               ${js}${scriptMinSuffix}.js?${version}
           <#else>${js}.js?${version}
           </#if>'>
           </script>
       </#list>
   </#if>
</#macro>
<#-- cssurl 格式化css的url加入版本号，用list形式可一次可以传入多个 -->
<#macro cssurl url=[] cssCompress='${cssCompress}' cssConcat='${cssConcat}'>
   <#if cssConcat =='true'>
       <link rel="stylesheet" type="text/css" href="${scriptHost}/??
       <#list url as css>
           <#if css?index_of("min") lt 0 && cssCompress == 'true'>
               ${css}${scriptMinSuffix}.css
           <#else>${css}.css
           </#if>
           <#if css_has_next>
           ,
           </#if>
       </#list>?${version}"/>
   <#else>
       <#list url as css>
           <link rel="stylesheet" type="text/css" href='${scriptHost}/
           <#if css?index_of("min") lt 0 && cssCompress == 'true'>${css}${scriptMinSuffix}.css?${version}
               <#else>${css}.css?${version}
           </#if>
           '
           />
       </#list>
   </#if>
</#macro>

代码理解：

1）ftl指令详解：http://freemarker.foofun.cn/ref_directive_ftl.html
   strip_whitespace：这将开启/关闭空白剥离。合法的值是布尔值常量 true 和 false (为了向下兼容，字符串 "yes"，"no"， "true"，"false" 也是可以的)。默认值(也就是当你不使用这个参数时)是依赖于程序员对 FreeMarker 的配置，但是对新的项目还应该是 true。
   gt: greater than 大于
   gte: greater than or equal 大于等于
   lt: less than 小于
   lte: less than or equal 小于等于

2）macro指令的小示列：
模板文件：
<#macro list title items>
<p>${title?cap_first}:
<ul>
    <#list items as x>
      <li>${x?cap_first}
    </#list>
</ul>
</#macro>
<@list items=["mouse", "elephant", "python"] title="Animals"/>

输出结果：
<p>Animals:
<ul>
<li>Mouse
<li>Elephant
<li>Python
</ul>

巴特西

一、FreeMarker实现对js和css压缩

最新文章

热门文章