jawr提升EXT加载速度

javacoo

浏览: 65658 次
性别:
来自: 成都

最近访客更多访客>>

bingzhea

CGAIHAO

rongsoft

liudi_2013

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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 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">
        
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统基础API...';</script>
        <jwr:script src="/bundles/bases.js"/>
        
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统EXT API...';</script>
        <jwr:script src="/bundles/libs.js"/>
        
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统EXT API...';</script>
        <jwr:script src="/bundles/utils.js"/>
        <jwr:script src="/bundles/components.js"/>
        
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统核心CSS样式...';</script>
        <jwr:style src="/bundles/system-styles.css"/>
        
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统模块CSS样式...';</script>
        <jwr:style src="/bundles/modules-styles.css"/>
        
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统DESKTOP核心模块...';</script>
        <jwr:script src="/bundles/desktop.js"/>
        
        <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-3.3.3.jar (417.4 KB)
下载次数: 20

1
顶

1
踩

分享到：

贫血，充血模型的解释以及一些经验（非常经 ... | 最新freemarker手册

2011-07-19 20:59
浏览 2575
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论