question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

vite.config.js esbuild options are ignored, e.g. disabling minification or one of its aspects

See original GitHub issue

Describe the bug

I’m trying to control how esbuild is performing minification due to some recent features that I would like to disable (https://github.com/evanw/esbuild/issues/1755), however it seems that options specified in vite.config.js by esbuild section are ignored, e.g. setting minify: false there doesn’t have any effect:

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

// https://vitejs.dev/config/
export default defineConfig({
  esbuild: {
    minify: false,
    minifySyntax: false
  },
  plugins: [vue()]
})

Reproduction

This repo shows the problem https://github.com/kskalski/snippets/tree/master/esbuild-minify-test

to preproduce:

  1. npm i
  2. npm run build
  3. grep "\(foo\|bar\)" dist/assets/index.*.css shows the rule .foo,.bar{color:red} while original App.vue has them as separate rules

Note that it is possible to completely disable minification by option

{
  build: {
    minify: false
  }
}

however I would like to have more fine grained control (affect specific esbuild options instead of completely disabling the pipeline). Also related is this issue https://github.com/vitejs/vite/issues/5619, which asks for splitting options between JS and CSS minification, here however I’m observing that esbuild config section is not correctly applied (though it is validated for correct property names).

System Info

System:
    OS: Linux 4.4 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 1.39 GB / 7.89 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 12.21.0 - /usr/bin/node
    npm: 7.5.2 - /usr/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^1.10.2 => 1.10.2
    vite: ^2.7.0 => 2.7.1

Used Package Manager

npm

Logs

> vite build --debug

  vite:config bundled config file loaded in 177.49ms +0ms
  vite:config using resolved config: {
  vite:config   esbuild: { minify: false, minifySyntax: false },
...

Validations

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:8
  • Comments:16 (5 by maintainers)

github_iconTop GitHub Comments

5reactions
rosostolatocommented, Mar 5, 2022

Any news on it?

1reaction
sapphi-redcommented, Jun 27, 2022

That sounds good to me. 👍 (A nit pick, using ?? would shorten the code.)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Build Options - Vite
assetsInlineLimit will be ignored and assets will always be inlined, regardless of file size or being a Git LFS placeholder. build.cssCodeSplit #. Type:...
Read more >
API - ESBuild
This setting is a convention from Webpack that esbuild respects for any imported file, not just files used with inject. #Loader. Supported by:...
Read more >
How do I disable minification when running "build" command ...
I have to build a static version to deploy it with npm run build -- is there a vite option to disable minification?...
Read more >
Build for production - Lit.dev
When building an app that includes LitElement components, you can use common JavaScript build tools like Rollup or webpack. We recommend Rollup because...
Read more >
How to build speedy sites with Vite + partial hydration - Netlify
The Jamstack saw a pretty big shift after this year's Jamstack Conf. Where we used to see JS-intensive single page apps getting all...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found