按需加载是一种优化策略，可以提高前端应用程序的性能、用户体验和可维护性。在使用 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