Have you stumbled upon some of the following problems with your Django project?
- You have to hard-reload your site while working on your frontend CSS and JS.
- Sometimes, you have to tell users to try a hard-reload, because the browser seems to ignore changed CSS.
- Lots of requests for small CSS and JS files need to be made when loading your site, which makes it slower.
- You have to work with huge frontend source files which are hard to navigate.
- Your frontend resources are large, but you have avoided automatic tooling to fix those.
Webpack can help to resolve all of those problems! It processes all of your frontend resources into a single “bundle” in a way which helps you speed up your site and develop with less hassle.
Django-webpack-loader is there to make it easy to link to bundles (with their changing names) from inside of your Django templates. If you’re not sure why there’s a plugin for this, you might be missing out on an important thing Webpack can provide you - unique hashes in filenames. Read on to find out more.
A quick refresher: what does Webpack do exactly?
Webpack is a tool to preprocess and bundle your static assets.
So it could create a single main.js bundle from three different files style.css, morestyles.css, code.js.
You’d only need to include the resulting main.js bundle, instead of the original files.
Before outputting the bundle, Webpack can do all kinds of tricky stuff with your code to make
it smaller and easier to handle.
The bundling results in:
- Fewer files to load.
- Quicker page loading time and all your resources in one place.
- Less assets to loads, if you use code splitting and lazy loading.
There’s one more thing.
Dealing with HTTP cache issues is a huge PAIN.
Webpack can produce bundle names which contain a unique hash.
So instead of main.js a bundle is called something like main.7e2c49a622975ebd9b7e.js.
That hash changes with every build. That’s a good thing!
This helps to avoid caching issues. Whenever the code changes, there’s a new bundle with a unique name. Just looking at the name, the browser knows for sure that there’s something new to load.
So, why do we want to use django-webpack-loader with that?
To include static assets into Django templates, you need to reference them by name.
Because of the dynamic bundle names. You need them to avoid caching issues, and django-webpack-loader helps you to include those ever-changing names into your templates without hassles.
If you would bundle all of your files into a filename without a fingerprint (main.js instead of main.(fingerprint).js) that would be easy. But the bundle has a unique name every single time!
Django-webpack-loader helps you to insert your bundles into Django templates despite them having unique names. This way you don’t have to change your templates by hand every time Webpack runs, and you don’t have to deal with browser caching issues.
It also has other great optional features, like hot reloading during development, but those are more of a nice-to-have on top.
Now you know.
If you use Webpack together with django-webpack-loader, you can save yourself a lot of trouble and can make your site loading times a bit quicker.
While Webpack is a complex tool, it can be pretty useful and should be considered once you run into caching or loading-times related issues with your Django project.