如何使用JQuery加载GWT模块？ [英] How to Load GWT modules using the JQuery?

问题描述

我们的应用程序有许多随着时间的推移开发的大型GWT模块。
架构是Servlets / JSP和GWT。

我在这里简化。

Link1.jsp 包含 Link1 GWT模块


Link2.jsp 包含 Link2 Gwt模块

Link3.jsp 包含 Link3 GWT模块。

以上所有3 jsps都是相同的，即包含相同的页眉和页脚。
只有正文根据GWT模块进行更改。

现在，我们正在尝试改善性能，同时用户点击上述链接。
当用户点击 Link1.jsp 时，请求被发送到服务器，响应
返回 500-700ms .(我们在印度，因此存在延迟问题）
用户抱怨每次点击链接的应用程序缓慢。

因此，我们尝试以下内容：
由于所有jsps完全相同，只有主体正在更改，因此我们决定不使用
来使缺省href请求对于上面的链接，我们试图根据使用JQuery的点击链接加载不同的
GWT模块。

方案

我做了回答前一段时间的这个问题。基本上，使用 xsiframe 链接器编译您的模块，并使用dinamically生成的< script> 标记加载模块： $（'body'）。append（$（））

  $（＃clickMe （< script src = foo / foo.nocache.js />））; 
} 
  

更新：

试图弄清楚为什么你需要这个架构，IMO也许正在尝试一个错误的解决方案。

如果您的所有应用都基于GWT模块，为什么要引入外部JavaScript库？

GWT有自己的机制来解决超速问题我想你应该创建一个超gwt模块，其中包含你在应用程序中的所有子模块。

• 超级模块应该是你应用程序中唯一的 EntryPoint ，并且负责处理你的jsp中的链接。可能我会使用 gwtquery ，但这取决于你。


• 其他模块应使用代码加载因为它们不是 EntryPoint 但是 RunAsyncCallback 。

这个解决方案的优点非常多。你将得到一个加载得非常快的应用程序：

• 不加载jquery等外部库：压缩大约100KB。 b $ b
• 如果您使用gquery（远远小于jquery本身），那么加载的第一个片段会超小，大概30-50 KB。


• 许多共享的代码模块（gwt-core，jre等）可以转到第一个片段，并由所有模块共享，从而减少每个模块的最终下载大小。
  
• 这是一个开箱即用的解决方案，gwt编译器可以很好地分割代码并添加所有内容，以便在需求时异步加载代码。 。
  
• Java生态系统促进了模块化应用程序的开发。

GWT-2.5.1中的另一个选项以减少js大小：

• 删除堆栈代码：< set-property name =compiler.stackMode value =strip/>


• 预先压缩您的js文件：< inherits name =com.google.gwt.precompress.Precompress/>


• 使用关闭编译器： -XenableClosureCompiler


• 删除类元数据： -XdisableClassMetadata


• 关闭代码分割： -XdisableCastChecking


• code>

Our application has many large GWT modules developed over time. Architecture is Servlets/JSP and GWT.

I am simplifying here.
Link1.jsp contains Link1 GWT module
Link2.jsp contains Link2 Gwt module
Link3.jsp contains Link3 GWT module.

All the above 3 jsps are same, ie, include same header and footer. Only body is changing based on the GWT module.

Now, we are trying to improve the performance while the user is clicking the above links. When the user is clicking Link1.jsp, the request is sent to server and the response is coming back in 500-700ms.(We are in India and hence the latency issues) The user is complaining about the slowness of the application for every link click.

Hence, we are trying the following: Since all the jsps are exactly same and only the body is changing, we decided not to make default href request for the above links and we are trying to load the different GWT modules based on the click link using JQuery.

解决方案

I did answer this question a while ago. Basically, compile your modules using the xsiframe linker and load your modules using dinamically generated <script> tags:

$("#clickMe").click(function() {
  $('body').append($("<script src=foo/foo.nocache.js />")); 
}

Update:

Trying to figure out why you need this architecture, IMO maybe you are trying a wrong solution.

If all of your app is based in GWT modules, why to introduce external javascript libraries?

GWT has its own mechanism to face the problem of speeding up the initial loading. I think you should create a super-gwt-module which includes all sub-modules you have in your application.

• The super module would be the unique EntryPoint in your app, and the responsible to handle the links in your jsp. Probably I would use gwtquery for that module, but it is up to you.
• Other modules should be loaded using code-splitting, so they are not EntryPoint but RunAsyncCallback.

The advantages of this solution are a lot. And you will have an application which loads really fast:

• You dont load external libraries like jquery: about 100KB compressed.
• The first fragment to load would be super-small, probabely 30-50 KB if you use gquery (much less than jquery itself)
• Many of the code shared by the modules (gwt-core, jre, etc), could go to the first fragment and would be shared by all the modules, decreasing the final downloaded size of each module.
• It is an out-of-the-box solution, gwt compiler makes a good job splitting the code and adding everything to load it asynchronously when demanded.
• Configuring correctly your webserver, clients would cache the app for ever.
• Java ecosystem facilitates modular apps.

Another options in GWT-2.5.1 to decrease js size are:

• Remove stack code: <set-property name="compiler.stackMode" value="strip"/>
• Pre-compress your js files: <inherits name="com.google.gwt.precompress.Precompress"/>
• Use the closure compiler: -XenableClosureCompiler
• Remove class metadata: -XdisableClassMetadata
• Disable castings: -XdisableCastChecking
• Optimize code-splitting: -XfragmentCount 20

这篇关于如何使用JQuery加载GWT模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！