element-plus自动按需引入

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

1.安装npm包

1	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插件，

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

然后执行以下命令：

1	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等组件，仍需要手动引入，代码如下。