Serve Minified Assets

Feature Requests
#1

Currently, all the Anvil assets including theme.css, Native Libraries, etc. are unminified. This is a waste of resources and results in longer loading times for Apps.

On the other hand, it would have been much faster if the files returned were minified. I can minify files on my own too but that would mean that every time I had to make a change in them, I would have to unminify them, make the changes and minify them again. But if Anvil would do that job for you, things will be much easier.

And maybe, if they want to take things a step forward, the python files can also be minified (up to a certain extent) as Python Minifier (python-minifier.com) does.

6 Likes
Monorepository vs Microservices for large 1000+ Files Anvil App
#2

Does minification preserve line numbers? (Helpful for diagnosing unexpected Exceptions…)

1 Like
#3

Thanks for pointing it out. I realized that minification of Python files might not be a good idea since tracebacks will not be possible.

But I will still request that Anvil continues with the minification of HTML, CSS, and JS files since they have no tracebacks anyway.

2 Likes
#4

An option to minify the Python code may still make sense, once the App’s bugs are worked out.

For one thing, it will likely speed up initial loads. It may also discourage some browser users from casually tampering with the Python code…

3 Likes
#5

I’d like to see several options.

One to minify only when not running in the IDE.

Some for what to minify (e.g. Javascript, CSS, Python, etc)

5 Likes
#6

What is the percentage of loading time that would be gained by minifying ?

#7

That’s something that cannot be predicted. Minifying will squeeze everything into a single line and remove any extra spaces and comments. This will vary for every file depending on how much extra space they have lying around. For me, I saw a 25% reduction in my theme.css file size after minification.

1 Like
#8

As an addition to it, can we also have GZIP text compression? PageSpeed Insights estimates a huge decrease in loading time after implementing it.

2 Likes
#9

When the recent newsletter claimed a reduced time in loading websites, it got me curious. Looks like the change they made was to serve websites using GZIP text compression and the speed is indeed noticeable.

#10

Came up with my own temporary solution for this.

I created a simple python file that does the job of automatically cloning and pushing your code after minifying it. Your master branch will remain as it is and a new branch called minified_code will be created having the minified code. You can test the minified version and publish it if everything works well.

All your python code as well as html,css and javascript files will be minified to make your app load faster and also difficult for others to read and modify.

Update: All your yaml files will also be minimised now

Here is the python code (Run this code whenever you want to publish a new code from master to production)

import yaml
import os
import glob
import python_minifier
import minify_html

git_url="ssh://something@anvil.works:/XXX.git" #Replace with your URL
os.system(f"git clone {git_url} MyAnvilApp") #Make sure that you have added your SSH key to Anvil
print("Done Cloning")

folder="MyAnvilApp"

os.chdir(folder)

app_directory=os.getcwd()

python_files = glob.glob(app_directory + "/**/*.py", recursive=True)

#Minify all python files in the app directory

for file in python_files:
    with open(file, "r",encoding="utf8") as f:
        code = f.read()
    minified_code = python_minifier.minify(code, remove_literal_statements=True)
    with open(file, "w",encoding="utf8") as f:
        f.write(minified_code)


#Minify all html/css/js files in the app directory

html_files = glob.glob(app_directory + "/**/*.html", recursive=True)
css_files = glob.glob(app_directory + "/**/*.css", recursive=True)
js_files = glob.glob(app_directory + "/**/*.js", recursive=True)

for file in html_files+css_files+js_files:
    with open(file, "r",encoding="utf8") as f:
        code = f.read()
    minified_code = minify_html.minify(code)
    with open(file, "w",encoding="utf8") as f:
        f.write(minified_code)

#Minify all yaml files in the app directory
        
yaml_files = glob.glob(app_directory + "/**/*.yaml", recursive=True)

for file in yaml_files:
    with open(file, "r",encoding="utf8") as f:
        data = yaml.safe_load(f)
    with open(file, "w",encoding="utf8") as f:
        yaml.dump(data, f, default_flow_style=True, width=float("inf"))

#Push all changes to the repository

os.system("git add .")
os.system('git commit -am "Minified Code"')
os.system("git branch minified_code")
os.system("git push -f origin minified_code")
print("Done Minifying\n")
print(
"""-----Output-----
Check your Anvil App for a new branch called minified_code.
Test the app and if everything works fine, publish the minified_code branch.
You can keep working on the master branch with unminified code.

You can delete the MyAnvilApp folder now.
""")

The following libraries need to be installed on your system -

5 Likes