移动端组件按需加载为啥没生效？

Designer°美美提问于 2026-02-27 12:55:17 阅读 50

移动

我在用 Vant 做移动端页面，按照文档写了按需引入，但打包后发现所有组件都被打包进去了，体积一点没减小。我用的是 Vue 3 + Vite，是不是配置哪里有问题？

我试过这样引入：

import { Button, Cell } from 'vant';
import 'vant/lib/button/style';
import ' vant/lib/cell/style';

但 build 之后 chunk-vendors.js 还是特别大，感觉根本没按需加载，求指点！

我来解答赞 10 收藏

反馈

2 条解答

シ智营 Lv1

你这问题我也遇到过，八成是babel插件没配好。vant按需加载要配合unplugin-vue-components用，直接上配置：

// vite.config.js

import Components from 'unplugin-vue-components/vite'

import { VantResolver } from 'unplugin-vue-components/resolvers'



export default defineConfig({

  plugins: [

    Components({

      resolvers: [VantResolver()],

    }),

  ],

})





然后直接这么用组件就行，不用手动import：







记得装依赖：

npm i unplugin-vue-components -D



我之前也被坑过，配完这个打包体积直接砍半。要是还不行检查下是不是node_modules缓存没清，删了重新npm install试试。

2026-03-06 16:22

Mr-树遥 Lv1

你漏了关键一步：Vite 要配合 vant-plugin 或 unplugin-vue-components 才能自动按需引入样式和组件，光手写 import 没用。

搞定方案：装依赖
npm i -D unplugin-vue-components unplugin-auto-import
然后在 vite.config.js 里这么写：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'

import Components from 'unplugin-vue-components/vite'

import { VantResolver } from 'unplugin-vue-components/resolvers'



export default defineConfig({

  plugins: [

    vue(),

    AutoImport({

      resolvers: [VantResolver()],

    }),

    Components({

      resolvers: [VantResolver()],

    }),

  ],

})

再删掉你原来的手动 import，重新 build 就小了。

2026-02-27 13:02