🚀 Why should you remove console.log?
console.log is very useful during development. But leaving them in production is a bad practice. They can:
- 📉 Slow down your site, especially on mobile
- 🕵️ Reveal sensitive information
- 📦 Make your JavaScript bundles bigger
The good news is: if you use Vite (which Qwik uses by default), you can remove them automatically during the production build.
🛠️ Does this work only with Qwik?
No! This method works for any project using Vite: Qwik, React + Vite, SvelteKit, Astro, and more.
Vite uses esbuild to bundle your code, and it offers a built-in option to remove console statements.
📸 Real example: what happened on my site
While working on Learn Qwik (learn-qwik.com) and opening the browser console on the live production site, I realized something important.
The console was showing private data like the user profile (id, username, avatar_url) and subscription status (isSubscribed: true).
Even if this data is not highly sensitive, it's still not professional to expose it to anyone who opens the developer tools.
Additionally, there were some minor performance warnings ([Violation] forced reflow while executing JavaScript) which are also not ideal for a production environment.
This was the moment I decided to remove all console logs in production. It makes the site cleaner, faster, and avoids exposing unnecessary data to visitors.
📦 How to remove console.log in a Qwik project
In your Qwik project, you will find a vite.config.ts file. By default, this file looks like this:
To remove console.log in production, you need to add the esbuild.drop option. Because this is a more advanced option, you also need to tell Vite that this is a valid config by using as UserConfig.
This will automatically remove the following in production builds:
console.logconsole.debugdebuggerstatements
Note: console.error and console.warn will stay. If you want to remove everything, you can use a custom list or a plugin.
✅ Final result: a clean production console
After adding esbuild.drop to my vite.config.ts and deploying the changes, I opened the console again on Learn Qwik.
This time, the result was exactly what I wanted: no more console logs or unnecessary data visible in production.
This small optimization keeps the site clean, protects user data, and makes the project look more professional.
💡 Bonus: Alternative with a plugin
If you want even more flexibility, you can use a Vite plugin to remove console.log and other statements.
One of the most popular options is vite-plugin-remove-console.
This method lets you choose exactly which console methods you want to remove (log, warn, error, debug, etc).
How to use
First, install the plugin:
Then, update your vite.config.ts:
When to use this?
For Qwik projects, the built-in esbuild.drop option is usually enough. However, this plugin can be useful if:
- You need advanced control over which
consolemethods are removed. - You use a custom build process or Vite with a non-esbuild bundler.
For most Qwik projects, you can stick to esbuild.drop to keep things simple and fast.
🎉 That's it!
You now know how to clean up your production builds and remove unnecessary console.log in your Qwik project.
This simple trick will make your site faster, cleaner and more professional.
Have questions, issues, or feedback?
Join our official Learn Qwik Discord server to get help and connect with the community.
🚀 Next step
Now that your production builds are clean, it's time to continue learning Qwik!