separate views bundle

src/main.js

@@ -5,7 +5,7 @@ import Axios from 'axios';
 import JwtDecode from 'jwt-decode';
 
 import App from './app.vue';
-import Views from './views/views.js';
+// import Views from './views/views.js';
 
 Vue.use(VueRouter);
 Vue.use(Vuex);
@@ -163,52 +163,56 @@ if (persist) {
     store.state.persist = persist;
 }
 
-// load init
-Axios.get('conf/init.json')
-    .then(results => {
+
+// load views
+import(/* webpackChunkName: "views" */ './views/views.js').then(Views => {
+    // load init
+    Axios.get('conf/init.json')
+        .then(results => {
         // set navigation
-        if (!Array.isArray(results.data.routes)) {
-            alert('invalid data in init.json, no routes');
-            return;
-        }
+            if (!Array.isArray(results.data.routes)) {
+                alert('invalid data in init.json, no routes');
+                return;
+            }
 
-        // set ui config in store
-        store.commit("setUI", results.data.ui);
+            // set ui config in store
+            store.commit("setUI", results.data.ui);
 
-        // add routes
-        let routes = [];
-        let rIdx = 0;
-        results.data.routes.forEach(({name, to, content, data}) => routes.push({
-            name: name,
-            path: to,
-            meta: {
-                title: name
-            },
-            component: Vue.component(name + rIdx++, {
-                template: '<div id="' + name + rIdx + '">' + content + '</div>',
-                components: Views,
-                data: function(data) {
-                    if (typeof data != 'object') {
-                        return () => { return {}; };
-                    }
-                    return () => { return data; };
-                }(data)
-            })
-        }));
-        router.addRoutes(routes);
-        router.beforeEach((to, from, next) => {
-            document.title = (to.meta && to.meta.title) ? results.data.title + ': ' + to.meta.title : results.data.title;
-            next();
+            // add routes
+            let routes = [];
+            let rIdx = 0;
+            results.data.routes.forEach(({name, to, content, data}) => routes.push({
+                name: name,
+                path: to,
+                meta: {
+                    title: name
+                },
+                component: {
+                    template: '<div id="' + name + rIdx + '">' + content + '</div>',
+                    components: Views.default,
+                    data: function(data) {
+                        if (typeof data != 'object') {
+                            return () => { return {}; };
+                        }
+                        return () => { return data; };
+                    }(data)
+                }
+            }));
+            router.addRoutes(routes);
+            router.beforeEach((to, from, next) => {
+                document.title = (to.meta && to.meta.title) ? results.data.title + ': ' + to.meta.title : results.data.title;
+                next();
+            });
+
+            // load app, when init finishs
+            new Vue({
+                el: '#vue-app',
+                render: h => h(App),
+                router,
+                store
+            });
+        })
+        .catch(error => {
+            alert('error loading: ' + error.message);
         });
-
-        // load app, when init finishs
-        new Vue({
-            el: '#vue-app',
-            render: h => h(App),
-            router,
-            store
-        });
-    })
-    .catch(error => {
-        alert('error loading: ' + error.message);
-    });
+});