https://github.com/x-extends/vite-plugin-lazy-import
Used for vite Lazy import js and style
https://github.com/x-extends/vite-plugin-lazy-import
Last synced: over 1 year ago
JSON representation
Used for vite Lazy import js and style
- Host: GitHub
- URL: https://github.com/x-extends/vite-plugin-lazy-import
- Owner: x-extends
- License: mit
- Created: 2024-06-05T04:27:00.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-13T16:08:01.000Z (about 2 years ago)
- Last Synced: 2025-03-30T07:02:25.176Z (over 1 year ago)
- Language: TypeScript
- Size: 10.7 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-lazy-import
Used for vite Lazy import js and style.
## Installation
```shell
npm install vite-plugin-lazy-import -D
```
## Usage
```javascript
// vite.config.js
import { lazyImport } from 'vite-plugin-lazy-import'
export default defineConfig({
// ...
plugins: [
lazyImport({
resolvers: [
{
lib: 'vxe-pc-ui',
importStyle: 'css', // import style '*.css'
esm: true // import directory '/es/*' | '/lib/*'
}
]
})
]
// ...
})
```
## Lazy import js
```javascript
// vite.config.js
import { lazyImport } from 'vite-plugin-lazy-import'
lazyImport({
resolvers: [
{
lib: 'vxe-pc-ui',
resolve ({ name, dirName }) {
return {
from: `vxe-pc-ui/es/${dirName}/index.js`
}
}
}
]
})
```
```javascript
// main.js
// ...
import { VxeUI, VxeButton } from 'vxe-pc-ui'
//...
```
into this
```javascript
// ...
import { VxeUI } from 'vxe-pc-ui/es/vxe-ui/index.js'
import { VxeButton } from 'vxe-pc-ui/es/vxe-button/index.js'
//...
```
## Lazy import js and css
```javascript
// vite.config.js
import { lazyImport } from 'vite-plugin-lazy-import'
lazyImport({
resolvers: [
{
lib: 'vxe-pc-ui',
importStyle: true,
resolve ({ name, dirName }) {
return {
from: {
jsPath: `vxe-pc-ui/es/${dirName}/index.js`,
stylePath: `vxe-pc-ui/es/${dirName}/style.css`
}
}
}
}
]
})
```
```javascript
// main.js
// ...
import {
VxeUI,
VxeModal,
Button as VxeButton
} from 'vxe-pc-ui'
//...
```
into this
```javascript
// ...
import { VxeUI } from 'vxe-pc-ui/es/vxe-ui/index.js'
import 'vxe-pc-ui/es/vxe-ui/style.css'
import { VxeModal } from 'vxe-pc-ui/es/vxe-modal/index.js'
import 'vxe-pc-ui/es/vxe-modal/style.css'
import { Button as VxeButton } from 'vxe-pc-ui/es/button/index.js'
import 'vxe-pc-ui/es/button/style.css'
//...
```
## Contributors
Thank you to everyone who contributed to this project.
[](https://github.com/x-extends/vite-plugin-lazy-import/graphs/contributors)
## License
[MIT](LICENSE) © 2019-present, Xu Liangzhan