wicketstuff-merged-resources
About
wicketstuff-merged-resources is a set of simple helper classes to improve Wicket interface loading performance. This is achieved with improved caching configuration and merging of shared resources without the need of touching any components (it's all done inside Application.init()). The initial code base was the outcome of Stefan Fussenegger's blog series called "Wicket Interface Speed-Up".
How to get
You can get wicketstuff-merged-resources using Maven:
<repositories>
<repository>
<id>wicket-snaps</id>
<url>http://wicketstuff.org/maven/repository</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
<releases>
<enabled>true</enabled>
</releases>
</repository>
</repositories>
<dependencies>
<dependency>
<groupId>org.wicketstuff</groupId>
<artifactId>wicketstuff-merged-resources</artifactId>
<!-- use 2.1 or 2.2-SNAPSHOT for Wicket 1.3 -->
<version>3.0-SNAPSHOT</version>
</dependency>
</dependencies>
How to use
ResourceMount
Please see my blog for instructions (I'll try to add them into this page later). You can also find some example code in wicketstuff-merged-resources-examples project (SVN). But it basically cuts down to this:
ResourceMount.mountWicketResources("script", this); ResourceMount mount = new ResourceMount() .setResourceVersionProvider(new RevisionVersionProvider()); mount.clone() .setPath("/style/all.css") .addResourceSpecsMatchingSuffix(PanelOne.class, ComponentB.class, MyForm.class) .mount(this); mount.clone() .setPath("/style/all.js") .addResourceSpecsMatchingSuffix(PanelOne.class, ComponentB.class, MyForm.class) .mount(this); mount.clone() .setPath("/img/") .setDefaultAggresiveCacheDuration() .setNoVersion() .addResourceSpecs(IconScope.class, "add.png", "remove.png", "submit.png") .addResourceSpecs(ImgScope.class, "background.jpg", "image.jpg") .mount(this);
The code above will give reference the following resources in you pages (only where needed of course):
<link rel="stylesheet" type="text/css" href="style/all-42.css" /> <script type="text/javascript" src="script/all-42.js"></script> <script type="text/javascript" src="script/wicket-event-1.3.6.js"></script> <script type="text/javascript" src="script/wicket-ajax-1.3.6.js"></script>
Note that you still use the resources as you are used to, e.g.
add(HeaderContributor.forCss(MyForm.class, "MyForm.css")); add(HeaderContributor.forJavaScript(MyForm.class, "MyForm.js"));
As you see, it's very simple to get versioned resouces that are cacheable forever on the client-side. This relieves bandwidth and server and - even more important - considerably speeds up page rendering once the user's cache is primed (which it is for a year instead of an hour). Additionally, changed resources will be used as soon as they are available (i.e. after startup) - no stale data in (proxy) caches for an hour.
@JsContribution and @CssContribution
Starting from version 2.1 and 3.0 respectively, wicketstuff-merged-resources supports mounting of resources from annotations. It depends on wicketstuff-annotation, hence you may need to add another dependency to your pom.xml (Note: wicketstuff-annotation depends on spring-core. See wicketstuff-annotation for details):
<dependency> <groupId>org.wicketstuff</groupId> <artifactId>wicketstuff-annotation</artifactId> <version>1.1</version> </dependency>
To use it, simply annotate your components with @JsContribution and @CssContribution:
@JsContribution @CssContribution(media = "print") public class PanelOne extends Panel { public PanelOne(String id) { super(id); // ... } }
The example above mounts and merges PanelOne.js (default is simple name of class + ".js") into all.js (another default) and PanelOne-print.js into print.css which will be included with scope print. All that's left is to scan for annotations in your Application's init code:
ResourceMount.mountAnnotatedPackageResources("/files", "com.example.components", this, mount);
The example above will scan all components in package com.example.components (including sub-packages) for annotations and mount them using the given ResourceMount. (Additionally, it will add a new IComponentInstantiationListener to inject the necessary ResourceContributors into components.)
ResourceMountHelper (deprecated)
ResourceMountHepler has been replaced by ResourceMount in Version 2.0 and I'd encourage everybody to switch - ResourceMount is much easier to use, more flexible and offers lots of customization possibilities. However, here is how things were done with ResourceMountHelper (requires wicketstuff-merged-resources 2.0)
ResourceMountHelper.mountWicketResources("script", this); // TODO use your own implementation of IResourceVersionProvider IResourceVersionProvider p = new RevisionVersionProvider(); ResourceMountHelper h = new ResourceMountHelper(this, p); h.mountMergedSharedResource("style", "all.css", true, new Class<?>[] {PanelOne.class, ComponentB.class, MyForm.class}, new String[] {"PanelOne.css", "ComponentB.css", "MyForm.css" }); h.mountMergedSharedResource("script", "all.js", true, new Class<?>[] {PanelOne.class, ComponentB.class, MyForm.class}, new String[] {"PanelOne.js", "ComponentB.js", "MyForm.js" });
Links:
- SVN
- JIRA
- Teamcity
- Maven repository (download)
- Blog (I'll post updates there)