Precompress Django static files with class names shortening.
Project description
Django Static class minifier
Description
The class minifier package shortens the class name in the DOM to single character and reduces the file size. more about the algorithm in the upcoming blog post.
End result :
Installation
$ pip install django-static-class-minifier
(you may want to write this in your requirements.txt)
In settings.py -
In Installed apps -
INSTALLED_APPS = [
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'static_compressor', #installed app
'.....'
]
In Middleware -
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'static_compressor.middleware.MinifyClassMiddleware', # Add this line, right after security middleware.
'django.contrib.sessions.middleware.SessionMiddleware',
Make sure, you have set up path of static files and static root directory.
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'all_staticfiles')
Update the static files storage:
STATICFILES_STORAGE = 'static_compressor.staticfiles_storage.CompressedStaticFilesStorage'
When you run $ python manage.py collectstatic
it will have an additional post-processing pass to compress your static files and it creates data.json file which contains classes from all included css files and js files.
The class selectors which js files consider and change -
querySelector('.flex-box');
querySelectorAll('.flex-boxes');
classList.contains('active');
classList.add('active);
classList.remove('active');
classList.toggle('active');
If your adding classes to the DOM based on http response or a common function which appends class to the dom, then consider excluding those files. Right now that's the limitation of this project. In the future, There might be a syntax to consider those classes.
And run $ Python manage.py minify
to minify all the classes in the static root directory.
Make sure that your web server is configured to serve precompressed static files:
- If using nginx:
- Setup ngx_http_gzip_static_module to serve gzip (.gz) precompressed files.
- Out of tree module ngx_brotli is required to serve Brotli (.br) precompressed files.
- Caddy will serve .gz and .br without additional configuration.
Also, as Brotli is not supported by all browsers you should make sure that your reverse proxy/CDN honor the Vary header, and your web server set it to Vary: Accept-Encoding
.
Available Storages
static_compress.CompressedStaticFilesStorage
: Generate.br
and.gz
from your static filesstatic_compress.CompressedManifestStaticFilesStorage
: LikeManifestStaticFilesStorage
, but also generate compressed files for the hashed filesstatic_compress.CompressedCachedStaticFilesStorage
: LikeCachedStaticFilesStorage
, but also generate compressed files for the hashed files You can also add support to your own backend by applyingstatic_compressor.staticfiles_storage.CompressMixin
to your class. By default it will only compress files ending with.js
,.css
and.svg
. This is controlled by the settings below.
Settings
django-static-class-minifier settings and their default values:
EXCLUDE_STATIC_JS_FILES = ['']
EXCLUDE_STATIC_CSS_FILES = ['']
EXCLUDE_URL_MINIFIFICATION = ['']
MINIFY_CLASS_HTML = False # Change it to True in production environment
# By default, the admin files classes won't be minified.
STATIC_CLASSES_FILE_NAME = 'data.json' # It should be an json file
EXCLUDED_CLASSNAMES_FROM_MINIFYING = ['']
STATIC_COMPRESS_FILE_EXTS = ['js', 'css', 'svg']
STATIC_COMPRESS_METHODS = ['gz', 'br']
STATIC_COMPRESS_KEEP_ORIGINAL = True
STATIC_COMPRESS_MIN_SIZE_KB = 30
File size reduction
Original file - 100k style.css
compressed class minifier file - 70k style.css (30% reduction in file size)
(Note - reduction of the file depends on the number of class selectors used and the length of the class name.)
After brotli and Gzip compression - 40k style.css.gz (60% reduction in file size, in total), 35k style.css.br (65% reduction in file size)
Credits
I have merged the code with django-static-compress package to enable gzip and brotli compression. In case, if you just to use brotli and gzip compression without using class minifier. You can directly use https://github.com/whs/django-static-compress The author of django-static-compress Manatsawin Hanmongkolchai
Licence
Licensed under the MIT License
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for django-static-class-minifier-0.0.5.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | a54f2115e4b732c1e0b5092a96de3402f84afe2c375257623cc3ec27be68aaf7 |
|
MD5 | f42b0624bb4ef89b416f3749c2a73505 |
|
BLAKE2b-256 | 9ded2f6bd45386802c46fa40bf199af39ee13674daaa486a5ab4af1d8a3e628a |
Hashes for django_static_class_minifier-0.0.5-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 7859122c8f0545032c437a3cd5ff3e76cf422d915d77e2e9fe1f7033dd82aeb1 |
|
MD5 | 9fecf177c6c7658f2ce79b3d008dc946 |
|
BLAKE2b-256 | e2e4518a4321da6084e58ad13f8979594109a3993da775eb7ef6251a21b1c739 |