Bug Type: Build
Environment
- Vue Version:
3.2.31 - Element Plus Version:
2.0.2 - Browser / OS:
Any - Build Tool:
Vite
Reproduction
Related Component
N/A
Reproduction Link
Steps to reproduce
To create a simple vue 3 + vite + element plus
npm create vite@latest my-vue-app --template vue
then install element-plus
npm install element-plus@2.0.2
once setup the project. I am explicitly importing each element plus component like
import { ElButton } from 'element-plus/lib/components/button/index';
With this single "ElButton" component import, my bundle size is like 160kb.
But after some research I find that if I change importing the components from '/lib/' folder I change it to '/es/' folder then the bundle size is reduced to 33kb.
Why this is happening ?
What is Expected?
bundle should import only the imported component from element plus.
What is actually happening?
Importing element-plus component explicitly from inside the /lib/ folder is very heavy and importing all code which is not required.
Additional comments
Need some explanation for this behavior of these imports and which is the better way to import the element-plus components.
6条答案
按热度按时间qyyhg6bp1#
https://element-plus.org/en-US/guide/quickstart.html#manually-import
Is this the solution you want?
w8f9ii692#
@ryuhangyeong kind of but can you tell me which is preferable way to import, will this "manually-import" reduce the bundle size as same as the "auto import" ?
I need to reduce the bundle size as much as possible, so which one is good ?
xqnpmsa83#
@ryuhangyeong and others ! Does this auto import works with vite SSR ?
lp0sw83n4#
https://element-plus.org/en-US/guide/quickstart.html#on-demand-import
Recommend
https://github.com/antfu/unplugin-vue-components
ymzxtsji5#
@ryuhangyeong thanks, for the link, one more doubt. I am facing issue with vite SSR with auto import. Will this plugin works on SSR ?
vqlkdk9b6#
@santhanakrishnanstark Are you setting the ssr directly in the vite environment? I haven't tried that part so it's hard to give an exact answer.
If you are using nuxt3 the link below will help.
https://github.com/element-plus/element-plus-nuxt