vant如何按需引入样式及收益

vantUi框架提供了全量引入和按需引入组件的两种方式。

在实际开发中，为了尽可能的压缩打包体积，一般只选择按需引入，通过import的方式引入，这样能够在打包的时候，tree-shaking掉冗余代码，达到压缩包体大小的目的。

但vant 框架有一个问题，就是按需引入了组件之后，需要同时按需引入样式，不然就会导致引入组件缺失样式。

所幸vant的作者想到了这点，提供了多种方式，进行样式的按需引入。

一般按需引入样式，是针对项目对包体需要进行严格的大小控制，操作如下：

1、安装插件
# 通过 npm 安装
npm i unplugin-vue-components -D

2  配置插件
//vite.config.js
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

完成这两步，就可以在模板中直接使用vant的组件：

<template>
  <van-button type="primary" />
</template>

Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。

// Toast
import { showToast } from 'vant';
import 'vant/es/toast/style';

// Dialog
import { showDialog } from 'vant';
import 'vant/es/dialog/style';

// Notify
import { showNotify } from 'vant';
import 'vant/es/notify/style';

// ImagePreview
import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style';

配置完这些内容后，我们就能按需引入组件，且能正常显示了。

详细内容，参见 https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

但是我在实际打包之后，发现其实这个按需引入样式的收益其实没我们想象中那么大。

就算是全量引入样式：

import "vant/lib/index.css/"

打包出来之后的体积只有188kb。

dist/assets/index-2f754c3c.css      187.16 kB │ gzip: 50.56 kB

而我们使用按需引入，只引入一个<van-button>的样式，打包出来的样式显示如下：

dist/assets/index-3876849c.css       1.29 kB │ gzip:  0.66 kB
dist/assets/Home-01ae8a90.css       58.42 kB │ gzip: 31.11 kB

也就是说，仅仅引入了一个按钮，就需要占用58kb。

然后，我再引入一个Image组件，重新打包，结果如下：

dist/assets/index-3876849c.css       1.29 kB │ gzip:  0.66 kB
dist/assets/Home-c2ae1388.css       59.58 kB │ gzip: 31.29 kB

至此，我们已经明确，在按需引入组件样式的时候，必会引入一个大小为56kb左右的公共css样式表。

结论：

当我们在一个项目中，引入大量的组件之后，这个按需引入的收益会变小,还不如直接全量引入 css 文件。

当然，如果你的项目使用的组件适中，可以使用按需引入，大概能带来100kb的包体减小收益。

如果项目使用的组件比较少，个人不建议使用vant,直接手撸css，收益更高。

要是你们的项目，对包体大小不敏感，直接全量引入css样式就好，省心省力。