{"id":22715,"library":"vite-plugin-lazy-import","title":"vite-plugin-lazy-import","description":"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.","status":"active","version":"1.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/x-extends/vite-plugin-lazy-import","tags":["javascript","vite","import","typescript"],"install":[{"cmd":"npm install vite-plugin-lazy-import","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-lazy-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-lazy-import","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is a named export, not default. Must use destructuring.","wrong":"import lazyImport from 'vite-plugin-lazy-import'","symbol":"lazyImport","correct":"import { lazyImport } from 'vite-plugin-lazy-import'"},{"note":"CommonJS require works, but must destructure the named export. However, Vite config is typically ESM.","wrong":"const lazyImport = require('vite-plugin-lazy-import')","symbol":"lazyImport","correct":"const { lazyImport } = require('vite-plugin-lazy-import')"},{"note":"ResolveOptions is a TypeScript type, should be imported with `import type` for type-only usage. If used as value, it's a runtime error.","wrong":"import { ResolveOptions } from 'vite-plugin-lazy-import'","symbol":"ResolveOptions","correct":"import type { ResolveOptions } from 'vite-plugin-lazy-import'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { lazyImport } from 'vite-plugin-lazy-import'\n\nexport default defineConfig({\n  plugins: [\n    lazyImport({\n      resolvers: [\n        {\n          lib: 'vxe-pc-ui',\n          importStyle: 'css',\n          esm: true,\n          resolve({ name, dirName }) {\n            return {\n              from: `vxe-pc-ui/es/${dirName}/index.js`\n            }\n          }\n        }\n      ]\n    })\n  ]\n})\n\n// Then in your app:\n// import { VxeButton } from 'vxe-pc-ui'\n// becomes:\n// import { VxeButton } from 'vxe-pc-ui/es/vxe-button/index.js'","lang":"typescript","description":"Configures the plugin to rewrite named imports from 'vxe-pc-ui' into per-component ESM imports with CSS."},"warnings":[{"fix":"Ensure your target library is added to the resolvers array.","message":"The plugin only transforms imports from libraries explicitly listed in `resolvers`. Other imports are left untouched.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Explicitly set `esm: true` in your resolver config if your library uses ESM structure.","message":"The `esm` option must be set to `true` to use '/es/' directory paths; otherwise it defaults to '/lib/'.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set `importStyle: true` or `importStyle: 'css'` to enable style injection.","message":"If `importStyle` is not set, no style imports are added even if `stylePath` is provided in `resolve`.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use only static import syntax for the libraries you want to lazy-load.","message":"The plugin does not handle dynamic imports or re-exports; it only rewrites static `import { ... } from 'lib'` statements.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Change to `import { lazyImport } from 'vite-plugin-lazy-import'`","message":"Version 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.","severity":"breaking","affected_versions":">=1.0.4"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use `import { lazyImport } from 'vite-plugin-lazy-import'`","cause":"Using default import instead of named import after version 1.0.4.","error":"TypeError: Cannot destructure property 'lazyImport' of '...' as it is undefined."},{"fix":"Add an entry for 'my-lib' in the resolvers array of the plugin options.","cause":"Library not added to resolvers array.","error":"Error: The library 'my-lib' is not configured in lazyImport resolvers."},{"fix":"Set `esm: true` if using ESM path, or adjust the `resolve` function to match the actual library structure.","cause":"The resolved path does not exist; likely because `esm: true` is not set or the library structure differs.","error":"Module not found: Error: Can't resolve 'vxe-pc-ui/es/vxe-button/index.js'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}