Merge pull request #295 from nextcloud/enh/async-loading

Enh/async loading

src/router/index.js

@@ -20,15 +20,29 @@
  *
  */
 
-import { generateUrl } from '@nextcloud/router'
+import { generateUrl, generateFilePath } from '@nextcloud/router'
 import Router from 'vue-router'
 import Vue from 'vue'
 
-import Albums from '../views/Albums'
-import Timeline from '../views/Timeline'
-import Tags from '../views/Tags'
 import isMapsInstalled from '../services/IsMapsInstalled'
 
+import { getRequestToken } from '@nextcloud/auth'
+
+// CSP config for webpack dynamic chunk loading
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(getRequestToken())
+
+// Correct the root of the app for chunk loading
+// OC.linkTo matches the apps folders
+// OC.generateUrl ensure the index.php (or not)
+// We do not want the index.php since we're loading files
+// eslint-disable-next-line
+__webpack_public_path__ = generateFilePath('photos', '', 'js/')
+
+const Albums = () => import('../views/Albums')
+const Tags = () => import('../views/Tags')
+const Timeline = () => import('../views/Timeline')
+
 Vue.use(Router)
 
 let mapsPath = generateUrl('/apps/maps')

webpack.common.js

@@ -13,7 +13,7 @@ module.exports = {
 		path: path.resolve(__dirname, './js'),
 		publicPath: '/js/',
 		filename: `${appName}.js`,
-		chunkFilename: '[name].js?v=[contenthash]',
+		chunkFilename: `${appName}.[name].js?v=[contenthash]`,
 	},
 	module: {
 		rules: [