Removing Hashes from Vite Build Filenames

Intro

Vite is a build tool that has taken over recently thanks to how smart and blazing-fast it is. By default, Vite generates unique hashes for each file output by the build process. These hashes are useful for cache-busting purposes, but sometimes we do not want our build files to have a hash. Let’s look into it a bit more.

What is a file hash?

Since I have tossed around the term “file hash” already, let’s take a look at what that is for those who might not be familiar.

For this example we will be using a Vue project bundled with Vite. Let’s pretend I need to build my files for production, as I am looking to upload to my production server. From the command line I execute npm run build. After some action in the console I see the following result…

vite v4.3.5 building for production...
✓ 16 modules transformed.
dist/index.html                  0.45 kB │ gzip:  0.30 kB
dist/assets/vue-5532db34.svg     0.50 kB │ gzip:  0.31 kB
dist/assets/index-fc5f319f.css   1.30 kB │ gzip:  0.67 kB
dist/assets/index-2f5592b9.js   54.44 kB │ gzip: 21.97 kB
✓ built in 1.15s

You will see different numbers than the example above, but let’s focus on the list of files in the dist directory. We can see that we have an index.html file and several assets. At the end of each asset is an 8-character hash. This is the “file hash” that we’ve mentioned previously.

Now that we know what and where the file hash is, let’s see how we remove it from the filenames of our build assets.

Removing the hash

To start we need to open Vite’s configuration file. In a standard Vite project we can find vite.config.js at the project root.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
});

This file is where we will make our changes. I am not going to cover the features available in this config as there are too many! For Vite’s config docs, click here.

We want to make some changes to the default functionality of Vite’s build. Vite uses Rollup under the hood, and luckily all Rollup options are available to us in Vite. Let’s make some changes to the config file.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`,
      },
    },
  },
});

Looking at the code above, we can see we have added the settings to the config file under build.rollupOptions.output. The first one is entryFileNames, which helps us specify the filename we would like for our project’s entry file. In the case of this project, it would be our index.js.

Next we have assetFileNames. This lets us specify the filename convention for our assets. Think CSS and any files we have in our /src/assets.

Now let’s run a build and see what happens…

vite v4.3.5 building for production...
✓ 16 modules transformed.
dist/index.html         0.43 kB │ gzip:  0.28 kB
dist/assets/vue.svg     0.50 kB │ gzip:  0.31 kB
dist/assets/index.css   1.30 kB │ gzip:  0.67 kB
dist/assets/index.js   54.43 kB │ gzip: 21.96 kB
✓ built in 1.08s

We now see filenames with no hash in sight! As you may notice, we did specify the assets directory in our config strings. That is configurable, so you could change assets/[name].[ext] to [name].[ext] and your files would build at the root of /dist. Feel free to play around with it to fit your preference.

Conclusion

Thanks to Vite running Rollup under the hood, and Rollup having a plethora of build settings, we were able to remove those sometimes-unwanted hashes in our build filenames. We recommend diving deeper into Rollup and Vite, so you can leverage the power made available to us by these tools.