vite-plugin-import

vite-plugin-import

Modular import plugin for Vite

Install

npm i vite-plugin-import -D

When to use?

If the library that you are using tell you to use babel-plugin-import to reduce the bundle size, then you can use @rollup/plugin-babel + babel-plugin-import, or just vite-plugin-import.

If you need some other babel features, use @rollup/plugin-babel + babel-plugin-import, not vite-plugin-import.

vite-plugin-import is a little faster then @rollup/plugin-babel + babel-plugin-import.

Usage

vite.config.js:

import createImportPlugin from 'vite-plugin-import';

const config = {
  plugins: [
    createImportPlugin([
      {
        libraryName: 'antd',
        'style': true,   // or 'css'
      }
    ]),
  ],
}

// or

const config = {
  plugins: [
    createImportPlugin({
      onlyBuild: false, // if onlyBuild === true, this plugin takes effect only in vite build mode; onlyBuild's default value is true.
      babelImportPluginOptions: [{
        libraryName: 'antd',
        'style': true,   // or 'css'
      }]
    }),
  ],
}

app code:

import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('antd/lib/button');
require('antd/lib/button/style');
ReactDOM.render(<_button>xxxx</_button>);

NOTICE

Need to clarify that you DO NOT really need vite-plugin-import for antd, because antd is tree shakeable, and vite can remove the unused codes when build.

How it works

Internally, vite-plugin-import just use babel + babel-plugin-import for transforming codes. For performance, vite-plugin-import will only transform codes that contain the module names.

Options

See babel-plugin-import for more detail.