perf: Lazy load dashboard components

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Author: juliusknorr

src/dashboard.js

@@ -1,10 +1,11 @@
-import Vue from 'vue'
-import Dashboard from './components/Dashboard.vue'
-
-Vue.mixin({ methods: { t, n } })
+__webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
+__webpack_public_path__ = OC.linkTo('notes', 'js/') // eslint-disable-line
 
 document.addEventListener('DOMContentLoaded', () => {
-	OCA.Dashboard.register('notes', (el) => {
+	OCA.Dashboard.register('notes', async (el) => {
+		const { default: Vue } = await import(/* webpackChunkName: "dashboard-lazy" */'vue')
+		const { default: Dashboard } = await import(/* webpackChunkName: "dashboard-lazy" */'./components/Dashboard.vue')
+		Vue.mixin({ methods: { t, n } })
 		const View = Vue.extend(Dashboard)
 		new View().$mount(el)
 	})

webpack.config.js

@@ -3,4 +3,14 @@ const path = require('path')
 
 webpackConfig.entry.dashboard = path.join(__dirname, 'src', 'dashboard.js')
 
+webpackConfig.optimization = {
+	splitChunks: {
+		cacheGroups: {
+			defaultVendors: {
+				name: 'commons',
+			}
+		},
+	},
+}
+
 module.exports = webpackConfig