Nextcloud-vue: Enable tree shaking

[juliushaertl]

The size of the vue components bundle is pretty big already, mainly caused by those three libraries:

| Library | Stat size | Parsed size |
|---|---|---
| v-tooltip | 184KB | 55KB |
| vue-multiselect | 44KB | 44KB |
| datepicker | 40KB | 40KB |

We should look into enabling webpack tree shaking to allow apps to just include the code that is actually used. So if an app doesn't use the multiselect or datepicker this could save us quite some KBs.

Bundle size treemap:

I tried to get this working a bit, but couldn't come up with something unforunately. @skjnldsv @ChristophWurst

[skjnldsv]

@juliushaertl I think it is actually enabled by default on production?

since we already support the individual import with import { xxx } from the app's webpack config should already do the trick?
Let me try

EDIT: ah no indeed, webpack is not doing it by default :/

[juliushaertl]

At least for me the ncvuecomponents.js size was always the full in apps.

[skjnldsv]

@juliushaertl I saw various libraries also outputting individual js files per component and allowing the import like so: import { PopoverMenu } from 'nextcloud-vue/dist/components'

https://github.com/vuematerial/vue-material

[juliushaertl]

Yeah unfortuantely none of them seems to use webpack, so we cannot easily compare what they are doing :wink:

[skjnldsv]

https://github.com/vuematerial/vue-material/blob/dev/build/lib/webpack.js ?

[juliushaertl]

I saw various libraries also outputting individual js files per component and allowing the import like so: import { PopoverMenu } from 'nextcloud-vue/dist/components'

I looked a bit more into how those libraries are doing that, but it seems they all create individual entry points for each component, so there is one all-in-one bundle as well as one for each component.

[skjnldsv]

@juliushaertl yes exactly! Would that be an issue? Nothing come to my mind :thinking:

[juliushaertl]

Ok, I digged a bit more into that. In general it seems that webpack would need to provide a way to export proper es modules, which is currently not supported: https://github.com/webpack/webpack/issues/2933

The general recommendation is to use rollup for bundling libraries (https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html) but not sure if we can move that over easily.

[skjnldsv]

Shall we close?

[juliushaertl]

Yep should be fine now