Lazy load text-viewer and text-files

+ Remove vendor bundling
+ Remove chunkIds declaration as it is already the default
+ Group mermaid chunks

Signed-off-by: Louis Chemineau <[email protected]>

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

@@ -33,6 +33,7 @@ if (typeof OCA.Viewer === 'undefined') {
 	OCA.Viewer.registerHandler({
 		id: 'text',
 		mimes: [...openMimetypesMarkdown, ...openMimetypesPlainText],
+		// Would be good to be able to lazyload that
 		component: ViewerComponent,
 		group: null,
 		theme: 'default',

webpack.config.js

@@ -45,11 +45,6 @@ webpackConfig.optimization.splitChunks.cacheGroups = {
 	}
 }
 
-// webpackConfig.resolve.modules = [
-// 	path.resolve(__dirname, 'node_modules'),
-// 	'node_modules'
-// ]
-
 // Fix Buffer issues
 webpackConfig.plugins.push(new webpack.ProvidePlugin({
 	Buffer: ['buffer', 'Buffer'],
@@ -67,4 +62,15 @@ webpackRules.RULE_RAW_SVGS = {
 
 webpackConfig.module.rules = Object.values(webpackRules)
 
+webpackConfig.optimization.splitChunks.minSize = 102400
+
+webpackConfig.optimization.splitChunks.cacheGroups = {
+	mermaid: {
+		test(module) {
+			return module.resource && module.resource.includes(`${path.sep}node_modules${path.sep}mermaid`)
+		},
+		name: 'mermaid',
+	},
+}
+
 module.exports = webpackConfig