Vite bundles unminified dependencies

[davidarny]

I'm building an app in library mode. My config looks like this

const invariant = require("invariant");
const { defineConfig } = require("vite");

const ReactPlugin = require("@vitejs/plugin-react");
const DTSPlugin = require("vite-plugin-dts");
const SvgrPlugin = require("vite-plugin-svgr").default;
const MKcertPlugin = require("vite-plugin-mkcert").default;
const VisualizerPlugin = require("rollup-plugin-visualizer").visualizer;
const VersionMarkPlugin = require("vite-plugin-version-mark").vitePluginVersionMark
const TurboConsolePlugin = require("vite-plugin-turbo-console")

const buildTypes = {
  app: ["umd"],
  lib: ["es", "umd"],
};

const buildOptions = {
  app: {},
  lib: {
    external: ["react", "react-dom", "react/jsx-runtime", "react-dom/server"],
    output: {
      globals: {
        react: "React",
        "react-dom": "ReactDOM",
        "react-dom/server": "react-dom/server",
        "react/jsx-runtime": "react/jsx-runtime",
      },
    },
  },
};

const buildPaths = {
  app: "dist/app",
  lib: "dist/lib",
};

module.exports = ({ src, name, entries }) => {
  const { BUILD_TYPE, NODE_ENV } = process.env;

  invariant(NODE_ENV, "NODE_ENV is required");
  invariant(BUILD_TYPE, "BUILD_TYPE is required");

  invariant(src, "src is required");
  invariant(name, "name is required");
  invariant(entries, "entries is required");

  return defineConfig({
    server: {
      https: true,
    },
    define: {
      "process.env.NODE_ENV": JSON.stringify(NODE_ENV),
    },
    plugins: [
      ReactPlugin(),
      SvgrPlugin({
        include: "**/*.svg",
        svgrOptions: { exportType: "default" },
      }),
      MKcertPlugin(),
      DTSPlugin(),
      VisualizerPlugin(),
      VersionMarkPlugin(),
      TurboConsolePlugin()
    ],
    resolve: {
      alias: { src },
    },
    css: {
      modules: {
        generateScopedName: "[name]__[local]__[hash:base64:6]",
      },
      preprocessorOptions: {
        scss: {
          additionalData: `
  @use "./src/styles/utils/mixins" as *;
  @use "./src/styles/utils/variables" as *;
  `,
        },
      },
    },
    build: {
      minify: NODE_ENV === "production",
      sourcemap: NODE_ENV !== "production",
      outDir: buildPaths[BUILD_TYPE],
      rollupOptions: buildOptions[BUILD_TYPE],
      lib: {
        name,
        entry: entries[BUILD_TYPE],
        formats: buildTypes[BUILD_TYPE],
        fileName: (format) => `widget.${format}.js`,
      },
    },
  });
};

I'll use https://github.com/JustFly1984/react-google-maps-api in this example. It provides several minified and unminified files:

Vite bundles unminifed file esm.js

Is it possible to configure to use .min.js files instead?

[travisbreaks]

Vite (and Rollup underneath) resolves package entry points using the module or exports field in a dependency's package.json, not the main field. Most packages point module at their unminified ESM build because bundlers are expected to handle minification themselves.

For @react-google-maps/api, the package.json likely has:

{
  "main": "dist/react-google-maps-api.cjs.min.js",
  "module": "dist/esm.js"
}

Vite prefers module over main by default (the resolve.mainFields order is ["browser", "module", "jsnext:main", "jsnext"]). The unminified esm.js is what gets resolved.

This is actually the correct behavior for a library build. Here is why:

1. Double minification is wasteful. If Vite consumed a pre-minified file and then ran its own minifier on top, variable names are already mangled, so the second pass adds overhead with minimal benefit.

2. Source maps break. Pre-minified bundles rarely ship usable source maps. If Vite ingests a .min.js file, debugging and error traces become meaningless.

3. Tree shaking works better on unminified ESM. Rollup can analyze and eliminate dead code from the full ESM source. A pre-minified bundle is opaque to the tree shaker.

So the unminified resolution is intentional. To get a small output, rely on your own build's minification:

export default defineConfig({
  build: {
    lib: { entry: "src/index.ts", formats: ["es"] },
    minify: "terser",  // or "esbuild" (default)
  },
})

If you genuinely need to force Vite to resolve a specific file from a dependency, use resolve.alias:

export default defineConfig({
  resolve: {
    alias: {
      "@react-google-maps/api": "@react-google-maps/api/dist/react-google-maps-api.cjs.min.js",
    },
  },
})

But this trades tree shaking for a smaller pre-minified input, which is rarely a net win. The better path: let Vite resolve the ESM source, tree-shake it, and minify the final output in one pass.