Optimize a view for performance

Flow
1

Hi,

i have a vaadin application that have two different template

One for the application ( Logged in users )
@Route(value = ViewReservation.NAV, layout = MainLayout.class)

One for a small view that expose only a calendar for reservation. ( Not logged in users )
@Route(value = ReservationView.NAV)

How is it possible to limit the load resources for instance javascript to use only the one that regards the small view ?

The goal is to increase the network performance.

Thanks

2

If you haven’t deactivated optimizeBundle it should be already optimized to only load the Js that’s needed for that particular view

3

There’s one gotcha: the JS needed for / and /login is always loaded by default so it won’t work as expected if ViewReservation.NAV is ""

1 Like
4

hi, no, I have not deactivated optimizeBundle,

the strange thing is that the full application load 25 mb and the light view 22 mb.

i load javascript in my appLayout, is it possible that they are loaded also in other views?

@JsModule(“./src/sleekplan.js”)
@JsModule(“./src/tawkto.js”)
@JsModule(“./src/hotjar.js”)

public class MainLayout extends AppLayout {
What does it happen if I use

5

Thanks Leif,

NAV is a static string

public static final String NAV = “reservation”;

6

That’s quite large. My vaadin application is using 1-3mb on the initial page request… so that sounds like a lot of bloat on your side :/

7

you are right, working on optimize it.

Any hint on how to identify unused resource ?

8

Make sure you’re measuring in production mode.

Development mode is optimized for a local network connection so it doesn’t optimize anything and also includes some additional scripts for e.g. Copilot.

When a production bundle is created, it generates a target/classes/META-INF/VAADIN/config/bundle-size.html file with an overview of what parts are included in which bundle. That should help tracking down what goes on.

1 Like