今天遇到liferay一个很郁闷的问题
问题描述
在开发环境中,直接访问liferay系统,没有问题。
在运行环境中,经过一个中间系统转发,通过https来访问liferay系统,结果页面上出现很多js错误,并且有些功能不能使用。
解决思路
经过对页面的分析,发现页面存在css和js文件的缺失。
有点莫名其妙~~
比较两个环境,发现之后的环境与之前环境的区别为:经过了一次转发,以及使用了https。
确定是这个环境使访问liferay时缺失了某些js和css文件。
立即想考虑liferay是如何加载js和css文件的。
后来想到在配置文件中有网页内容传输以及js的相关配置,想试试对配置进行修改。
最后定位下来,是portal.properties下的属性 javascript.fast.load 在起作用。
设置 javascript.fast.load=false即可。
#
# Set this property to true to load the combined JavaScript files from the
# property "javascript.files" into one compacted file for faster loading for
# production. Set this property to false for easier debugging for
# development. You can also disable fast loading by setting the URL
# parameter "js_fast_load" to "0".
#
javascript.fast.load=false
该属性的含义:设置该属性为true,属性javascript.files中指定的js文件集将整合到一个文件中,进行压缩,然后加载,这样就能更快的加载。
如果设置为false,更容易在开发中进行调试。
也可以设置URL参数js_fast_load 为0,就不会快速加载。
深入分析
为了更具体比较把该参数设置为false之后的区别,
分别保存下设置为true和false之后的同一个页面。
发现设置为false时,在保存的那个页面文件夹中多了很多js文件。
仔细比较下载下来的js文件名称:
当设置为true时,下载了5个js文件。everything_packed.js文件的大小为4M多。
当设置为false时,下载了43个js文件,包含上述5个中的四个js,除了everything_packed.js。
跟踪加载js的过程:
首先查看处理js相关的文件:
1,在portal.properties中的js相关设置:
javascript.files=\ 设置js文件列表;
javascript.fast.load=false
2,类com.liferay.portal.tools.JavaScriptBuidler中:
把javascript.files中的js文件列表合并到一个文件mergedFile中
public JavaScriptBuilder(String jsDir, String mergedFile) {
try {
StringMaker sm = new StringMaker();
String[] files = PropsUtil.getArray(PropsUtil.JAVASCRIPT_FILES);
for (int i = 0; i < files.length; i++) {
String content = FileUtil.read(jsDir + files[i]);
sm.append(content);
sm.append("\n");
}
FileUtil.write(mergedFile, sm.toString());
}
catch (Exception e) {
e.printStackTrace();
}
}
3,页面 /html/common/themes/top_js.jsp中:
该页面判断属性javascript.fast.load值,并根据取值分别处理。即设为true的时候,只需要加载everything.packed.js文件,当设为false时,则循环加载属性javascript.files中设置的文件列表。
<c:choose>
<c:when test='<%= ParamUtil.getBoolean(request, "js_fast_load", PropsValues.JAVASCRIPT_FAST_LOAD) %>'>
<%--
everything_packed.js includes all of the JavaScript files. It is
autogenerated with the Ant build-javascript task.
--%>
<script src="<%= themeDisplay.getPathJavaScript() %>/everything_packed.js?bn=<%= ReleaseInfo.getBuildNumber() %>" type="text/javascript"></script>
</c:when>
<c:otherwise>
<%
String[] javaScriptFiles = PropsUtil.getArray(PropsUtil.JAVASCRIPT_FILES);
for (int i = 0; i < javaScriptFiles.length; i++) {
%>
<script src="<%= themeDisplay.getPathJavaScript() %>/<%= javaScriptFiles[i] %>?bn=<%= ReleaseInfo.getBuildNumber() %>" type="text/javascript"></script>
<%
}
%>
</c:otherwise>
</c:choose>
4,再看ant文件,portal-web/build.xml:
在部署时,把设置的js文件列表合并到文件everything_unpacked.js中,然后使用压缩处理类,压缩成文件everything_packed.js。
<target name="build-javascript">
<java
classname="com.liferay.portal.tools.JavaScriptBuilder"
classpathref="project.classpath"
fork="true"
newenvironment="true"
>
<arg value="docroot/html/js/" />
<arg value="docroot/html/js/everything_unpacked.js" />
</java>
<antcall target="build-javascript-cmd">
<param name="js.from.file" value="docroot/html/js/everything_unpacked.js" />
<param name="js.to.file" value="docroot/html/js/everything_packed.js" />
</antcall>
<target name="build-javascript-cmd">
<java
classname="com.yahoo.platform.yui.compressor.YUICompressor"
classpathref="project.classpath"
fork="true"
newenvironment="true"
>
<arg line="--type js -o ${js.to.file} ${js.from.file}" />
</java>
<!--
http://dean.edwards.name/download/#packer
http://homepages.nildram.co.uk/~9jack9/download/packer.wsh.zip
-->
<!--<exec executable="cmd">
<arg line="/c CScript /nologo ${project.dir}/tools/pack.wsf ${js.from.file} > ${js.to.file}" />
</exec>-->
</target>
结论
由上面文件即可得出对js的处理流程:
在部署时,运行ant->build.xml->com.liferay.portal.tools.JavaScriptBuilder,进行压缩处理,文件生成到目录docroot/html/js/everything.packed.js。
页面展示时,页面/html/common/themes/top_js.jsp根据配置信息加载js文件。
存在的问题
这个过程中,还有一个疑问:在服务器目录下看到的everything.packed.js文件大小只有301k。
但是下载下来的页面,包含的everything.packed.js文件大小有4.52M。
因此下载下来的js并不是服务器目录上的那个everything.packed.js文件。
分享到:
相关推荐
liferay portlet例子 liferay portlet例子
Liferay Portal Liferay IDE
Liferay in Action,Liferay Portal Systems Development,Liferay User Interface Development,还有几个中文文档
前端开源库-eslint-config-liferayeslint config liferay,用于liferay javascript样式的eslint可共享配置
liferay portal 开发指南liferay portal 开发指南liferay portal 开发指南liferay portal 开发指南
Liferay中的AUI框架,官方叫做Alloy,是一个UI超框架,能为浏览器的三方面,结构,风格和表现建立网络应用提供连续的简单的API。 它融合了三种设计语言:HTML, CSS 和 JAVA。 准确来说AUI是Liferay在YUI的基础上...
本文档将从架构解析、portal 规范、portlet 容器、portlet 生命周期、liferay portal 工作原理等方面对 Liferay Portal 进行详细介绍。 第一部分:Liferay Portal 架构解析 Liferay Portal 的架构主要由三个部分...
liferay 超级学习文档 liferay 框架 java hibernate liferay 不用多说
liferay 二次开文档
打开Liferay IDE,Window-->Preferences-->Server-->Runtime Environment,点击右边Add…,在弹出的服务器选择里面选择Liferay,Inc-->Liferay v6.1 CE (Tomcat 7),请打“Create a new location server”打上勾。...
Liferay Web内容管理指南Liferay
liferay开发文档.pdf Liferay 是一个基于Java的开源企业门户平台,提供了强大的门户解决方案。下面是根据给定的文件信息,生成的相关知识点: Liferay portal的安装与使用 Liferay portal的安装是实现门户解决...
Liferay多文件上传与下载实例,前端包含多文件上传JS,可以动态追加文件,删除文件,还有文件类型与大小验证JS。后端可以批文件上传。 下载可以实现弹出页另存为。避免了Liferay自身下载PDF和图片时在当前页面打开的...
liferay tune
Liferay 6 入门教程
Liferay Themes[1].pdf Liferay+CMS系统培训.ppt Liferay+Portal+数据库介绍+.doc Liferay+权限管理.doc liferay-portal-5-2-systems-development-sample-chapter-5-managing-pages[1].pdf ...
该教程全面讲解了liferay最新版6.2的开发,是开发者很有必要一读的参考书,另外该教程有配套的... 备注,本教程以liferay官网的技术白皮书为蓝本,所以英文够好的童鞋,可以直接参考英文,不用再下载本教程,谢谢!~
Liferay教程
liferay6.2开发指南liferay6.2开发指南.doc
liferay快速入门quickstart