Caching in the Browser

By default, browsers will cache static assets (i.e. CSS, JS, images) to speed up load times and improve a website's performance. When caching occurs, the browser will keep track of the file that was loaded and, if it has a copy of it within its cache reserve, it will serve the cached file back instead of trying to re-download a newer version of the file from the server.

Overall, browser caching is a positive thing. I mean who doesn't want faster load times? One negative is, if a change is made to one of the files that the browser already has in its cache, it will continue to load the older, cached version of the file. In this case, the new changes will not be reflected until the user clears their cache. Cache-busting helps solve this problem.

Fingerprinting vs. Cache-Busting

Fingerprinting involves appending a unique hash to the filename and is a technique used to achieve cache-busting. Cache-busting is when browsers are "tricked" into serving up newer versions of a file. One method of cache-busting is to "fingerprint" a filename. Because the name of the file has changed, the browser recognizes that there is a new version available, and as a result, the cache gets "busted" and serves up the updated version of the file.

Fingerprinting and cache-busting are related to one another but are not interchangeable terms.

webpack Configuration

webpack provides a convenient way to fingerprint files in your application. I'll demonstrate how to do this with a basic example.

Let's assume we have a webpack.config.js file that contains the following code:

const path = require("path");
module.exports = {
  entry: "./js/scripts.js",
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "build")
  }
}

With this configuration, webpack will bundle up the code in scripts.js and place that into a file named main.js inside the /build directory 📁.

Screen Shot 2020-10-28 at 10.55.58 PM.png

In order to alter this so that we are instead fingerprinting the file, we need to include the contenthash substitution. Now our code will look like this:

const path = require("path");
module.exports = {
  entry: "./js/scripts.js",
  output: {
    filename: "[name].[contenthash].js", //contenthash substitution
    path: path.resolve(__dirname, "build")
  }
}

By adding the contenthash substitution, the next time we run webpack the name of the bundled file will now look like this:

Screen Shot 2020-10-28 at 11.09.23 PM.png

Cleaning up 🧹

Screen Shot 2020-10-28 at 11.24.38 PM.png

Each time there is a change and a build is run, by default webpack will generate a new file in the directory. However, this is not ideal since we don't want the directory getting cluttered with obsolete files and we only want to point to the newest version. Conveniently, webpack provides the CleanWebpackPlugin to handle this very scenario.

First, you need to install this plugin and add it to your dev dependencies:
- npm install --save-dev clean-webpack-plugin
Once installed, we can now add the plugin to the webpack.config.js file.

const path = require("path");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  entry: "./js/scripts.js",
  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "build")
  },
  plugins: [
    new CleanWebpackPlugin() //Add to plugins array
  ]
}

Now, when we run the build, you will see that the file will automatically get replaced with the newest version any time a change has occurred.

El Fin 👋🏽

With tools like Create React App doing a lot of the heavy lifting when it comes to bundling, I haven't had to dabble too much with weback configurations. So I was pleasantly surprised when I discovered that fingerprinting files in webpack is actually quite simple. (For further learning, check out Skay's - A Basic Introduction to Webpack for a good overview on webpack)

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading and happy coding!

Bust a Cache using webpack

Comments (1)

Programming Bytes 😣

How I Automate the Process of Setting up a New Mac

More from this blog

Database GUI's to Boost Development Productivity

How to Setup a Global gitignore File

7 Git GUI's to Boost Development Productivity

Git Worktree

5 Speech-to-Text Apps to Boost Productivity

Caching in the Browser

Fingerprinting vs. Cache-Busting

webpack Configuration

Cleaning up 🧹

El Fin 👋🏽

Resources

Command Palette

Comments (1)

Programming Bytes 😣

How I Automate the Process of Setting up a New Mac

More from this blog

Caching in the Browser

Fingerprinting vs. Cache-Busting

webpack Configuration

Cleaning up 🧹

El Fin 👋🏽

Resources