乐趣区

关于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

退出移动版