Vite 中按需懒加载的核心是原生动态 import() 语法配合构建时自动分包。路由级用 component: () => import(...)，组件级用 defineAsyncComponent 或 React.lazy，插件（如 vite-plugin-import）仅用于第三方组件库的按需引入。

在 Vite 里做按需懒加载，关键点很明确。

一方面配合插件处理“按需引入”，比如 vite-plugin-import 或自定义插件。另一方面，用动态 import() 完成真正的懒加载，而不是继续依赖 Webpack 那套魔法注释。

Vite 对 ES 动态导入本来就是原生支持的，所以单说懒加载，通常不需要额外插件。真正需要插件介入的，是“按需”这一层，比如组件库里只加载实际用到的模块，避免全量打包进来。

使用 vite-plugin-import 实现组件库按需加载

这个插件适用于 Ant Design、Element Plus、Naive UI 这类支持模块化导出的 UI 库。

它会在构建阶段，自动把命名导入，如 import { Button } from 'ant-design-vue'，改写成对应子路径的动态导入或默认导入，从而有效压缩打包体积。

• 安装插件：npm add -D vite-plugin-import
• 在 vite.config.ts 中配置（以 Element Plus 为例）：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import Import from 'vite-plugin-import'
  
  export default defineConfig({
  plugins: [
  vue(),
  Import({
  libs: [{
  libraryName: 'element-plus',
  ensureStyleImport: true,
  resolve: (name) => {
  // 将 ElButton → element-plus/lib/components/button
  return {
  name: `element-plus/lib/components/${name.slice(2).toLowerCase()}`,
  style: `element-plus/theme-chalk/src/${name.slice(2).toLowerCase()}.scss`
  }
  }
  }] 
  })
  ]
  })

• 代码中直接写命名导入，插件自动处理：

  import { ElButton, ElInput } from 'element-plus'
  // 构建后等价于分别导入 lib/components/button 和 lib/components/input

配合 dynamic import() 手动控制懒加载时机

插件解决“按需引入”，而 import() 解决“懒加载执行时机”。

二者常组合使用。插件确保只打包用到的模块，import() 延迟到用户交互，如点击、路由切换时再加载。

• 路由级懒加载（推荐）：

  // router/index.ts
  const routes = [
  {
  path: '/admin',
  component: () => import('@/views/Admin.vue') // 自动被 Vite 处理为异步 chunk
  }
  ]

• 组件级条件加载（例如模态框内组件）：

  setup() {
  const loadChart = async () => {
  const { ECharts } = await import('vue-echarts')
  // 此时才下载并初始化 ECharts 组件
  return ECharts
  }
  return { loadChart }
  }

自定义插件实现更精细的按需逻辑

当最新插件不满足需求，如私有组件库、特殊路径映射，可编写简易插件拦截 import 语句并重写。

• 示例：将 import 'my-lib/!button' 自动转为 import 'my-lib/es/button'：

  export default function myImportPlugin() {
  return {
  name: 'my-import',
  resolveId(id) {
  if (id.startsWith('my-lib/!')) {
  const realPath = id.replace('my-lib/!', 'my-lib/es/')
  return this.resolve(realPath, undefined, { skipSelf: true })
  }
  }
  }
  }

• 在 vite.config.ts 中启用：plugins: [myImportPlugin()]

注意事项与常见问题

插件和懒加载协同工作时，需注意构建产物与运行时行为的一致性。

• 样式必须显式引入：组件库的 CSS/SCSS 通常不会随 JS 自动注入，需通过插件 ensureStyleImport 或手动 import 'xxx/style.css'
• 服务端渲染（SSR）需额外适配：动态 import() 在 Node 环境下不原生支持，Vite SSR 模式需用 renderAsyncComponent 或预加载策略
• 热更新可能受限：部分插件会改变模块解析路径，导致 HMR 失效，建议优先选用社区维护良好的插件
• 不要滥用插件替代合理拆包：路由级懒加载 + code splitting 已足够大多数场景，插件更适合解决第三方库的引入冗余问题

《夸克》非常好用的免费AI浏览器

下载APP查看