jawr提升EXT加载速度
大家平时在用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 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 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