减少element-plus项目打包后文件大小¶

问题描述¶

https://element-plus.gitee.io/zh-CN/guide/quickstart.html

按照element-plus官网的说法，通过vite插件的自动导入功能，可以减少打包后文件大小。

但是，引入unplugin-vue-components unplugin-auto-import相关代码后，打包文件大小相比完整引入没有变化，我这里是1.3MB左右。

问题原因¶

在第一次引入element-plus时，我使用的默认的完整引入方法，即：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'  // 引入element-plus的css
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)  //引入所有element-plus组件
app.mount('#app')

实际上，如果使用“自动导入”方法，上述“完整引入”的做法需要删掉。否则，相当于既做了完整导入，又做了按需导入，最终打包文件自然不会变小。

解决方案¶

删除main.js中与element-plus相关的代码：

import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
app.use(ElementPlus)

本文为kyleblog.cn原创，转载请注明出处：https://www.kyleblog.cn/posts/element_plus_minify