Lib mode format: es.min

Clear and concise description of the problem

Currently when building in lib mode we do not minify the ES build because that would remove pure annotations and break treeshaking. However, this is assuming that the ES build is only used with bundlers. In the future, more users could be using ES builds over CDNs with native ES imports, so a minified ES build could be necessary for those cases.

Suggested solution

// vite config
build: {
  lib: {
    formats: ['es', 'es.min']
  }
}

Alternative

lib: { minifyES: true }

Additional context

https://github.com/vuejs/petite-vue/pull/112

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.

[mindplay-dk]

I don’t understand, is minifying just disabled entirely for es library output?

I’ve tried for example this:

  build: {
    lib: {
      // ...
      formats: ["es"]
    },
    minify: "terser",
    terserOptions: {
      compress: true,
      mangle: true,
    },
  }

It doesn’t minify or mangle at all - I have no control of the terser options at all?

I can understand having sensible defaults, so you don’t accidentally break tree shaking - but blocking me from configuring terser entirely? And not even a warning - it just doesn’t work. Very confusing.

At this time, minify: "esbuild" gives a significantly smaller file, because it actually compresses and minifies - with minify: "terser" it doesn’t minify at all. How is this setting useful?

I was able to manually minify with terser after the fact, so it’s not that this isn’t possible.

npm exec terser -- -c -m --module dist/lib.js > dist/lib.min.js

[sinedied]

Would love to see this implemented!

Currently this is my workaround:

Add an extra esm format to lib entry (don’t mind the TS error):

    lib: {
      entry: './src/index.ts',
      formats: ['es', 'esm'],
      fileName: (format) => ({
        es: `${pkg.name}.js`,
        esm: `${pkg.name}.min.js`,
      })[format]

Then add this plugin to the build:

import { transform } from 'esbuild';

function minifyEs() {
  return {
    name: 'minifyEs',
    renderChunk: {
      order: 'post',
      async handler(code, chunk, outputOptions) {
        if (outputOptions.format === 'es' && chunk.fileName.endsWith('.min.js')) {
          return await transform(code, { minify: true });
        }
        return code;
      },
    }
  };
}

This will generate the ES amd ES minified variants.