大家平时在用EXT作开发时,或多或少会对EXT效率不满,其实最主要的原因是进入主应用时,需加载EXT核心库文件及相关业务JS文件时非常耗时,造成长时间等待,在WEB应用中这个问题就更为突出,所以提速是关键。
网上有很多开源的解决方案,我这里选择的是jawr,下面介绍一下我在自己的项目(www.javacoo.org)中如何运用jawr的.配置如下:
1:web.xml
<servlet>
<servlet-name>JavascriptServlet</servlet-name>
<servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>
<init-param>
<param-name>configLocation</param-name>
<param-value>/jawr.properties</param-value>
</init-param>
<init-param>
<param-name>mapping</param-name>
<param-value>/jsJawrPath/</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>CSSServlet</servlet-name>
<servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>
<init-param>
<param-name>configLocation</param-name>
<param-value>/jawr.properties</param-value>
</init-param>
<init-param>
<param-name>type</param-name>
<param-value>css</param-value>
</init-param>
<init-param>
<param-name>mapping</param-name>
<param-value>/cssJawrPath/</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>JavascriptServlet</servlet-name>
<url-pattern>/jsJawrPath/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>CSSServlet</servlet-name>
<url-pattern>/cssJawrPath/*</url-pattern>
</servlet-mapping>
2: jawr.properties
# Common properties
jawr.debug.on=false
jawr.gzip.on=true
jawr.gzip.ie6.on=false
jawr.charset.name=UTF-8
jawr.js.bundle.names= desktop
jawr.css.bundle.names=style
# desktop
jawr.js.bundle.desktop.order=1
jawr.js.bundle.desktop.id=/bundles/desktop.js
jawr.js.bundle.desktop.mappings=/client/App.js,/client/Desktop.js,/client/Module.js,/client/Notification.js,/client/Shortcut.js,/client/StartMenu.js,/client/TaskBar.js
# systemCss bundle
jawr.css.bundle.style.order=1
jawr.css.bundle.style.id=/bundles/system-styles.css
jawr.css.bundle.style.mappings=/js/ext/resources/css/ext-all-notheme.css,/resources/css/desktop.css,/js/framework/component/css/button.css,/js/framework/component/css/tip.css,/resources/css/system.css
3:index.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://jawr.net/tags" prefix="jwr" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>春雨过后,万物芳菲-----雨菲个人记账理财管理系统-V1.0</title>
<meta http-equiv="keywords" content="记账,理财,个人记账理财, www.javacoo.org">
<meta http-equiv="description" content="雨菲个人记账理财管理系统, www.javacoo.org">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="PRAGMA" content="NO-CACHE">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="EXPIRES" content="-1">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="/resources/images/animated_favicon.gif" type="image/gif" />
<style type="text/css">
#loading-mask {
background-color: white;
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 20000;
}
#loading {
height: auto;
position: absolute;
left: 45%;
top: 40%;
padding: 2px;
z-index: 20001;
}
#loading a {
color: #225588;
}
#loading .loading-indicator {
background: white;
color: #444;
font: bold 13px Helvetica, Arial, sans-serif;
height: auto;
margin: 0;
padding: 10px;
}
#loading-msg {
font-size: 10px;
font-weight: normal;
font: 12px "sans-serif", "Arial", "Verdana";
}
</style>
</head>
<body scroll="no" >
<div id="loading-mask" style=""></div>
<div id="loading">
<div class="loading-indicator"><img src="/js/ext/resources/images/extanim32.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>春雨过后,万物芳菲- <a href="http://www.javacoo.org">javacoo.org</a><br /><span id="loading-msg">系统初始化...</span></div>
</div>
<div class="init" id="sysInitDiv">
<!-- Base JS -->
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统基础API...';</script>
<jwr:script src="/bundles/bases.js"/>
<!-- jQuery JS LIBRARY -->
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统EXT API...';</script>
<jwr:script src="/bundles/libs.js"/>
<!-- EXT JS LIBRARY -->
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统EXT API...';</script>
<jwr:script src="/bundles/utils.js"/>
<jwr:script src="/bundles/components.js"/>
<!-- DESKTOP CSS -->
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统核心CSS样式...';</script>
<jwr:style src="/bundles/system-styles.css"/>
<!-- MODULES CSS-->
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统模块CSS样式...';</script>
<jwr:style src="/bundles/modules-styles.css"/>
<!-- CORE -->
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统DESKTOP核心模块...';</script>
<jwr:script src="/bundles/desktop.js"/>
<!-- QoDesk -->
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统首页...';</script>
<script type="text/javascript" src="/modules/Index.js"></script>
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载完毕,初始化配置信息,请稍后...';</script>
</div>
</body>
</html>
所需jar包见附件jawr-3.3.3.jar
jawr提升EXT加载速度
最新推荐文章于 2018-11-05 16:52:32 发布