官⽅介绍中说到，引⼊所有组件会增加代码包的体积，不推荐整体引⼊。 ⾃动按需引⼊需要使⽤ babel 的插件 babel-plugin-import，这个插件会在编译过程中将 import 写法⾃ 动转换为按需引⼊⽅式。 ⾸先安装插件： npm install babel-plugin-import -D 在 bable.config.js 中添加配置： ⽂档要求在 .babelrc 中设置，.babelrc 与 bable.config.js ⽂件作⽤相同，⼀般有 bable.config.js 就不⽤ .babelrc 了。 // 在.babelrc 中添加配置 // 注意：webpack 1 ⽆需设置 libraryDirectory { “plugins”: [ [“import”, { “libraryName”: “vant”, “libraryDirectory”: “es”, “style”: true }] ] } 在任意组件中按以下⽅式引⼊ Vant 组件，插件会在编译时⾃动转换为按需引⼊（引⼊ JS 与 CSS）形 式。 import { Button } from ‘vant’ … components: { Button } Toast 这种需要进⾏⽅法调⽤的组件需要在引⼊后将 this.$toast() 更换为 Toast()。 // pay/index.vue 示例 import { …, Toast } from ‘vant’ … // this.$toast.success(‘购买成功！’) Toast.success(‘购买成功！’) 同时，main.js 中的整体引⼊就可以去除了。 // main.js - import Vant from ‘vant’ - import ‘vant/lib/index.css’ - Vue.use(Vant) 具体修改内容⻅示例代码，打包结果如下。 从数值中可以看出，体积明显减⼩。

Vant 组件⾃动按需引⼊组件 - 图1

错误说明

如果出现以下类似的报错，说明在不同组件中进⾏相同⼦组件引⼊（包括 Vant 组件）的顺序不同，例如 A 组件内先引组件 X 后引⼊组件 Y，B 组件内先引组件 Y 后引⼊组件 X，当 Webpack 将这些代码打包 到同⼀个⽂件中时，就会⽆法处理从⽽导致 webpack 的 mini-css-extract-plugin 插件报错。调整引⼊ 顺序即可。 报错示意图如下

Vant 组件⾃动按需引⼊组件 - 图2