Prevent Vite.js from renaming javascript variables (keep originally declared variable names)

Question

I'm looking to get Vite.js to not rename javascript variable names because I'm referencing these in my HTML DOM via Alpine-js. I understand that this is inherently part of the Vite's build method.

One solution is to prevent minification using the following:

build: {
    minify: 'none',
  }

However, this is preventing ALL the minification benefits of Vite and that is not what I want. I would still love to utilise JavaScript minification and keep the variable names as they have been originally declared.

If I need to provide you with more details please let me know and I will update the question.

Many thanks in advance!

Answer 1

If you're using esbuild to minify, you can setup your Vite config like this for example:

esbuild: {
    pure: ['console.log'],    // example: have esbuild remove any console.log
    minifyIdentifiers: false, // but keep variable names
},
build: {
    minify: 'esbuild',
}