diff --git a/lib/app/App.js b/lib/app/App.js index a9678148f4..8cf91f7255 100644 --- a/lib/app/App.js +++ b/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 diff --git a/lib/app/router.js b/lib/app/router.js index b49a436aa9..3731d6169d 100644 --- a/lib/app/router.js +++ b/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}'` diff --git a/lib/builder/builder.mjs b/lib/builder/builder.mjs index 091a05857a..de5f0f0200 100644 --- a/lib/builder/builder.mjs +++ b/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, diff --git a/lib/builder/webpack/client.config.mjs b/lib/builder/webpack/client.config.mjs index d9d56f3971..8fe29ffb8b 100644 --- a/lib/builder/webpack/client.config.mjs +++ b/lib/builder/webpack/client.config.mjs @@ -78,48 +78,59 @@ export default function webpackClientConfig() { ) ) - // Optimization - config.optimization.splitChunks = { - chunks: 'all', - // TODO: remove spa after https://github.com/jantimon/html-webpack-plugin/issues/878 solved - name: this.options.dev || this.options.mode === 'spa', + // -- Optimization -- + config.optimization = this.options.build.optimization - // Explicit cache groups - cacheGroups: { - // Vue.js core modules - 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: { - 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: { - test: /\.nuxt\//, - chunks: 'initial', - name: 'main', - priority: 8 - }, - // Other vendors inside node_modules - vendor: { - test: /node_modules\//, - chunks: 'initial', - name: 'vendor', - priority: 8 - } + // TODO: remove spa check after https://github.com/jantimon/html-webpack-plugin/issues/878 solved + if (this.options.dev || this.options.mode === 'spa') { + config.optimization.splitChunks.name = true + } + + // ... Explicit cache groups + + // Vue.js core modules + 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 + 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 + if (this.options.build.splitChunks.main) { + config.optimization.splitChunks.cacheGroups.main = { + test: /\.nuxt\//, + chunks: 'initial', + name: 'main', + priority: 8 + } + } + + // Other vendors inside node_modules + 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 diff --git a/lib/common/nuxt.config.js b/lib/common/nuxt.config.js index 66fb24f63b..bc7ad918ae 100644 --- a/lib/common/nuxt.config.js +++ b/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 },