feat: make optimization and splitChunks configurable

lib/app/App.js

@@ -5,7 +5,7 @@ import '<%= relativeToBuild(resolvePath(c.src || c)) %>'
 <% }) %>
 
 <%= Object.keys(layouts).map(key => {
-  if (splitPages) {
+  if (splitChunks.layouts) {
     return `const _${hash(key)} = () => import('${layouts[key]}'  /* webpackChunkName: "${wChunk('layouts/' + key)}" */).then(m => m.default || m)`
   } else {
     return `import _${hash(key)} from '${layouts[key]}'`
@@ -14,7 +14,7 @@ import '<%= relativeToBuild(resolvePath(c.src || c)) %>'
 
 const layouts = { <%= Object.keys(layouts).map(key => `"_${key}": _${hash(key)}`).join(',') %> }
 
-<% if (splitPages) { %>let resolvedLayouts = {}<% } %>
+<% if (splitChunks.layouts) { %>let resolvedLayouts = {}<% } %>
 
 export default {
   head: <%= serialize(head).replace('head(', 'function(').replace('titleTemplate(', 'function(') %>,
@@ -78,7 +78,7 @@ export default {
       }
     },
     <% } %>
-    <% if (splitPages) { %>
+    <% if (splitChunks.layouts) { %>
     setLayout (layout) {
       if (!layout || !resolvedLayouts['_' + layout]) layout = 'default'
       this.layoutName = layout

lib/app/router.js

@@ -8,7 +8,7 @@ import Router from 'vue-router'
     components.push({ _name: route._name, component: route.component, name: route.name, chunkName: route.chunkName })
     res += tab + '{\n'
     res += tab + '\tpath: ' + JSON.stringify(route.path)
-    res += (route.component) ? ',\n\t' + tab + 'component: ' + (splitPages ? route._name : `() => ${route._name}.default || ${route._name}`) : ''
+    res += (route.component) ? ',\n\t' + tab + 'component: ' + (splitChunks.pages ? route._name : `() => ${route._name}.default || ${route._name}`) : ''
     res += (route.redirect) ? ',\n\t' + tab + 'redirect: ' + JSON.stringify(route.redirect) : ''
     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 + ']' : ''
@@ -24,7 +24,7 @@ const _routes = recursiveRoutes(router.routes, '\t\t', _components)
   const chunkName = wChunk(route.chunkName)
   const name = route._name
 
-  if (splitPages) {
+  if (splitChunks.pages) {
     return `const ${name} = () => import('${path}' /* webpackChunkName: "${chunkName}" */).then(m => m.default || m)`
   } else {
     return `import ${name} from '${path}'`

lib/builder/builder.mjs

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

lib/builder/webpack/client.config.mjs

@@ -78,48 +78,59 @@ export default function webpackClientConfig() {
     )
   )
 
-  // Optimization
+  // -- Optimization --
-  config.optimization.splitChunks = {
+  config.optimization = this.options.build.optimization
-    chunks: 'all',
+
-    // TODO: remove spa after https://github.com/jantimon/html-webpack-plugin/issues/878 solved
+  // TODO: remove spa check after https://github.com/jantimon/html-webpack-plugin/issues/878 solved
-    name: this.options.dev || this.options.mode === 'spa',
+  if (this.options.dev || this.options.mode === 'spa') {
+    config.optimization.splitChunks.name = true
+  }
+
+  // ... Explicit cache groups
 
-    // Explicit cache groups
-    cacheGroups: {
   // Vue.js core modules
-      vue: {
+  if (this.options.build.splitChunks.vue) {
+    config.optimization.splitChunks.cacheGroups.vue = {
       test: /node_modules\/(vue|vue-loader|vue-router|vuex|vue-meta)\//,
       chunks: 'initial',
       name: 'vue',
       priority: 10,
       enforce: true
-      },
+    }
+  }
+
   // Common modules which are usually included in projects
-      common: {
+  if (this.options.build.splitChunks.common) {
+    config.optimization.splitChunks.cacheGroups.common = {
       test: /node_modules\/(core-js|babel-runtime|lodash|es6-promise|moment|axios|webpack|setimediate|timers-browserify|process)\//,
       chunks: 'initial',
       name: 'common',
       priority: 9
-      },
+    }
+  }
+
   // Generated templates
-      main: {
+  if (this.options.build.splitChunks.main) {
+    config.optimization.splitChunks.cacheGroups.main = {
       test: /\.nuxt\//,
       chunks: 'initial',
       name: 'main',
       priority: 8
-      },
+    }
+  }
+
   // Other vendors inside node_modules
-      vendor: {
+  if (this.options.build.splitChunks.vendor) {
+    config.optimization.splitChunks.cacheGroups.vendor = {
       test: /node_modules\//,
       chunks: 'initial',
       name: 'vendor',
       priority: 8
     }
   }
-  }
 
   // Create additional runtime chunk for cache boosting
-  config.optimization.runtimeChunk = true
+  config.optimization.runtimeChunk = this.options.build.splitChunks.runtime
 
   // --------------------------------------
   // Dev specific config

lib/common/nuxt.config.js

@@ -18,7 +18,6 @@ export default {
   build: {
     analyze: false,
     profile: process.argv.includes('--profile'),
-    splitPages: true,
     maxChunkSize: false,
     extractCSS: false,
     cssSourceMap: undefined,
@@ -31,6 +30,20 @@ export default {
     },
     styleResources: {},
     plugins: [],
+    optimization: {
+      splitChunks: {
+        chunks: 'all',
+        name: false,
+        cacheGroups: {}
+      }
+    },
+    splitChunks: {
+      pages: true,
+      vendor: true,
+      commons: true,
+      runtime: true,
+      layouts: true
+    },
     babel: {
       babelrc: false
     },