Thanks for the tickets. The treemap in the first ticket was actually helpful in some way.
Here is what i did so far to reduce my app.js size:
- I included the Webpack Bundle Analyzer to get an overview of what contributes the most to size in my app.js (But don’t pack the report files into your appstore release, it’s just wasted space there)
- Always import components directly, never import like this:
import {NcButton} from '@nextcloud/vue'. This would load all components, not just the ones you need. - Used the Vue Async Components functionality to load NcAppNavigation* and NcBreadcumb* separately since they are gigantic. You can even create a mini placeholder / loading state component that Vue shows until the actual component is loaded. That helps to prevent content jumping around and you can show something to let the user know it’s loading.
- I replaced @nextcloud/moment with dayjs. I only use two functions of moment, so 800kb is too much for that. The downside is that i had to manually add import statements for every locale. Maybe there is a better way to do that idk, but at least it’s smaller now.
- Loading the material icons asynchronously does nothing. They are small and don’t add much. Just make sure to load them individually like
import FolderIcon from 'vue-material-design-icons/Folder';so you don’t load all at once.
These things are all workarounds for the actual problem, but at least they should help users with slow servers on on mobile connections.
I appreciate that the Nextcloud Devs seem to be aware of the size issue and have looked into it a bit, but i still can’t understand how you see a 180kb app navigation item and think “Yeah, no problem, we can ship it like that”. At least please include a warning in the documentation.
@Daphne It may be a bit rude to include you just like that, but maybe you could make sure that the “Usage” section here: https://nextcloud-vue-components.netlify.app/ contains some info that developers know that the components may be unexpectedly large and there are strategies to counter that.