You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
create new project with Vue CLI 4.5.15 (last release version) - select default Vue 3 preset
edit package.json and add --report to the build command
Build the app - reported size id 88 KB
Install @vueuse/core and use it in App.vue (for examle usePreferredColorScheme())
Build again - bundle is now 310 KB (+222 KB increase). If you inspect generated report.html it shows both index.mjs and index.cjs from VueUse to be included in the bundle
Any idea what can be the problem ?
I'm also perplexed as it seems whole VueUse/core is included in the bundle although I'm using just single function? Is that Webpack 4 limitation ? Is it possible to get proper tree-shaking with Webpack 4 ?
Thanks
EDIT
Same applies to @vueuse/shared - again both mjs and cjs files are included in the bundle
don't know if it is important but I'm using pnpm
Update
Strangely enough, the issue is gone after upgrading from VueUse 7.4.0 to 7.5.1. Bundle size is now down to 150 KB (which still sounds like a lot for using just a single function)
Update 2
I had some spare time so I decided to look more into why including single VueUse function (usePreferredColorScheme) in a fresh Vue CLI app increases bundle size from cca 89 KB to 150 KB
Here are the differences (sizes are "Parsed size" = code after tree-shaking and minification) :
Package
Size diff
Notes
@vueuse/core
+4.06 KB
Just by adding function
@vueuse/shared
+15.3 KB
Report shows index.cjs while @vueuse/core shows index.mjs. Definitely strange.
vue-demi
+9.36 KB (1.06 KB Stat size)
Don' know enough about vue-demi to judge but does not feel right.
vue@3.2.26
(87.49 - 53.91) = +33.58 KB
Little surprising but makes sense as VueUse uses Composition API while clean Vue CLI app not so it is included in the bundle. Tree-shaking of Vue itself definitely works.
SUM
+62.24
Aligns perfectly with sizes reported by Webpack itself
Any comment @antfu ?
Especially the inclusion of Common JS build of @vueuse/shared feels very strange....
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Repo
Repro:
package.json
and add--report
to thebuild
command@vueuse/core
and use it inApp.vue
(for examleusePreferredColorScheme()
)report.html
it shows bothindex.mjs
andindex.cjs
from VueUse to be included in the bundleAny idea what can be the problem ?
I'm also perplexed as it seems whole VueUse/core is included in the bundle although I'm using just single function? Is that Webpack 4 limitation ? Is it possible to get proper tree-shaking with Webpack 4 ?
Thanks
EDIT
@vueuse/shared
- again bothmjs
andcjs
files are included in the bundlepnpm
Update
Strangely enough, the issue is gone after upgrading from VueUse 7.4.0 to 7.5.1. Bundle size is now down to 150 KB (which still sounds like a lot for using just a single function)
Update 2
I had some spare time so I decided to look more into why including single VueUse function (
usePreferredColorScheme
) in a fresh Vue CLI app increases bundle size from cca 89 KB to 150 KBHere are the differences (sizes are "Parsed size" = code after tree-shaking and minification) :
index.cjs
while @vueuse/core showsindex.mjs
. Definitely strange.Any comment @antfu ?
Especially the inclusion of Common JS build of @vueuse/shared feels very strange....
Beta Was this translation helpful? Give feedback.
All reactions