https://tech.raturi.
in
Nitin Raturi's Software Follow
Engineering Blog
Photo by Laure Noverraz on Unsplash
Django Compressor Tutorial
Nitin Raturi · Dec 15, 2019 · 4 min read
In this tutorial, you will learn how to compress and optimize your static files i.e.,
javascript (.js) and CSS (.css) files for production. You will work with django-
compressor to compress CSS and JS and django-htmlmin to minify HTML files. You
can refer to the source code of this project here.
Django Compressor is a python package for the Django web framework to
compress and minify CSS and JS files using tag. {% load compress %}
Compressing and Minifying in Django
Let's start with installing the dependencies.
Install Dependencies
To optimize static files, you need to install the following dependencies. First, let's
install memcached for caching static files. It's optional but it will speed up your static
files serving, so totally worth it. Try it
COPY
# Install Memcache
sudo apt-get install Memcached # Ubuntu
brew install memcached # Mac
# Start memcache
sudo service memcached start # Ubuntu
brew services start memcached # Mac
Now install the required PIP packages
If using virtual environment, activate it using before source venv/bin/activate
installing pip packages. You can learn more about virtual environment here.
COPY
pip install python-memcached
pip install django-compressor
pip install django-htmlmin
Default settings for Django compressor
Open up your settings.py file and make these changes
Configure Memcached
COPY
CACHES = {
'default': {
'BACKEND': 'django.core.cache.backends.memcached.MemcachedCache',
'LOCATION': '127.0.0.1:11211',
}
}
Memcached runs through localhost port 11211 by default, so there’s no further
configuration here.
[Optional]: There are other options to have a dedicated Memcached server or
have Memcached store files locally. Django documentation has more information
on how to set that up.
Add compressor to your installed apps
COPY
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'compressor',
]
Add middlewares
COPY
MIDDLEWARE = [
'django.middleware.gzip.GZipMiddleware', #This one
'htmlmin.middleware.HtmlMinifyMiddleware', #This one
'htmlmin.middleware.MarkRequestMiddleware', #This one
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
Configure static files settings
COPY
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
STATIC_ROOT = os.path.join(BASE_DIR,"static_root")
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# Add this
'compressor.finders.CompressorFinder',
)
Add compressor and minified settings
COPY
COMPRESS_ENABLED = True
COMPRESS_CSS_HASHING_METHOD = 'content'
COMPRESS_FILTERS = {
'css':[
'compressor.filters.css_default.CssAbsoluteFilter',
'compressor.filters.cssmin.rCSSMinFilter',
],
'js':[
'compressor.filters.jsmin.JSMinFilter',
]
}
HTML_MINIFY = True
KEEP_COMMENTS_ON_MINIFYING = True
Compressing files with an example
To compress CSS and JS, load the compress tag just like you load static tag
COPY
{% load static %}
{% load compress %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
{% compress css %}
<link rel="stylesheet" href="{% static 'style.css' %}">
{% endcompress %}
{% compress js %}
<script src="{% static 'script.js' %}"></script>
{% endcompress %}
</head>
<body>
<center>
<h1>Raturi.in</h1>
<h1 class="heading">Hello Lets compress</h1>
<p class="para">I am just a para</p>
<button onclick="change_colors()">Change colors</button>
</center>
</body>
</html>
Compressed files will look something like this
COPY
# CSS
<link rel="stylesheet" href="/static/CACHE/css/output.f7c661b7a124.css" type
="text/css" charset="utf-8">
# JS
<script src="/static/CACHE/css/output.f7c661b7a124.css" type="text/css" chars
et="utf-8"></script>
# Run your server and you can check your source code to verify it.
Run the command below to compress in the given sequence
COPY
python manage.py collectstatic
python manage.py compress --force
python manage.py runserver
Now if you check your source code, you will see that your files are compressed.
For production, in your settings.py set COMPRESS_ENABLED like below
COPY
COMPRESS_ENABLED = not DEBUG
Django compressor Usage
Django Compressor can be used by loading a compress tag and then enclosing the
HTML, CSS files inside the compress tags.
Syntax of Django compressor:
COPY
{% load compress %}
{% compress <js/css> [<file/inline/preload> [block_name]] %}
<html of inline or linked JS/CSS>
{% endcompress %}
Let's see some examples
Compressing CSS and JS file
COPY
{% compress css %}
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" ch
arset="utf-8">
<style type="text/css">p { border:15px solid blue;}</style>
<link rel="stylesheet" href="/static/css/two.css" type="text/css" charset="ut
f-8">
{% endcompress %}
{% compress js %}
<script defer type="text/javascript" src="{% static 'custom/js/lozad.min.js'
%}"></script>
<script>
function loadAdsenseScript(url) {
let script = document.createElement('script');
script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygo
ogle.js";
script.defer = true;
script['data-ad-client'] = "ca-XXX";
document.head.appendChild(script);
}
</script>
{% endcompress %}
Output
COPY
<link rel="stylesheet" href="/static/CACHE/css/output.f7c661b7a124.css" type
="text/css" charset="utf-8">
<script type="text/javascript" src="/static/CACHE/js/base.3f33b9146e12.js" ch
arset="utf-8"></script>
You can add inline parameter if you want content directly rendered to the page
instead of a separate file
COPY
{% compress js inline %}
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-asdww');
</script>
{% endcompress %}
You can also add preload parameter to generate the preload tag for the compressed
file in the template
COPY
{% compress js preload %}
<script>
// On page load or when changing themes, best to add inline in `head` to
avoid FOUC
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in
localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches))
{
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark')
}
</script>
{% endcompress %}
Output:
COPY
<link rel="preload" href="/static/CACHE/js/d014sdf14fc6.js" as="style" />
That's all for a setup of the Django compressor. You can check the source code of
this project here.
You can also check out more django-tutorials.
Subscribe to my newsletter
Read articles from Nitin Raturi's Software
Engineering Blog directly inside your inbox.
Subscribe to the newsletter, and don't miss out.
Enter your email address SUBSCRIBE
Did you find this article valuable?
Support Nitin Raturi by becoming a sponsor. Any
amount is appreciated!
Sponsor
Learn more about Hashnode Sponsors
Django
Written by
Nitin Raturi Follow
Passionate about software engineering.
MORE ARTICLES
Nitin Raturi Nitin Raturi
Django Roadmap 2024 Python Roadmap 2024
Perfect for beginners, it will guide you The Python Developer Roadmap Guide is
through building your first web app and a comprehensive guide designed to help
mastering core Djan… individuals master Pyth…
Nitin Raturi
Dockerized Django
(Production ready in 1 click)
Hi reader, Presenting to you a turnkey
solution that allows you to effortlessly
launch your Django s…
©2024 Nitin Raturi's Software Engineering Blog
Archive · Privacy policy · Terms
Publish with Hashnode
Powered by Hashnode - Home for tech writers and readers
Tue Feb 13 2024 11:02:39 GMT+0530 (India Standard Time)
Created by JUST ONE PAGE PDF
