From 911966e94af87ff96276efbcf791a3a150f43f8d Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Sat, 20 May 2023 21:00:24 -0700
Subject: [PATCH] Lazy load components

Signed-off-by: Varun Patil <varunpatil@ucla.edu>
---
 src/components/Audios.vue      |  8 +++++---
 src/components/ImageEditor.vue | 10 +++++++---
 src/components/Videos.vue      | 10 ++++++----
 src/views/Viewer.vue           | 11 ++++++++---
 webpack.config.ts              |  3 +++
 5 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/components/Audios.vue b/src/components/Audios.vue
index cee93297d..e03c0e844 100644
--- a/src/components/Audios.vue
+++ b/src/components/Audios.vue
@@ -46,16 +46,18 @@
 </template>
 
 <script>
-import Vue from 'vue'
-import VuePlyr from '@skjnldsv/vue-plyr'
 import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
 import logger from '../services/logger.js'
 
-Vue.use(VuePlyr)
+const VuePlyr = () => import(/* webpackChunkName: 'components' */'@skjnldsv/vue-plyr')
 
 export default {
 	name: 'Audios',
 
+	components: {
+		VuePlyr,
+	},
+
 	computed: {
 		player() {
 			return this.$refs.plyr.player
diff --git a/src/components/ImageEditor.vue b/src/components/ImageEditor.vue
index a158e4b88..b6d1dfb9e 100644
--- a/src/components/ImageEditor.vue
+++ b/src/components/ImageEditor.vue
@@ -6,12 +6,11 @@ import { basename, dirname, extname, join } from 'path'
 import { emit } from '@nextcloud/event-bus'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
-import FilerobotImageEditor from 'filerobot-image-editor'
 
 import logger from '../services/logger.js'
 import translations from '../models/editorTranslations.js'
 
-const { TABS, TOOLS } = FilerobotImageEditor
+let TABS, TOOLS;
 
 export default {
 	name: 'ImageEditor',
@@ -116,7 +115,12 @@ export default {
 		},
 	},
 
-	mounted() {
+	async mounted() {
+		// Lazy load the image editor
+		const FilerobotImageEditor = (await import(/* webpackChunkName: 'filerobot' */'filerobot-image-editor')).default
+		TABS = FilerobotImageEditor.TABS
+		TOOLS = FilerobotImageEditor.TOOLS
+
 		this.imageEditor = new FilerobotImageEditor(
 			this.$refs.editor,
 			this.config
diff --git a/src/components/Videos.vue b/src/components/Videos.vue
index b693d0f43..be206c958 100644
--- a/src/components/Videos.vue
+++ b/src/components/Videos.vue
@@ -53,19 +53,21 @@
 </template>
 
 <script>
-import Vue from 'vue'
-import VuePlyr from '@skjnldsv/vue-plyr'
 import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
 import logger from '../services/logger.js'
 
+const VuePlyr = () => import(/* webpackChunkName: 'components' */'@skjnldsv/vue-plyr')
+
 const liveExt = ['jpg', 'jpeg', 'png']
 const liveExtRegex = new RegExp(`\\.(${liveExt.join('|')})$`, 'i')
 
-Vue.use(VuePlyr)
-
 export default {
 	name: 'Videos',
 
+	components: {
+		VuePlyr,
+	},
+
 	computed: {
 		livePhoto() {
 			return this.fileList.find(file => {
diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
index 6e0faf7f4..908eb3c8a 100644
--- a/src/views/Viewer.vue
+++ b/src/views/Viewer.vue
@@ -168,9 +168,6 @@ import '@nextcloud/dialogs/dist/index.css'
 import { showError } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import isFullscreen from '@nextcloud/vue/dist/Mixins/isFullscreen.js'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 
@@ -192,6 +189,14 @@ import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
 import FullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 
+// Dynamic loading
+const NcModal = () => import(
+	/* webpackChunkName: 'components' */
+	/* webpackPrefetch: true */
+	'@nextcloud/vue/dist/Components/NcModal.js')
+const NcActionLink = () => import(/* webpackChunkName: 'components' */'@nextcloud/vue/dist/Components/NcActionLink')
+const NcActionButton = () => import(/* webpackChunkName: 'components' */'@nextcloud/vue/dist/Components/NcActionButton')
+
 export default {
 	name: 'Viewer',
 
diff --git a/webpack.config.ts b/webpack.config.ts
index aa692ce3f..7369fe417 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -55,4 +55,7 @@ webpackConfig.plugins.push(...[
 // Add proper typescript support
 webpackConfig.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx', '.cjs', '.vue']
 
+// Clean dist folder
+webpackConfig.output.clean = true
+
 export default webpackConfig