为什么需要编译
- Lite模板需要编译
- 静态资源 可以编译优化
- 低级错误可以编译期检查
模板编译
Lite模板是JavaScript编写的,也可以跑在Java环境下(通过内置的Rhino JavaScript引擎)。
- 如果是Java后端环境,虽然可以即时按需编译,但也建议在上线前批量编译以提高运行效率。
- 如果是PHP环境,则必须编译后才能上线(调试期间的浏览器编译模式不应在线上开启)。
执行编译命令的时候,将自动编译-includes参数能匹配的全部文件中的模板文件,如果开启-linked 参数,则模板关联的静态文件被一并处理。 (是否是模板文件由WEB-INF/lite.xml 配置文件决定,如果没有该配置,默认配置所有xhtml扩展名文件都是模板文件)。
静态资源编译优化与检查
Lite编译器不仅是编译模板,也可以做静态资源的编译优化。所以,上线编译是非常必要的。编译器默认可以做的工作包括如下:
-
脚本合并压缩。
通过 !document.write("<script src='/static/js/absolute-path.js'></script>"); 方式聚合脚本,默认采用JSA压缩。 更多信息 。
-
CSS合并压缩 与图片合并。
通过 !import url('/static/css/absolute-path.css'); 方式聚合CSS,先聚合再压缩。 更多信息 。
-
资源有效性检查、线上地址替换和自动缓存优化。
我们推荐源码中都采用相对网站源码根目录的绝对地址方式书写资源地址。 然后,我们可以自动检测这些地址对应的静态文件是否存在,如有必要,根据自定义的规则自动替换成线上(如:CDN地址。
为了提高网页性能,我们需要做页面的缓存优化,这里,我们可以自动给所有静态资源添加内容hash,所以,只要你是基于Lite编译器的网站,你可以放心的 缓存一万年 ,提高前端性能。
如果在模板中,系统可以自动发现资源地址,如果在CSS中,建议都加上url(),如果在js中,都加上encodeURI(),以方便实现程序查找。 更多信息 。
-
模板HTML规范检查。
检查HTML5规范之外的标签,属性,主要用于发现书写错误,改良编码习惯。 更多信息 。
如何执行编译
示例
在这个编译程序中,-jar 用于指定jar库(编译程序)的地址,必须放在最开始的位置; 其他参数紧随其后,无顺序。
一般来说,你只需要include你的模板文件即可,静态资源可以通过指定 linked 参数,通过模板对静态资源的关联(或者其他形式的文件关联,如css中的图片引用)自动间接包含进去!
参数说明
-
-root
网站根目录(源代码)。可以是绝对地址或者相对于当前目录的相对地址。
在未指定该参数的时候,默认以当前目录为网站目录。
-
-output
编译目标目录(目标代码)。可以是绝对地址或者相对于当前目录的相对地址(当前目录不是指-root参数指定的目录)
-
-includes
我们打包的文件中有两类:
- 直接包含文件集: 编译命令指定的包含文件集
- 间接包含文件集: 文件编译过程分析得到的关联文件集(只有指定-linked参数为true的时候,间接包含生效)
这个-includes参数就是用来指定直接包含文件的匹配模式集。 他可同时接受多个模式,通过空格分割,模式规则为:* 代表某个目录下的任意文件,** 代表任意文件和任意级子目录下的任意文件。
直接包含的文件不一定能被打包,因为他可能被excludes 排除。 间接包含文件也不一定能被打包,因为间接包含也可以被excludes排除。
-
-linked
该参数用来指定是否启用间接包含,间接包含是指自动将关联的静态资源做为间接包含文件一起打包。
-
比如
\n\n\n\n....",null]; //
因为文件/index.xhtml 中存在:/static/js/a.js 和 /static/css/a.css 的引用; /static/css/a.css 中存在图片:/static/img/a.png的引用。 系统会分析到他们之间的关联,自动间接包含: /static/js/a.js,/static/css/a.css,/static/img/a.png 三个文件。
该参数默认为false,如果需要自动打包关联文件,需要开启他:-linked true 。
-
-excludes
剔除文件匹配模式集(用法类似-includes)。用于剔除-includes 产生的直接包含文件和编译过程中分析得到的间接包含文件中不应被打包的文件集合。
-
-translator
翻译目标代码(目前只支持php,java不需要翻译成目标代码,只需要有中间代码即可)。