Vant 在vue cli 4 x中怎么实现按需加载

前言

在前端开发过程中，一些第三方库的引入可能会使得应用的体积变得越来越大，因此按需加载就显得十分重要。在 Vue 项目中使用 Vant 组件库时，在 Vue CLI 4.x 中实现按需加载 Vant 是常见需求，本文将讲解如何实现 Vant 的按需加载。

第一段

首先，安装 `babel-plugin-import` 依赖包。这个依赖包可以按需加载组件代码，并且同时还可以自动引入样式文件。

    npm install babel-plugin-import --save-dev
    

然后在项目根目录下新建 `.babelrc` 文件，添加以下代码：

    {
        "plugins": [
            ["import", {
                "libraryName": "vant",
                "libraryDirectory": "es",
                "style": true
            }]
        ]
    }
    

第二段

上述配置中，`libraryDirectory` 值指定 Vant 组件库的源代码目录为 `es`，同时 `style` 的值为 `true`，代表需要按需加载对应的样式文件。

接着，在组件中直接按需加载 Vant 的组件即可，如下所示：

    <template>
        <van-button>一个按钮</van-button>
    </template>

    <script>
    import {Button} from 'vant'

    export default {
        components:{'van-button':Button}
    }
    </script>
    

第三段

如果你仍使用 `Vue.use` 安装 Vant，可以将 `Vue.use` 改成按需引入方式，如以下代码所示：

    import { Button } from 'vant';
    import Vue from 'vue';

    Vue.component(Button.name, Button);
    

这样做之后，`Vue.use(Vant)` 就不再需要了。

第四段

最后，你可能会发现在实际开发中，按需引入后出现下图所示的错误信息：

这是由于 babel 配置的原因，我们可以在 `babel.config.js` 文件中做出如下的配置来解决问题：

    module.exports = {
        presets: [
            '@vue/cli-plugin-babel/preset'
        ],
        plugins: [
            ['import', {
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true
            }, 'vant']
        ]
    }
    

总结

随着前端项目的持续发展，按需加载将会成为我们优化性能的重要手段。在 Vue 项目中使用 Vant 组件库时，我们可以使用 `babel-plugin-import`，并按照规范配置 `.babelrc`、`babel.config.js` 这两个文件来实现按需加载 Vant 的组件。