zoukankan      html  css  js  c++  java
  • 一、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>
    3、项目中给每个flt页面设置相同的全局变量值:(如:js或者css的版本号,防止)

  • 相关阅读:
    css清除select默认的样式
    网站性能优化的方法--Yahoo
    jQuery写toTop(回到顶部)效果
    jquery的addClass、removeClass、toggleClass方法
    css选择器汇总
    日期对象的正确写法
    顶会热词统计
    《人月神话》读后感二
    新闻详情页实现
    第八周总结
  • 原文地址:https://www.cnblogs.com/jiarui-zjb/p/10596826.html
Copyright © 2011-2022 走看看