I recently analyzed the size of my app bundle with webpack-bundle-analyze and it looks like @vue/ui/dist/vue-ui.esm.js takes a lot of size in my app bundle (around 1/3 of the total size).
I took a look at the vue-ui.esm.js bundle and indeed there is some sort of inline XML taking a lot of space at the beginning of the file (I extracted this XML to another file and it's 279k characters which is around 280 ko).
This XML seems to be related to icons used in the library (Material Design Icons?) as I find many XML symbols IDs with names like ic_account_balance_wallet or ic_account_circle.
Is there a reason for the icon library content to be injected in the vue.esm.js instead of using a .css file of the icon library? Because I would like to use PurgeCSS on non-used style imported in my project, which is not possible the way @vue/ui dist output is actually.
I recently analyzed the size of my app bundle with
webpack-bundle-analyzeand it looks like@vue/ui/dist/vue-ui.esm.jstakes a lot of size in my app bundle (around 1/3 of the total size).I took a look at the
vue-ui.esm.jsbundle and indeed there is some sort of inline XML taking a lot of space at the beginning of the file (I extracted this XML to another file and it's 279k characters which is around 280 ko).This XML seems to be related to icons used in the library (Material Design Icons?) as I find many XML symbols IDs with names like
ic_account_balance_walletoric_account_circle.Is there a reason for the icon library content to be injected in the
vue.esm.jsinstead of using a.cssfile of the icon library? Because I would like to use PurgeCSS on non-used style imported in my project, which is not possible the way@vue/uidist output is actually.Example of what the XML contains: