按需加载是一种优化策略，可以提高前端应用程序的性能、用户体验和可维护性。在使用 Element UI 或其他大型 UI 组件库时，通过按需加载可以最大程度地发挥其优势，确保应用程序的性能和可扩展性得到有效的管理；其优势有：减少初始加载时间，降低资源占用，优化用户体验，灵活性和可扩展性，节省带宽和资源成本等；
官方建议使用包管理器（如 NPM、Yarn 或 pnpm）安装 Element Plus，这里就选用自己喜欢的进行安装；
# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus以下就用yarn进行安装，自动按需加载还需要安装两款插件，是使用yarn 进行安装，执行：
$ yarn add unplugin-vue-components
$ yarn add unplugin-auto-import都安装完成之后，去配置我们的vue.config.json文件；
// vue.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {outputDir: './build',configureWebpack: {resolve: {alias: {components: '@/components'}},//配置webpack自动按需引入element-plus，plugins: [AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})]}
}配置完成之后我们尝试运行项目，yarn dev ；到这里有些人可能会出现以下的运行报错，如下：
其一： ERROR TypeError: AutoImport is not a function
这有可能是我们的插件版本过高导致的报错提示，执行回退版本到0.16.1；
$ yarn add unplugin-auto-import@0.16.1其二： ERROR TypeError: Components is not a function
我们解决完unplugin-auto-import之后出现的第二个报错提示，我们也是通过执行执行降版本回退的形式进行解决；
$ yarn add unplugin-vue-components@0.25.2最后运行项目，使用一个简单的element组件进行验证是否成功！
更多相关配置可以查看文档：https://github.com/sxzz/element-plus-best-practices/blob/db2dfc983ccda5570033a0ac608a1bd9d9a7f658/vite.config.ts#L21-L58
