Building for Production

    The production bundle assumes a baseline support for modern JavaScript. By default, all code is transpiled targeting :

    • Chrome >=61
    • Firefox >=60
    • Safari >=11
    • Edge >=16

    A lightweight dynamic import polyfill is also automatically injected.

    You can specify custom targets via the , where the lowest target is es2015.

    Note that by default, Vite only handles syntax transforms and does not cover polyfills by default. You can check out Polyfill.io which is a service that automatically generates polyfill bundles based on the user’s browser UserAgent string.

    Legacy browsers can be supported via , which will automatically generate legacy chunks and corresponding ES language feature polyfills. The legacy chunks are conditionally loaded only in browsers that do not have native ESM support.

    JS-imported asset URLs, CSS url() references, and asset references in your .html files are all automatically adjusted to respect this option during build.

    The exception is when you need to dynamically concatenate URLs on the fly. In this case, you can use the globally injected import.meta.env.BASE_URL variable which will be the public base path. Note this variable is statically replaced during build so it must appear exactly as-is (i.e. import.meta.env['BASE_URL'] won’t work).

    The build can be customized via various . Specifically, you can directly adjust the underlying Rollup options via build.rollupOptions:

    For example, you can specify multiple Rollup outputs with plugins that are only applied during build.

    Suppose you have the following source code structure:

    1. |-package.json
    2. |-vite.config.js
    3. |-index.html
    4. |-nested/
    5. |---index.html
    6. |---nested.js

    During build, all you need to do is to specify multiple .html files as entry points:

    When you are developing a browser-oriented library, you are likely spending most of the time on a test/demo page that imports your actual library. With Vite, you can use your index.html for that purpose to get the smooth development experience.

    When it is time to bundle your library for distribution, use the . Make sure to also externalize any dependencies that you do not want to bundle into your library, e.g. vue or react:

    1. // vite.config.js
    2. const path = require('path')
    4. module.exports = {
    5.   build: {
    6.     lib: {
    7.       entry: path.resolve(__dirname, 'lib/main.js'),
    8.       name: 'MyLib'
    9.     },
    10.     rollupOptions: {
    11.     }
    13. }

    Running vite build with this config uses a Rollup preset that is oriented towards shipping libraries and produces two bundle formats: es and umd (configurable via build.lib):

    Recommended package.json for your lib:

    1. {
    2.   "name": "my-lib",
    3.   "files": ["dist"],
    4.   "main": "./dist/my-lib.umd.js",
    5.   "module": "./dist/my-lib.es.js",
    6.   "exports": {
    7.     ".": {
    8.       "import": "./dist/my-lib.es.js",
    9.       "require": "./dist/my-lib.umd.js"
    10.     }