aklinker1 / vite-plugin-web-extension

Vite plugin for developing Chrome/Web Extensions
https://vite-plugin-web-extension.aklinker1.io/
MIT License
574 stars 48 forks source link

Vite 2.6.0 uses esbuild by default #24

Closed ohmree closed 2 years ago

ohmree commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

> vitesse-webext-mv3@0.0.1 prepare /home/ohmree/code/js/vitesse-webext-mv3
> husky install

husky - Git hooks installed

$ pnpm build

> vitesse-webext-mv3@0.0.1 build /home/ohmree/code/js/vitesse-webext-mv3
> cross-env NODE_ENV=production run-s clear build:web

> vitesse-webext-mv3@0.0.1 clear /home/ohmree/code/js/vitesse-webext-mv3
> rimraf dist extension.*

> vitesse-webext-mv3@0.0.1 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 commented 2 years ago

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 commented 2 years ago

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

aklinker1 commented 2 years ago

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 commented 2 years ago

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: https://github.com/vitejs/vite/issues/6065