Vite 2.6.0 uses esbuild by default

[ohmree]

I'll start by thanking you for making this, it's a great plugin!

When building without specifying build.minify = 'terser' I get the following warning:

build.terserOptions is specified but build.minify is not set to use Terser. Note Vite now defaults to use esbuild for minification. If you still prefer Terser, set build.minify to "terser".

So the readme should probably mention that you should set build.minify to 'terser'.

Sidenote: I've found that esbuild does a much better job at minifying my code (about 2x smaller), not sure if this is because it mangles names or if it's just better.
I think it's worth figuring out how to support esbuild in this plugin.

[aklinker1]

Interesting, I've seen that warning before, but I thought it was fixed. My extensions are running vite 2.6+, but I'm not seeing this message (with no build.minify set). I believe if you use vite 2.6+, it is using esbuild (not terser) as well.

Do you have a small repo that reproduces this warning? Then I can fix it and add support for esbuild

[ohmree]

Do you have a small repo that reproduces this warning? Then I can fix it and add support for esbuild

I'll try creating one based on my (non-open-source) project that's based on vitesse-webext, stay tuned.

[ohmree]

Here's an example project.

It's not the most minimal because I wanted it to be useful as a general starting point for vue-based addons that support both mv2 and mv3.

$ pnpm i
Lockfile is up-to-date, resolution step is skipped
Already up-to-date

> [email protected] prepare /home/ohmree/code/js/vitesse-webext-mv3
> husky install

husky - Git hooks installed

$ pnpm build

> [email protected] build /home/ohmree/code/js/vitesse-webext-mv3
> cross-env NODE_ENV=production run-s clear build:web


> [email protected] clear /home/ohmree/code/js/vitesse-webext-mv3
> rimraf dist extension.*


> [email protected] build:web /home/ohmree/code/js/vitesse-webext-mv3
> vite build

build.terserOptions is specified but build.minify is not set to use Terser. Note Vite now defaults to use esbuild for minification. If you still prefer Terser, set build.minify to "terser".
vite v2.9.1 building for production...

[vite-plugin-web-extension] 
  Building HTML Pages in Multi-Page Mode:
    • src/popup/index.html
    • src/options/index.html
  Building in Lib Mode:
    • src/background/main.ts

[vite-plugin-web-extension] Building HTML Pages in Multi-Page Mode
✓ 595 modules transformed.
../dist/assets/icon-512.png      2.28 KiB
../dist/assets/icon.svg          0.36 KiB
../dist/assets/primeicons.eot    65.25 KiB
../dist/assets/primeicons.svg    265.35 KiB
../dist/assets/primeicons.ttf    65.08 KiB
../dist/assets/primeicons.woff   65.16 KiB
../dist/manifest.json            0.65 KiB
../dist/primeicons.eot           65.25 KiB
../dist/color.png                10.11 KiB
../dist/primeicons.ttf           65.08 KiB
../dist/primeicons.woff          65.16 KiB
../dist/primeicons.svg           265.35 KiB
../dist/popup/index.html         0.42 KiB
../dist/options/index.html       0.40 KiB
../dist/popup/index.js           11.03 KiB / gzip: 3.59 KiB
../dist/popup/index.css          0.05 KiB / gzip: 0.07 KiB
../dist/options/index.css        0.13 KiB / gzip: 0.13 KiB
../dist/main.js                  70.27 KiB / gzip: 26.95 KiB
../dist/main.css                 393.11 KiB / gzip: 44.11 KiB
../dist/options/index.js         421.95 KiB / gzip: 142.89 KiB

[vite-plugin-web-extension] Building src/background/main.ts in Lib Mode
build.terserOptions is specified but build.minify is not set to use Terser. Note Vite now defaults to use esbuild for minification. If you still prefer Terser, set build.minify to "terser".
vite v2.9.1 building for production...
✓ 6 modules transformed.
../dist/background/main.js   10.00 KiB / gzip: 2.99 KiB

[ohmree]

And for completion's sake, bundle sizes with build.minify = 'terser':

[vite-plugin-web-extension] Building HTML Pages in Multi-Page Mode
✓ 595 modules transformed.
../dist/assets/icon-512.png      2.28 KiB
../dist/assets/icon.svg          0.36 KiB
../dist/assets/primeicons.eot    65.25 KiB
../dist/assets/primeicons.svg    265.35 KiB
../dist/assets/primeicons.ttf    65.08 KiB
../dist/assets/primeicons.woff   65.16 KiB
../dist/manifest.json            0.65 KiB
../dist/primeicons.eot           65.25 KiB
../dist/color.png                10.11 KiB
../dist/primeicons.ttf           65.08 KiB
../dist/primeicons.woff          65.16 KiB
../dist/primeicons.svg           265.35 KiB
../dist/popup/index.html         0.42 KiB
../dist/options/index.html       0.40 KiB
../dist/popup/index.js           14.54 KiB / gzip: 4.17 KiB
../dist/popup/index.css          0.05 KiB / gzip: 0.07 KiB
../dist/options/index.css        0.13 KiB / gzip: 0.13 KiB
../dist/main.js                  126.06 KiB / gzip: 34.04 KiB
../dist/main.css                 393.11 KiB / gzip: 44.11 KiB
../dist/options/index.js         686.97 KiB / gzip: 179.17 KiB

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

[aklinker1]

Cool, thanks! I'll check it out and see what's up

[aklinker1]

Haven't looked into this yet, but I noticed something on one of my projects today. Chrome requires your code be non-obfuscated, and since vite changed to using esbuild, the plugin no longer defaults to this behavior. With terser, it did.

So you SHOULD set build.minify to false, not esbuild or terser. I'm going to make a patch release fixing this. I'll make sure this field can be overwritten if you want to take the risk and continue minifying your code.

[aklinker1]

I'm having problems configuring esbuild.minifyWhitespace and esbuild.minifySyntax rather than disabling minification altogether, we just disable obfuscation (esbuild.minifiyIdentifiers: false).

Looks like there's already an issue for this: vitejs/vite#6065