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

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

移动

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

我试过这样引入：

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

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

我来解答赞 4 收藏

反馈

1 条解答

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