1、FreeMarker實現對js和css壓縮

一、代碼壓縮理解:實際上就是將原有的文本中無用的註釋、空行、空格去掉來壓縮文件的大小。進行js和css壓縮會帶來以下好處:
1)減少了文件的體積,減小文件佔用的內存;
2)減少了網絡傳輸量和帶寬佔用;
3)減少了服務器的處理的壓力;
4)提升文件加載、頁面的渲染速度,提升性能能;javascript

二、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>

代碼理解:css

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>

html

相關文章
相關標籤/搜索