Lazy load components

Signed-off-by: Varun Patil <[email protected]>

Author: pulsejet

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

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

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 => {

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',
 

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