nextcloud-vue icon indicating copy to clipboard operation
nextcloud-vue copied to clipboard
verified publisher icon nextcloud-libraries

Library size report

Open ShGKme opened this issue 5 months ago • 5 comments

Individual bundle impact of every component when bundled with Vite, @nextcloud/vite-config, @nextcloud/axios, @nextcloud/capabilities and @nextcloud/router.

Note: using 2 components together doesn't always result in a double size.

Common parts are reused. For example, if NcSelectUser is used, adding NcSelect and NcAvatar doesn't change the bundle size, as these components are included into NcSelectUser already.

Version: v9.0.1

  • Initial: how much JS loaded initially after importing the item
  • Async: how much JS loaded asynchronously, e.g. when a specific function is used
  • Assets: CSS size
  • Total: sum
Item Initial Size Async Size Assets Size Total Size
🥇 components/NcRichContenteditable 1214.94 kb - 73.20 kb 1288.14 kb
🥈 components/NcEmojiPicker 1129.84 kb - 36.54 kb 1166.38 kb
🥉 components/NcCollectionList 1039.04 kb - 41.67 kb 1080.70 kb
4️⃣ components/NcSelectUsers 1005.65 kb - 39.10 kb 1044.75 kb
5️⃣ components/NcDashboardWidget 938.59 kb - 29.04 kb 967.62 kb
6️⃣ components/NcUserBubble 932.54 kb - 26.11 kb 958.65 kb
7️⃣ components/NcListItemIcon 931.28 kb - 26.63 kb 957.92 kb
8️⃣ components/NcDashboardWidgetItem 930.50 kb - 26.66 kb 957.16 kb
9️⃣ components/NcAvatar 926.99 kb - 25.32 kb 952.31 kb
🔟 functions/emoji => emojiSearch 868.72 kb - - 868.72 kb
functions/usernameToColor => usernameToColor 733.77 kb - - 733.77 kb
components/NcRichText 367.51 kb - 63.83 kb 593.59 kb
components/NcDateTimePicker 282.95 kb - 58.65 kb 341.61 kb
functions/reference => getLinkWithPicker 255.98 kb - 45.18 kb 301.16 kb
components/NcAppSidebar 187.40 kb - 29.55 kb 216.95 kb
functions/reference => searchProvider 181.28 kb - 45.18 kb 226.46 kb
functions/reference => getProvider 180.94 kb - 45.18 kb 226.12 kb
functions/reference => getProviders 180.83 kb - 45.18 kb 226.01 kb
functions/reference => sortProviders 180.68 kb - 45.18 kb 225.86 kb
functions/reference => hasInteractiveView 180.53 kb - 45.18 kb 225.71 kb
functions/reference => anyLinkProviderId 180.47 kb - 45.18 kb 225.65 kb
components/NcColorPicker 160.26 kb - 14.22 kb 174.48 kb
components/NcAppSettingsDialog 156.92 kb - 21.40 kb 178.31 kb
components/NcDialog 152.73 kb - 19.84 kb 172.57 kb
components/NcAppNavigationItem 151.51 kb - 21.13 kb 172.64 kb
components/NcModal 146.01 kb - 17.63 kb 163.64 kb
components/NcBreadcrumbs 133.89 kb - 19.51 kb 153.39 kb
components/NcChip 122.52 kb - 14.62 kb 137.13 kb
components/NcListItem 121.82 kb - 16.46 kb 138.28 kb
components/NcBreadcrumb 119.11 kb - 11.58 kb 130.69 kb
components/NcAppNavigationCaption 116.19 kb - 11.10 kb 127.29 kb
components/NcActions 115.07 kb - 10.12 kb 125.19 kb
components/NcSelectTags 96.98 kb - 12.81 kb 109.79 kb
components/NcActionInput 96.63 kb - 81.58 kb 502.04 kb
components/NcSettingsSelectGroup 92.95 kb - 13.06 kb 106.01 kb
components/NcPopover 90.35 kb - 2.50 kb 92.85 kb
components/NcTimezonePicker 87.33 kb - 12.81 kb 100.14 kb
components/NcSelect 85.31 kb - 12.81 kb 98.12 kb
components/NcRelatedResourcesPanel 72.89 kb - 9.72 kb 82.61 kb
components/NcHeaderMenu 59.79 kb - 8.05 kb 67.84 kb
components/NcAppContent 52.55 kb - 12.70 kb 65.25 kb
components/NcAppNavigation 51.83 kb - 9.58 kb 61.41 kb
functions/emoji => getCurrentSkinTone 46.81 kb - - 46.81 kb
functions/emoji => setCurrentSkinTone 46.79 kb - - 46.79 kb
functions/emoji => emojiAddRecent 46.73 kb - - 46.73 kb
components/NcAppNavigationSettings 44.51 kb - 7.60 kb 52.10 kb
components/NcContent 43.02 kb - 8.38 kb 51.40 kb
components/NcPasswordField 43.00 kb - 14.39 kb 57.40 kb
components/NcCheckboxRadioSwitch 41.84 kb - 8.44 kb 50.28 kb
components/NcAppNavigationNewItem 41.39 kb - 13.78 kb 55.17 kb
components/NcAppNavigationSearch 41.24 kb - 14.93 kb 56.17 kb
components/NcUserStatusIcon 40.08 kb - 0.55 kb 40.64 kb
components/NcTextField 38.18 kb - 14.20 kb 52.38 kb
components/NcDateTime 34.84 kb - - 34.84 kb
components/NcDialogButton 32.73 kb - 7.20 kb 39.93 kb
composables/useFormatDateTime => useFormatRelativeTime 32.59 kb - - 32.59 kb
components/NcInputField 31.66 kb - 14.20 kb 45.86 kb
composables/useFormatDateTime => useFormatTime 31.18 kb - - 31.18 kb
components/NcTextArea 29.83 kb - 5.22 kb 35.04 kb
components/NcDateTimePickerNative 28.70 kb - 2.23 kb 30.93 kb
components/NcActionButton 27.94 kb - 3.28 kb 31.22 kb
components/NcActionTextEditable 27.89 kb - 8.17 kb 36.05 kb
components/NcSettingsSection 27.87 kb - 1.17 kb 29.05 kb
components/NcActionButtonGroup 26.99 kb - 1.34 kb 28.33 kb
components/NcNoteCard 24.96 kb - 2.33 kb 27.28 kb
components/NcIconSvgWrapper 22.50 kb - 0.95 kb 23.45 kb
components/NcCounterBubble 22.43 kb - 1.26 kb 23.68 kb
components/NcBlurHash 21.73 kb - 0.20 kb 21.93 kb
components/NcAppSidebarHeader 18.92 kb - - 18.92 kb
directives/Linkify => Linkify 17.68 kb - - 17.68 kb
functions/preloadImage => preloadImage 9.18 kb - - 9.18 kb
components/NcActionRadio 5.39 kb - 1.37 kb 6.76 kb
components/NcHeaderButton 5.17 kb - 7.28 kb 12.45 kb
components/NcAppNavigationNew 4.54 kb - 6.34 kb 10.88 kb
components/NcActionRouter 3.82 kb - 2.31 kb 6.13 kb
components/NcButton 3.79 kb - 6.08 kb 9.87 kb
composables/useIsDarkTheme => useIsDarkTheme 3.76 kb - - 3.76 kb
components/NcActionLink 3.74 kb - 2.07 kb 5.81 kb
functions/registerReference => renderWidget 3.61 kb - - 3.61 kb
functions/registerReference => renderCustomPickerElement 3.59 kb - - 3.59 kb
components/NcEllipsisedOption 3.56 kb - 0.53 kb 4.08 kb
components/NcActionCheckbox 3.49 kb - 1.43 kb 4.92 kb
composables/useIsDarkTheme => useIsDarkThemeElement 3.44 kb - - 3.44 kb
functions/registerReference => getCustomPickerElementSize 3.44 kb - - 3.44 kb
functions/registerReference => destroyCustomPickerElement 3.43 kb - - 3.43 kb
functions/registerReference => destroyWidget 3.41 kb - - 3.41 kb
functions/registerReference => NcCustomPickerRenderResult 3.38 kb - - 3.38 kb
functions/registerReference => isCustomPickerElementRegistered 3.37 kb - - 3.37 kb
functions/registerReference => isWidgetRegistered 3.36 kb - - 3.36 kb
functions/registerReference => registerWidget 3.30 kb - - 3.30 kb
functions/registerReference => registerCustomPickerElement 3.30 kb - - 3.30 kb
components/NcActionText 3.21 kb - 2.37 kb 5.58 kb
components/NcProgressBar 3.21 kb - 1.42 kb 4.63 kb
functions/contactsMenu => registerContactsMenuAction 2.85 kb - - 2.85 kb
functions/contactsMenu => getEnabledContactsMenuActions 2.75 kb - - 2.75 kb
composables/useHotKey => useHotKey 2.63 kb - - 2.63 kb
components/NcAppSidebarTab 2.48 kb - 0.50 kb 2.98 kb
components/NcAppSettingsSection 2.28 kb - 0.40 kb 2.68 kb
components/NcEmptyContent 2.12 kb - 1.14 kb 3.26 kb
components/NcHighlight 1.75 kb - - 1.75 kb
components/NcLoadingIcon 1.68 kb - 0.33 kb 2.01 kb
components/NcSavingIndicatorIcon 1.67 kb - - 1.67 kb
components/NcGuestContent 1.22 kb - 0.65 kb 1.87 kb
components/NcThemeProvider 1.21 kb - - 1.21 kb
components/NcAppContentList 1.11 kb - - 1.11 kb
components/NcActionCaption 1.08 kb - 0.52 kb 1.60 kb
components/NcAppNavigationList 1.03 kb - 0.38 kb 1.41 kb
components/NcAppContentDetails 0.96 kb - - 0.96 kb
components/NcAppNavigationIconBullet 0.84 kb - 0.47 kb 1.31 kb
composables/useIsMobile => useIsMobile 0.63 kb - - 0.63 kb
composables/useIsMobile => useIsSmallMobile 0.63 kb - - 0.63 kb
composables/useIsFullscreen => useIsFullscreen 0.58 kb - - 0.58 kb
components/NcAppNavigationSpacer 0.52 kb - 0.14 kb 0.66 kb
components/NcActionSeparator 0.51 kb - 0.32 kb 0.83 kb
functions/dialog => spawnDialog 0.47 kb - - 0.47 kb
components/NcVNodes 0.21 kb - - 0.21 kb
functions/isDarkTheme => isDarkTheme 0.17 kb - - 0.17 kb
functions/isDarkTheme => checkIfDarkTheme 0.17 kb - - 0.17 kb
functions/a11y => isA11yActivation 0.09 kb - - 0.09 kb
directives/Focus => Focus 0.04 kb - - 0.04 kb

ShGKme avatar Jul 23 '25 21:07 ShGKme

🥉 NcActionInput | 630.86 kb

Includes all input types including large data picker.

  • Solution: lazy loading
    • https://github.com/nextcloud-libraries/nextcloud-vue/pull/7195
  • Alternative: decompose super component to individual action inputs

ShGKme avatar Jul 23 '25 22:07 ShGKme

🥈 NcEmojiPicker | 1162.30 kb

Includes large emoji data json.

  • Proposal: lazy loading emoji data only on the first opening

ShGKme avatar Jul 23 '25 22:07 ShGKme

NcTimezonePicker | 293.52 kb

A result of @nextcloud/timezones:

  • We only use listAllTimezones which requires only a fraction of data
  • But everything is bundled
  • Proposal: optimize @nextcloud/timezones

ShGKme avatar Jul 23 '25 22:07 ShGKme

NcAvatar | 196.40 kb

  • Affects many other components
  • Proposal: split into two components:
    • Plain avatar
    • Avatar with the contacts menu

ShGKme avatar Jul 23 '25 22:07 ShGKme

🥇 NcRichContenteditable 1242.62 kb

  • Includes all emojis for emoji-picker in auto-complete
  • Proposal: lazy load emoji list

ShGKme avatar Jul 24 '25 13:07 ShGKme