Where to store rarely used Javascript/CSS?

Anvil Q&A
1

I have a number of Javascript and CSS files that I use in my app, but in limited situations. Most users never need those files to be loaded. So I want to load them dynamically as needed. The idea is to reduce the time for the initial app load.

The main question is where those files need to live so they do not get downloaded automatically when the app loads.

Anything referenced in the Native Libraries section is clearly automatically downloaded with the rest of the app.

What about files in the Assets section? Are they automatically downloaded on the initial app load as well, or on demand as they’re referenced (e.g. from the Native Libraries section, image load, etc).

2

You can upload them in cloudpage and load it back to the app

3

Since you’re suggesting using a third-party spot to host those files, does that mean you are saying files in the Assets section are automatically downloaded when the app is loaded? Can we get confirmation on that from some of the Anvil folks?

4

The js is downloaded when it is loaded.

 < script src="myScript.js"></script>

You can try Dynamic loading so it is only downloaded when needed

5

Yes, I am familiar with that. I am looking specifically for an answer to the question I quoted above, about files stored in Anvil’s Assets section.

6

I don’t know about Javascript files but any image you store in assets definitely has an impact on the loading time. So I’ll say that it best to host your file somewhere else

1 Like
7

This may be of interest:

1 Like
8

Is there any reason the file could not be stored in a datatable as a bytes like object in a media column and then loaded as needed?
I really don’t know much about dynamically loaded JavaScript or if the browser would have a fit loading a file information from memory instead of a linked source.
Would this be possible?

1 Like
9

Anvil Extras has some helper methods for this which we use on the client side components to ensure that various bits of html, javascript and css are only loaded when that particular component is being used.

We’ve not documented their use, but you can see the code here: anvil-extras/_component_helpers.py at main · anvilistas/anvil-extras · GitHub

and, if you look at the code for the various client components, you can see those in use.

3 Likes
10

I do like those helper methods, and am using an older version copied over from Anvil Extras. The most recent version is even better, though, and is on my todo list to use.

The main question wasn’t about how to load those files, but if they could be stored in the Assets section and achieve the desired effect (e.g. be downloaded only when needed, and not automatically when the app loads, or if the files need to be stored outside of Anvil to get that effect.

@divyeshlakhotia’s observation about images in Assets impacting load time suggests that Assets isn’t a good place for these files.

That’s a good idea. I’d been working through the issues of having a dev/prod split and managing two versions of these files without having Anvil do it automatically. Data tables are a nice approach.

11

When running the app assets are lazily loaded
the exception to this is html files and theme.css, both of which are eagerly loaded.

(note this is different to the ide where all asset files are loaded)

The anvil-extras loading functions are a good way to go.

Another way you might take advantage of assets being lazy loaded is to include script tags in native libraries with the src attribute and either the async or defer keyword.
The async keyword loads the src in parallel and won’t block the loading of the page
The defer keyword waits until the page has loaded before loading the script
Some more info available at MDN

3 Likes
12

Thanks!

I’m glad that app assets are lazily loaded. The dev/prod split is much easier to handle if those scripts can be managed by Anvil.