separate views bundle

index.html

@@ -21,7 +21,7 @@
   <div id="vue-app">
     <app></app>
   </div>
-  <script src="build/app.js"></script>
+  <script src="build/main.bundle.js"></script>
 </body>
 
 </html>

package-lock.json

@@ -530,6 +530,12 @@
         "babel-runtime": "6.26.0"
       }
     },
+    "babel-plugin-syntax-dynamic-import": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
+      "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=",
+      "dev": true
+    },
     "babel-plugin-transform-es2015-arrow-functions": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-es2015": "^6.24.1",
     "css-loader": "^0.28.5",
     "eslint": "^4.5.0",

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);
-    });
+});

webpack.config.js

@@ -3,7 +3,6 @@ var path = require('path');
 
 
 // Naming and path settings
-var appName = 'app';
 var entryPoint = './src/main.js';
 var exportPath = path.resolve(__dirname, './build');
 
@@ -27,9 +26,6 @@ if (env === 'production') {
     }
     ));
 
-    appName = appName + '.js';
-} else {
-    appName = appName + '.js';
 }
 
 // Main Settings config
@@ -43,7 +39,8 @@ module.exports = {
     output: {
         path: exportPath,
         publicPath: 'build/',
-        filename: appName
+        filename: '[name].bundle.js',
+        chunkFilename: '[name].bundle.js'
     },
     module: {
         loaders: [{
@@ -65,7 +62,8 @@ module.exports = {
             exclude: /(node_modules|bower_components)/,
             loader: 'babel-loader',
             query: {
-                presets: ['es2015']
+                presets: ['es2015'],
+                plugins: ['syntax-dynamic-import']
             }
         }]
     },