一、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压缩的更多相关文章
- MVC中的JS和CSS压缩
小说一下Js和CSS压缩的好处: 1.减小了文件的体积 2.减小了网络传输量和带宽占用 3.减小了服务器的处理的压力 4.提高了页面的渲染显示的速度 很多建议将站点的静态文件(如图片.js.css ...
- 【MVC】 js,css 压缩
[MVC] js,css 压缩 一. 引用 System.Web.Optimization.dll : 使用 Nuget ,在控制台输入 Install-Package Microsoft.AspNe ...
- 简短的几句js实现css压缩和反压缩功能
写在前面 最近一直在整理css,但因为现在Visual Studio 2013太智能了,它每每在我按ctrl+E+D进行格式化代码的时候,就会将css进行层次格式化(如下图所示),而这个格式让我老大实 ...
- JS和CSS压缩部署,提高访问效率
一直想把项目中的js和css压缩下,今天终于搞定了. 先说说几个注意的问题,目标影响着你对应的解决办法:1.压缩后的文件,是否要直接覆盖旧的文件2. 单个压缩文件重命名,还是整个目录换个名字,同时文件 ...
- Thinkphp js、css压缩类minify
说明:Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能.它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏 ...
- freemarker 实现对URL的安全编码
[#setting url_escaping_charset='utf-8'] ${yourstr?url}
- Asp.net 程序优化js,css合并与压缩
访问时将js和css压缩并且缓存在客户端,采用的是Yahoo.Yui.Compressor组件还完成的,从这里可下载 创建一个IHttpHandler来处理文件 ) }; ) ...
- grunt 合并压缩js和css文件(二)
具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modu ...
- 利用YaHoo YUI实现Javascript CSS 压缩 分类: C# 2014-07-13 19:07 371人阅读 评论(0) 收藏
网站优化时,往往需要对js文件,css文件进行压缩,以达到减少网络传输数据,减少网页加载时间:利用YaHoo的YUI可以实现Javascript,CSS,压缩,包括在线的js压缩和程序压缩,发现C#也 ...
随机推荐
- Wx-小程序中使用伪类选择器实现border-1px
.borders::before{ position: absolute; left:; top:; content: " "; width: 100%; height: 1px; ...
- 一篇文章了解JsBridge
链接:https://blog.csdn.net/duwen90/article/details/79389545
- HDU 2586(LCA欧拉序和st表)
什么是欧拉序,可以去这个大佬的博客(https://www.cnblogs.com/stxy-ferryman/p/7741970.html)巨详细 因为欧拉序中的两点之间,就是两点遍历的过程,所以只 ...
- Subroutine 子程序 Perl 第四章
子程序的定义是全局的,不需要事先声明.若重复定义子程序,后面的覆盖前面的. sub marine { $n +=1; print " Hello ,sailor number $_ ! &q ...
- Codeforces Round #577 (Div. 2) 题解
比赛链接:https://codeforc.es/contest/1201 A. Important Exam 题意:有\(n\)个人,每个人给出\(m\)个答案,每个答案都有一个分值\(a_i\), ...
- composer update 或者 composer install提示killed解决办法
出现此原因大多因为缓存不足造成,在linux环境可增加缓存解决. free -mmkdir -p /var/_swap_cd /var/_swap_#Here, 1M * 2000 ~= 2GB of ...
- 算法进阶:0x01 位运算
一.快速幂的模板代码 a^b%p: #include<iostream> using namespace std; int main() { int a,b,p; cin>>a ...
- java web编写四则运算
首先先画出一个表 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- mybatis中条件查询大于等于和小于等于写法
原符号 < <= > >= & ' "替换符号 < <= > >= & ' " createDat ...
- 吴裕雄 python 神经网络TensorFlow实现LeNet模型处理手写数字识别MNIST数据集
import tensorflow as tf tf.reset_default_graph() # 配置神经网络的参数 INPUT_NODE = 784 OUTPUT_NODE = 10 IMAGE ...