feat: Codesplit VR player

Only load VR player when needed.

Fixes #54

build/webpack.base.js

@@ -19,7 +19,8 @@ module.exports = {
   output: {
     path: path.resolve('./dist'),
     publicPath: '/dist/',
-    filename: 'build.js'
+    filename: 'build.js',
+    chunkFilename: "[name].chunk.js"
   },
   module: {
     rules: [

src/components/AframeVideoPlayer/AframeVideoPlayer.ts

@@ -107,4 +107,3 @@ export default class AframeVideoPlayer extends Vue {
     document.querySelector("a-scene").enterVR();
   }
 }
-Vue.component("aframe-video-player", AframeVideoPlayer);

src/components/VideoPlayer/VideoPlayer.ts

@@ -2,12 +2,10 @@ import Vue from "vue";
 import { Component, Model, Prop, Watch } from "vue-property-decorator";
 const videoPlayer = require("vue-video-player").videoPlayer;
 import videojs from "video.js";
-import AframeVideoPlayerComponent from "../AframeVideoPlayer/AframeVideoPlayer.vue";
 
 @Component({
   components: {
     videoPlayer,
-    AframeVideoPlayerComponent,
   },
 })
 export default class VideoPlayer extends Vue {
@@ -131,3 +129,8 @@ export default class VideoPlayer extends Vue {
     });
   }
 }
+
+// Since aframe-video-player is a subcomponent, we can register it as part of
+// our component here, then delay load it as needed.
+Vue.component("aframe-video-player",
+              () => import (/* webpackChunkName: "syncydinkvr" */ "../AframeVideoPlayer/AframeVideoPlayer.vue" ));

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions" : {
     "lib": ["es5", "ES2015", "ES2015.promise", "dom", "es6"],
     "target": "es6",
-    "module": "es2015",
+    "module": "esNext",
     "moduleResolution": "node",
     "strict": true,
     "sourceMap": true,