vite-plugin-lazy-import

Used for vite Lazy import js and style.

Installation

1npm install vite-plugin-lazy-import -D

Usage

1// vite.config.js
2import { lazyImport } from 'vite-plugin-lazy-import'
3
4export default defineConfig({
5  // ...
6  plugins: [
7    lazyImport({
8      resolvers: [
9        {
10          lib: 'vxe-pc-ui',
11          importStyle: 'css', // import style '*.css'
12          esm: true // import directory '/es/*' | '/lib/*'
13        }
14      ]
15    })
16  ]
17  // ...
18})

Lazy import js

1// vite.config.js
2import { lazyImport } from 'vite-plugin-lazy-import'
3
4lazyImport({
5  resolvers: [
6    {
7      lib: 'vxe-pc-ui',
8      resolve ({ name, dirName }) {
9        return {
10          from: `vxe-pc-ui/es/${dirName}/index.js`
11        }
12      }
13    }
14  ]
15})

1// main.js
2// ...
3import { VxeUI, VxeButton } from 'vxe-pc-ui'
4//...

into this

1// ...
2import { VxeUI } from 'vxe-pc-ui/es/vxe-ui/index.js'
3import { VxeButton } from 'vxe-pc-ui/es/vxe-button/index.js'
4//...

Lazy import js and css

1// vite.config.js
2import { lazyImport } from 'vite-plugin-lazy-import'
3
4lazyImport({
5  resolvers: [
6    {
7      lib: 'vxe-pc-ui',
8      importStyle: true,
9      resolve ({ name, dirName }) {
10        return {
11          from: {
12            jsPath: `vxe-pc-ui/es/${dirName}/index.js`,
13            stylePath: `vxe-pc-ui/es/${dirName}/style.css`
14          }
15        }
16      }
17    }
18  ]
19})

1// main.js
2// ...
3import {
4  VxeUI,
5  VxeButton,
6  Button as VxeButton
7} from 'vxe-pc-ui'
8//...

into this

1// ...
2import { VxeUI } from 'vxe-pc-ui/es/vxe-ui/index.js'
3import 'vxe-pc-ui/es/vxe-ui/style.css'
4import { Button as VxeButton } from 'vxe-pc-ui/es/vxe-button/index.js'
5import 'vxe-pc-ui/es/vxe-button/style.css'
6//...

License

MIT © 2019-present, Xu Liangzhan