实现自动引入+按需引入element-plus原来如此简单

前言：使用unplugin-vue-components后，可以实现按需引入，而且也不用再使用import引入需要的组件，直接使用<el-button>等组件就可以。

1.安装npm包

npm i unplugin-vue-components unplugin-auto-import -D

2.配置

vue.config.js（这里是vuecli配置方法，其他脚手架需要参考文档）

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
    configureWebpack: {
      plugins: [
        AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
      ],
    }
}

3.具体使用

app.vue

<template>
    <div>
        <el-button>按钮</el-button>
    </div>
</template>

4.确认是否按需引入

首先，安装webpack-bundle-analyzer插件，

npm install --save-dev webpack-bundle-analyzer

然后执行以下命令：

npm run build --report

不用做任何配置，就可以看到终端打印出来打包后各文件大小。

如果想看详细的打包后文件的信息，可以在vue.config.js中做如下配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    configureWebpack: {
        plugins: [
            new BundleAnalyzerPlugin()
        ]
    }
}

然后打开地址http://127.0.0.1:8888就可以了。
据我个人测试，完整引入时，打包后chunk.js文件大小为400k左右。按需引入后，打包后chunk.js文件大小为200k左右。

4.非<template>中使用组件

如果在ts文件中使用ELMessage等组件，仍需要手动引入，代码如下。

import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'

---

参考文章：element-plus unplugin-vue-components