关于vue.js:实现自动引入按需引入elementplus原来如此简单

前言：应用 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 左右。

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