feat: splitPages

lib/app/App.js

@@ -4,15 +4,17 @@ import Vue from 'vue'
 import '<%= relativeToBuild(resolvePath(c.src || c)) %>'
 <% }) %>
 
-let layouts = {
-<%
-var layoutsKeys = Object.keys(layouts);
-layoutsKeys.forEach(function (key, i) { %>
-  "_<%= key %>": () => import('<%= layouts[key] %>'  /* webpackChunkName: "<%= wChunk('layouts/'+key) %>" */).then(m => m.default || m)<%= (i + 1) < layoutsKeys.length ? ',' : '' %>
-<% }) %>
-}
+<%= Object.keys(layouts).map(key => {
+  if (splitPages) {
+    return `const _${key} = () => import('${layouts[key]}'  /* webpackChunkName: "${wChunk('layouts/' + key)}" */).then(m => m.default || m)`
+  } else {
+    return `import _${key} from '${layouts[key]}'`
+  }
+}).join('\n') %>
 
-let resolvedLayouts = {}
+const layouts = { <%= Object.keys(layouts).map(key => '_' + key).join(',') %> }
+
+<% if (splitPages) { %>let resolvedLayouts = {}<% } %>
 
 export default {
   head: <%= serialize(head).replace('head(', 'function(').replace('titleTemplate(', 'function(') %>,
@@ -76,6 +78,7 @@ export default {
       }
     },
     <% } %>
+    <% if (splitPages) { %>
     setLayout (layout) {
       if (!layout || !resolvedLayouts['_' + layout]) layout = 'default'
       this.layoutName = layout
@@ -90,17 +93,28 @@ export default {
         return Promise.resolve(resolvedLayouts[_layout])
       }
       return layouts[_layout]()
-      .then((Component) => {
-        resolvedLayouts[_layout] = Component
-        delete layouts[_layout]
-        return resolvedLayouts[_layout]
-      })
-      .catch((e) => {
-        if (this.$nuxt) {
-          return this.$nuxt.error({ statusCode: 500, message: e.message })
-        }
-      })
+        .then((Component) => {
+          resolvedLayouts[_layout] = Component
+          delete layouts[_layout]
+          return resolvedLayouts[_layout]
+        })
+        .catch((e) => {
+          if (this.$nuxt) {
+            return this.$nuxt.error({ statusCode: 500, message: e.message })
+          }
+        })
     }
+    <% } else { %>
+    setLayout(layout) {
+      if (!layout || !layouts['_' + layout]) layout = 'default'
+      this.layoutName = layout
+      this.layout = layouts['_' + layout]
+      return this.layout
+    },
+    loadLayout(layout) {
+      return Promise.resolve(layouts['_' + layout])
+    }
+    <% } %>
   },
   components: {
     <%= (loading ? 'NuxtLoading' : '') %>

lib/app/router.js

@@ -1,17 +1,14 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
-Vue.use(Router)
-
-<%
-function recursiveRoutes(routes, tab, components) {
+<% function recursiveRoutes(routes, tab, components) {
   let res = ''
   routes.forEach((route, i) => {
     route._name = '_' + hash(route.component)
     components.push({ _name: route._name, component: route.component, name: route.name, chunkName: route.chunkName })
     res += tab + '{\n'
     res += tab + '\tpath: ' + JSON.stringify(route.path) + ',\n'
-    res += tab + '\tcomponent: ' + route._name
+    res += tab + '\tcomponent: ' + (splitPages ? route._name : `() => ${route._name}.default || ${route._name}`)
     res += (route.name) ? ',\n\t' + tab + 'name: ' + JSON.stringify(route.name) : ''
     res += (route.children) ? ',\n\t' + tab + 'children: [\n' + recursiveRoutes(routes[i].children, tab + '\t\t', components) + '\n\t' + tab + ']' : ''
     res += '\n' + tab + '}' + (i + 1 === routes.length ? '' : ',\n')
@@ -20,8 +17,19 @@ function recursiveRoutes(routes, tab, components) {
 }
 const _components = []
 const _routes = recursiveRoutes(router.routes, '\t\t', _components)
-uniqBy(_components, '_name').forEach((route) => { %>const <%= route._name %> = () => import('<%= relativeToBuild(route.component) %>' /* webpackChunkName: "<%= wChunk(route.chunkName) %>" */).then(m => m.default || m)
-<% }) %>
+%><%= uniqBy(_components, '_name').map((route) => {
+  const path = relativeToBuild(route.component)
+  const chunkName = wChunk(route.chunkName)
+  const name = route._name
+
+  if (splitPages) {
+    return `const ${name} = () => import('${path}' /* webpackChunkName: "${chunkName}" */).then(m => m.default || m)`
+  } else {
+    return `import ${name} from '${path}'`
+  }
+}).join('\n')%>
+
+Vue.use(Router)
 
 <% if (router.scrollBehavior) { %>
 const scrollBehavior = <%= serialize(router.scrollBehavior).replace('scrollBehavior(', 'function(').replace('function function', 'function') %>

lib/builder/builder.js

@@ -212,6 +212,7 @@ module.exports = class Builder {
         .map(ext => ext.replace(/^\./, ''))
         .join('|'),
       messages: this.options.messages,
+      splitPages: this.options.build.splitPages,
       uniqBy: _.uniqBy,
       isDev: this.options.dev,
       debug: this.options.debug,

lib/common/options.js

@@ -197,6 +197,7 @@ Options.defaults = {
   build: {
     analyze: false,
     profile: process.argv.includes('--profile'),
+    splitPages: true,
     maxChunkSize: false,
     extractCSS: false,
     cssSourceMap: undefined,