Skip to content

Commit 911966e

Browse files
committed
Lazy load components
Signed-off-by: Varun Patil <[email protected]>
1 parent 3c12fe0 commit 911966e

File tree

5 files changed

+29
-13
lines changed

5 files changed

+29
-13
lines changed

src/components/Audios.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,18 @@
4646
</template>
4747

4848
<script>
49-
import Vue from 'vue'
50-
import VuePlyr from '@skjnldsv/vue-plyr'
5149
import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
5250
import logger from '../services/logger.js'
5351
54-
Vue.use(VuePlyr)
52+
const VuePlyr = () => import(/* webpackChunkName: 'components' */'@skjnldsv/vue-plyr')
5553
5654
export default {
5755
name: 'Audios',
5856
57+
components: {
58+
VuePlyr,
59+
},
60+
5961
computed: {
6062
player() {
6163
return this.$refs.plyr.player

src/components/ImageEditor.vue

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,11 @@ import { basename, dirname, extname, join } from 'path'
66
import { emit } from '@nextcloud/event-bus'
77
import { showError, showSuccess } from '@nextcloud/dialogs'
88
import axios from '@nextcloud/axios'
9-
import FilerobotImageEditor from 'filerobot-image-editor'
109
1110
import logger from '../services/logger.js'
1211
import translations from '../models/editorTranslations.js'
1312
14-
const { TABS, TOOLS } = FilerobotImageEditor
13+
let TABS, TOOLS;
1514
1615
export default {
1716
name: 'ImageEditor',
@@ -116,7 +115,12 @@ export default {
116115
},
117116
},
118117
119-
mounted() {
118+
async mounted() {
119+
// Lazy load the image editor
120+
const FilerobotImageEditor = (await import(/* webpackChunkName: 'filerobot' */'filerobot-image-editor')).default
121+
TABS = FilerobotImageEditor.TABS
122+
TOOLS = FilerobotImageEditor.TOOLS
123+
120124
this.imageEditor = new FilerobotImageEditor(
121125
this.$refs.editor,
122126
this.config

src/components/Videos.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,19 +53,21 @@
5353
</template>
5454

5555
<script>
56-
import Vue from 'vue'
57-
import VuePlyr from '@skjnldsv/vue-plyr'
5856
import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
5957
import logger from '../services/logger.js'
6058
59+
const VuePlyr = () => import(/* webpackChunkName: 'components' */'@skjnldsv/vue-plyr')
60+
6161
const liveExt = ['jpg', 'jpeg', 'png']
6262
const liveExtRegex = new RegExp(`\\.(${liveExt.join('|')})$`, 'i')
6363
64-
Vue.use(VuePlyr)
65-
6664
export default {
6765
name: 'Videos',
6866
67+
components: {
68+
VuePlyr,
69+
},
70+
6971
computed: {
7072
livePhoto() {
7173
return this.fileList.find(file => {

src/views/Viewer.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -168,9 +168,6 @@ import '@nextcloud/dialogs/dist/index.css'
168168
import { showError } from '@nextcloud/dialogs'
169169
import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
170170
171-
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
172-
import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
173-
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
174171
import isFullscreen from '@nextcloud/vue/dist/Mixins/isFullscreen.js'
175172
import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
176173
@@ -192,6 +189,14 @@ import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
192189
import FullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
193190
import Pencil from 'vue-material-design-icons/Pencil.vue'
194191
192+
// Dynamic loading
193+
const NcModal = () => import(
194+
/* webpackChunkName: 'components' */
195+
/* webpackPrefetch: true */
196+
'@nextcloud/vue/dist/Components/NcModal.js')
197+
const NcActionLink = () => import(/* webpackChunkName: 'components' */'@nextcloud/vue/dist/Components/NcActionLink')
198+
const NcActionButton = () => import(/* webpackChunkName: 'components' */'@nextcloud/vue/dist/Components/NcActionButton')
199+
195200
export default {
196201
name: 'Viewer',
197202

webpack.config.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,4 +55,7 @@ webpackConfig.plugins.push(...[
5555
// Add proper typescript support
5656
webpackConfig.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx', '.cjs', '.vue']
5757

58+
// Clean dist folder
59+
webpackConfig.output.clean = true
60+
5861
export default webpackConfig

0 commit comments

Comments
 (0)