Package: django-static-class-minifier
Django Static class minifierDescriptionThe class minify package shortens the class name in the DOM to gibberish characters with reducing the size of the actual class name and which helps to reduces the file size and which also makes web scrappers difficult to scrap the website.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',

'django.contrib.sessions.middleware.SessionMiddleware',

'django.middleware.common.CommonMiddleware',

'django.middleware.csrf.CsrfViewMiddleware',

'static_compressor.middleware.MinifyClassMiddleware', # Add this line, right after csrf middleware.

'django.contrib.auth.middleware.AuthenticationMiddleware',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'Run the below command in your terminal to build the static files.$ python manage.py collectstatic_compressWhen you run$ python manage.py collectstatic_compressit will have an additional post-processing to compress your static files and it createsdata.jsonfile which contains classes from all included css and js files.The class selectors which js files considers 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 words. UseEXCLUDED_CLASSNAMES_FROM_MINIFYINGsetting attribute and include those words in the list.Make sure that your web server is configured to serve precompressed static files:If using nginx:Setupngx_http_gzip_static_moduleto serve gzip (.gz) precompressed files.Out of tree modulengx_brotliis required to serve Brotli (.br) precompressed files.Caddywill 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 toVary: Accept-Encoding.Available Storagesstatic_compress.CompressedStaticFilesStorage: Generate.brand.gzfrom 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 filesYou can also add support to your own backend by applyingstatic_compressor.staticfiles_storage.CompressMixinto your class.By default it will only compress files ending with.js,.cssand.svg. This is controlled by the settings below.Settingsdjango-static-class-minifiersettings and their default values:MINIFY_CLASS_HTML = False # Change it to True in production environment

EXCLUDE_STATIC_JS_FILES = [] # exclude js libraries from classnames minifier

EXCLUDE_STATIC_CSS_FILES = []

EXCLUDE_STATIC_SVG_FILES = []

EXCLUDE_STATIC_DIRECTORY = []

EXCLUDE_URL_MINIFICATION = []

EXCLUDED_CLASSNAMES_FROM_MINIFYING = []

# By default, the admin files classes won't be minified.

STATIC_CLASSES_FILE_NAME = 'data.json' # It should be an json file

CLASS_SALT_VALUE = 'ascii_lowercase' # Choices - 'ascii_lowercase' or 'ascii_uppercase' or 'ascii_letters' or custom characters. The custom characters should not contain special characters and the length of salt should be greater then 8. Example : CLASS_SALT_VALUE = '_abcdefghijk123'.


# Incase, Inside your app if there is static directory then include it in STATIC_INCLUDE_DIRS



STATIC_INCLUDE_DIRS = (

os.path.join(BASE_DIR, 'faq/static'), # Example : Let the app name be faq

)

STATIC_COMPRESS_FILE_EXTS = ['js', 'css', 'svg']

STATIC_COMPRESS_METHODS = ['gz', 'br']

STATIC_COMPRESS_KEEP_ORIGINAL = True

STATIC_COMPRESS_MIN_SIZE_KB = 30Configuration Types :SettingsTypeDescriptionEXCLUDE_STATIC_JS_FILESArrayThese js files will be excluded from classnames shortening, In other words the class names won't be changed.EXCLUDE_STATIC_CSS_FILESArraySame as above but for css files.EXCLUDE_STATIC_SVG_FILESArraySame as above but for svg filesEXCLUDE_STATIC_DIRECTORYArrayThe directory name in the array will be excluded from class names shortening.EXCLUDE_URL_MINIFICATIONArrayThe URL in the array will exclude from shortening of class names.EXCLUDED_CLASSNAMES_FROM_MINIFYINGArrayThe words in an array won't be shortened.MINIFY_CLASS_HTMLBooleanIf its True it minifies class names in the HTML. Make sure there is JSON file or it will throws an error.STATIC_CLASSES_FILE_NAMEStringThe JSON file name. By default its data.jsonSTATIC_INCLUDE_DIRSTupleIncludes static directory inside the app.CLASS_SALT_VALUEStringChoices - 'ascii_lowercase' or 'ascii_uppercase' or 'ascii_letters' or custom characters. The custom characters should not contain special characters and the length of salt should be greater then 8. Example : CLASS_SALT_VALUE = '_abcdefghijk123'.File size reductionOriginal 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)LicenceHappy coding! :)