Merge pull request #4698 from nextcloud/artonge/perf/lazy_load_viewer

src/files.js

@@ -21,26 +21,28 @@
  */
 import { linkTo } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import Vue from 'vue'
+import { registerFileListHeaders } from '@nextcloud/files'
 
 import { logger } from './helpers/logger.js'
-import { registerFileActionFallback } from './helpers/files.js'
-import FilesSettings from './views/FilesSettings.vue'
-import store from './store/index.js'
 
 __webpack_nonce__ = window.btoa(OC.requestToken) // eslint-disable-line
 __webpack_public_path__ = linkTo('text', 'js/') // eslint-disable-line
 
 const workspaceAvailable = loadState('text', 'workspace_available')
 const workspaceEnabled = loadState('text', 'workspace_enabled')
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
 	if (typeof OCA.Viewer === 'undefined') {
+		const { registerFileActionFallback } = await import('./helpers/files.js')
 		logger.error('Viewer app is not installed')
 		registerFileActionFallback()
 	}
 
 	if (workspaceAvailable && OCA && OCA?.Files?.Settings) {
+		const { default: Vue } = await import('vue')
+		const { default: FilesSettings } = await import('./views/FilesSettings.vue')
+		const { default: store } = await import('./store/index.js')
+
 		Vue.prototype.t = window.t
 		Vue.prototype.n = window.n
 		Vue.prototype.OCA = window.OCA
@@ -54,6 +56,10 @@ document.addEventListener('DOMContentLoaded', () => {
 		}))
 	}
 
+	if (workspaceAvailable) {
+		const { FilesWorkspaceHeader } = await import('./helpers/files.js')
+		registerFileListHeaders(FilesWorkspaceHeader)
+	}
 })
 
 OCA.Text = {

src/helpers/files.js

@@ -27,7 +27,6 @@ import { loadState } from '@nextcloud/initial-state'
 
 import { getSharingToken } from './token.js'
 import { openMimetypes } from './mime.js'
-import RichWorkspace from '../views/RichWorkspace.vue'
 import store from '../store/index.js'
 import { getCurrentUser } from '@nextcloud/auth'
 import { showSuccess, showError } from '@nextcloud/dialogs'
@@ -211,7 +210,7 @@ export const FilesWorkspaceHeader = new Header({
 		return view.id === 'files'
 	},
 
-	render(el, folder, view) {
+	async render(el, folder, view) {
 		if (vm) {
 			// Enforce destroying of the old rendering and rerender as the FilesListHeader calls render on every folder change
 			vm.$destroy()
@@ -223,6 +222,8 @@ export const FilesWorkspaceHeader = new Header({
 
 		newWorkspaceCreated = false
 
+		const { default: RichWorkspace } = await import('./../views/RichWorkspace.vue')
+
 		import('vue').then((module) => {
 			el.id = 'files-workspace-wrapper'
 

src/viewer.js

@@ -20,7 +20,6 @@
  *
  */
 
-import ViewerComponent from './components/ViewerComponent.vue'
 import { logger } from './helpers/logger.js'
 import { openMimetypesMarkdown, openMimetypesPlainText } from './helpers/mime.js'
 
@@ -33,7 +32,7 @@ if (typeof OCA.Viewer === 'undefined') {
 	OCA.Viewer.registerHandler({
 		id: 'text',
 		mimes: [...openMimetypesMarkdown, ...openMimetypesPlainText],
-		component: ViewerComponent,
+		component: () => import('./components/ViewerComponent.vue'),
 		group: null,
 		theme: 'default',
 		canCompare: true,

webpack.config.js

@@ -36,19 +36,12 @@ Object.assign(webpackConfig.output, {
 
 webpackConfig.optimization.chunkIds = 'named'
 webpackConfig.optimization.splitChunks.cacheGroups = {
-	defaultVendors: {
-		test(module) {
-			return module.resource && module.resource.includes(`${path.sep}node_modules${path.sep}`) &&
-				!module.resource.includes(`${path.sep}highlight.js${path.sep}`)
-		},
-		name: 'vendors',
-	}
+	mermaid: {
+		test: /[\\/]node_modules[\\/](mermaid)[\\/]/,
+		name: 'mermaid',
+	},
 }
-
-// webpackConfig.resolve.modules = [
-// 	path.resolve(__dirname, 'node_modules'),
-// 	'node_modules'
-// ]
+webpackConfig.optimization.splitChunks.minSize = 102400
 
 // Fix Buffer issues
 webpackConfig.plugins.push(new webpack.ProvidePlugin({