按需自动加载 Element Plus 实测

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

        其二： ERROR  TypeError: Components is not a function

我们解决完unplugin-auto-import之后出现的第二个报错提示，我们也是通过执行执行降版本回退的形式进行解决；

$ yarn add [email protected]

最后运行项目，使用一个简单的element组件进行验证是否成功！

更多相关配置可以查看文档：https://github.com/sxzz/element-plus-best-practices/blob/db2dfc983ccda5570033a0ac608a1bd9d9a7f658/vite.config.ts#L21-L58