perf: Use individual component imports to reduce bundle size and build time

src/App.vue

@@ -46,13 +46,11 @@
 </template>
 
 <script>
-import {
-	NcAppContent,
-	NcAppNavigation,
-	NcAppNavigationNew,
-	NcAppNavigationItem,
-	NcContent,
-} from '@nextcloud/vue'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
+import NcAppNavigationNew from '@nextcloud/vue/components/NcAppNavigationNew'
+import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
+import NcContent from '@nextcloud/vue/components/NcContent'
 import { loadState } from '@nextcloud/initial-state'
 import { showSuccess, TOAST_UNDO_TIMEOUT, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'

src/components/AppSettings.vue

@@ -86,19 +86,17 @@
 </template>
 
 <script>
-import {
-	NcAppSettingsDialog,
-	NcAppSettingsSection,
-	NcAppSettingsShortcutsSection,
-	NcHotkeyList,
-	NcHotkey,
-	NcRadioGroup,
-	NcRadioGroupButton,
-	NcFormBox,
-	NcFormBoxButton,
-	NcFormGroup,
-	NcTextField,
-} from '@nextcloud/vue'
+import NcAppSettingsDialog from '@nextcloud/vue/components/NcAppSettingsDialog'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcAppSettingsShortcutsSection from '@nextcloud/vue/components/NcAppSettingsShortcutsSection'
+import NcHotkeyList from '@nextcloud/vue/components/NcHotkeyList'
+import NcHotkey from '@nextcloud/vue/components/NcHotkey'
+import NcRadioGroup from '@nextcloud/vue/components/NcRadioGroup'
+import NcRadioGroupButton from '@nextcloud/vue/components/NcRadioGroupButton'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
+import NcFormGroup from '@nextcloud/vue/components/NcFormGroup'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 

src/components/CategoriesList.vue

@@ -43,11 +43,9 @@
 </template>
 
 <script>
-import {
-	NcAppNavigationItem,
-	NcAppNavigationCaption,
-	NcCounterBubble,
-} from '@nextcloud/vue'
+import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
+import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
+import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
 import { Fragment } from 'vue-frag'
 
 import FolderIcon from 'vue-material-design-icons/Folder.vue'

src/components/CreateSampleButton.vue

@@ -11,9 +11,7 @@
 </template>
 <script>
 
-import {
-	NcButton,
-} from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
 
 import Plus from 'vue-material-design-icons/Plus.vue'
 

src/components/Dashboard.vue

@@ -34,7 +34,9 @@
 </template>
 
 <script>
-import { NcButton, NcDashboardWidget, NcDashboardWidgetItem } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDashboardWidget from '@nextcloud/vue/components/NcDashboardWidget'
+import NcDashboardWidgetItem from '@nextcloud/vue/components/NcDashboardWidgetItem'
 import { generateUrl } from '@nextcloud/router'
 
 import Plus from 'vue-material-design-icons/Plus.vue'

src/components/EditorEasyMDE.vue

@@ -39,10 +39,8 @@ import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
-import {
-	NcActions,
-	NcActionButton,
-} from '@nextcloud/vue'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import { basename, relative } from 'path'
 
 import store from '../store.js'

src/components/HelpMobile.vue

@@ -42,7 +42,7 @@
 import { generateFilePath } from '@nextcloud/router'
 
 import { Fragment } from 'vue-frag'
-import { NcFormGroup } from '@nextcloud/vue'
+import NcFormGroup from '@nextcloud/vue/components/NcFormGroup'
 
 export default {
 	components: {

src/components/Loading.vue

@@ -8,9 +8,7 @@
 </template>
 <script>
 
-import {
-	NcAppContent,
-} from '@nextcloud/vue'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 
 export default {
 	name: 'Loading',

src/components/Modal/EditorHint.vue

@@ -24,7 +24,8 @@
 	</NcModal>
 </template>
 <script>
-import { NcModal, NcButton } from '@nextcloud/vue'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import { loadState } from '@nextcloud/initial-state'
 
 import { deleteEditorMode, setSettings } from './../../NotesService.js'

src/components/NoteItem.vue

@@ -100,7 +100,10 @@
 </template>
 
 <script>
-import { NcListItem, NcActionButton, NcActionSeparator, NcActionInput } from '@nextcloud/vue'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import AlertOctagonOutlineIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import FileDocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
 import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'

src/components/NotePlain.vue

@@ -92,14 +92,12 @@
 </template>
 <script>
 
-import {
-	NcActions,
-	NcActionButton,
-	NcAppContent,
-	NcModal,
-	Tooltip,
-	isMobile,
-} from '@nextcloud/vue'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import Tooltip from '@nextcloud/vue/directives/Tooltip'
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 import { showError } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 
@@ -139,15 +137,19 @@ export default {
 		tooltip: Tooltip,
 	},
 
-	mixins: [isMobile],
-
 	props: {
 		noteId: {
 			type: String,
 			required: true,
 		},
 	},
 
+	setup() {
+		return {
+			isMobile: useIsMobile(),
+		}
+	},
+
 	data() {
 		return {
 			loading: false,

src/components/NoteRich.vue

@@ -10,9 +10,7 @@
 </template>
 <script>
 
-import {
-	isMobile,
-} from '@nextcloud/vue'
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 import { queueCommand, refreshNote } from '../NotesService.js'
@@ -22,15 +20,19 @@ import store from '../store.js'
 export default {
 	name: 'NoteRich',
 
-	mixins: [isMobile],
-
 	props: {
 		noteId: {
 			type: String,
 			required: true,
 		},
 	},
 
+	setup() {
+		return {
+			isMobile: useIsMobile(),
+		}
+	},
+
 	data() {
 		return {
 			loading: false,

src/components/NotesView.vue

@@ -60,13 +60,11 @@
 
 <script>
 
-import {
-	NcAppContent,
-	NcAppContentList,
-	NcAppContentDetails,
-	NcButton,
-	NcTextField,
-} from '@nextcloud/vue'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcAppContentList from '@nextcloud/vue/components/NcAppContentList'
+import NcAppContentDetails from '@nextcloud/vue/components/NcAppContentDetails'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import { categoryLabel } from '../Util.js'
 import NotesList from './NotesList.vue'
 import NotesCaption from './NotesCaption.vue'

src/components/Welcome.vue

@@ -34,10 +34,8 @@
 </template>
 <script>
 
-import {
-	NcAppContent,
-	NcButton,
-} from '@nextcloud/vue'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcButton from '@nextcloud/vue/components/NcButton'
 
 import Plus from 'vue-material-design-icons/Plus.vue'
 

webpack.config.js

@@ -8,14 +8,4 @@ const path = require('path')
 
 webpackConfig.entry.dashboard = path.join(__dirname, 'src', 'dashboard.js')
 
-webpackConfig.optimization = {
-	splitChunks: {
-		cacheGroups: {
-			defaultVendors: {
-				name: 'commons',
-			}
-		},
-	},
-}
-
 module.exports = webpackConfig