Registry / web-framework / vite-plugin-lazy-import

vite-plugin-lazy-import

library1.0.7jsnpmunverified

A Vite plugin (v1.0.7, last updated 2023) that transforms named imports from large libraries (e.g., vxe-pc-ui) into lazy, per-component import statements, automatically splitting both JavaScript and CSS. Designed for on-demand loading in Vite projects, it resolves imports to individual module paths and can inject corresponding style imports. Unlike general tree-shaking, this works at the import level, converting `import { X } from 'lib'` into `import X from 'lib/es/X/index.js'` plus optional CSS. ESM-only, TypeScript types included, maintained by the vxe-pc-ui author. Releases are infrequent; no known security incidents.

web-framework

npm install vite-plugin-lazy-import

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-LAZY-I

vite-plugin-lazy-import

web-frameworkjavascriptv1.0.7

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

lazyImport

✓ import { lazyImport } from 'vite-plugin-lazy-import'

✗ import lazyImport from 'vite-plugin-lazy-import'

This is a named export, not default. Must use destructuring.

lazyImport

✓ const { lazyImport } = require('vite-plugin-lazy-import')

✗ const lazyImport = require('vite-plugin-lazy-import')

CommonJS require works, but must destructure the named export. However, Vite config is typically ESM.

ResolveOptions

✓ import type { ResolveOptions } from 'vite-plugin-lazy-import'

✗ import { ResolveOptions } from 'vite-plugin-lazy-import'

ResolveOptions is a TypeScript type, should be imported with `import type` for type-only usage. If used as value, it's a runtime error.

Configures the plugin to rewrite named imports from 'vxe-pc-ui' into per-component ESM imports with CSS.

// vite.config.ts import { defineConfig } from 'vite' import { lazyImport } from 'vite-plugin-lazy-import' export default defineConfig({ plugins: [ lazyImport({ resolvers: [ { lib: 'vxe-pc-ui', importStyle: 'css', esm: true, resolve({ name, dirName }) { return { from: `vxe-pc-ui/es/${dirName}/index.js` } } } ] }) ] }) // Then in your app: // import { VxeButton } from 'vxe-pc-ui' // becomes: // import { VxeButton } from 'vxe-pc-ui/es/vxe-button/index.js'

Debug

Known issues

gotchaThe plugin only transforms imports from libraries explicitly listed in `resolvers`. Other imports are left untouched.

fix

Ensure your target library is added to the resolvers array.

affects: >=0.0.0

gotchaThe `esm` option must be set to `true` to use '/es/' directory paths; otherwise it defaults to '/lib/'.

fix

Explicitly set `esm: true` in your resolver config if your library uses ESM structure.

affects: >=1.0.0

gotchaIf `importStyle` is not set, no style imports are added even if `stylePath` is provided in `resolve`.

fix

Set `importStyle: true` or `importStyle: 'css'` to enable style injection.

affects: >=0.0.0

gotchaThe plugin does not handle dynamic imports or re-exports; it only rewrites static `import { ... } from 'lib'` statements.

fix

Use only static import syntax for the libraries you want to lazy-load.

affects: >=0.0.0

breakingVersion 1.0.4 changed the plugin's API from default export to named export `lazyImport`. Old code using `import vitePluginLazyImport from 'vite-plugin-lazy-import'` will break.

fix

Change to `import { lazyImport } from 'vite-plugin-lazy-import'`

affects: >=1.0.4

Errors

Common errors & fixes

TypeError: Cannot destructure property 'lazyImport' of '...' as it is undefined.

Using default import instead of named import after version 1.0.4.

fix

Use `import { lazyImport } from 'vite-plugin-lazy-import'`

Error: The library 'my-lib' is not configured in lazyImport resolvers.

Library not added to resolvers array.

fix

Add an entry for 'my-lib' in the resolvers array of the plugin options.

Module not found: Error: Can't resolve 'vxe-pc-ui/es/vxe-button/index.js'

The resolved path does not exist; likely because `esm: true` is not set or the library structure differs.

fix

Set `esm: true` if using ESM path, or adjust the `resolve` function to match the actual library structure.

Upgrade

Version history

1.0.7latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

12 hits · last 30 days

node

Bingbot

OpenAI (training)

Resources

githubhttps://github.com/x-extends/vite-plugin-lazy-import ↗

packagehttps://www.npmjs.com/package/vite-plugin-lazy-import ↗