Merge pull request #3060 from nuxt/feat/asyncChunks

feat: make optimization and splitChunks configurable

bin/nuxt-build

@@ -33,6 +33,7 @@ if (argv.help) {
       --analyze, -a        Launch webpack-bundle-analyzer to optimize your bundles.
       --spa                Launch in SPA mode
       --universal          Launch in Universal mode (default)
+      --generate           Generate static version after build
       --config-file, -c    Path to Nuxt.js config file (default: nuxt.config.js)
       --help, -h           Displays this message
   `)
@@ -65,14 +66,14 @@ const close = () => {
   process.exit(0)
 }
 
-if (options.mode !== 'spa') {
-  // -- Build for SSR app --
+if (!argv.generate) {
+  // -- Build only --
   builder
     .build()
     .then(() => close())
     .catch(Utils.fatalError)
 } else {
-  // -- Build for SPA app --
+  // -- Build and generate --
   const s = Date.now()
 
   nuxt.hook('generate:distRemoved', () => debug('Destination folder cleaned'))
@@ -92,9 +93,6 @@ if (options.mode !== 'spa') {
     }
   })
 
-  // Disable minify to get exact results of nuxt start
-  nuxt.options.generate.minify = false
-
   // Generate dist for SPA static deployment
   new Generator(nuxt, builder).generate({ build: true }).then(() => {
     close()

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
@@ -112,6 +112,7 @@ export default {
       return this.layout
     },
     loadLayout(layout) {
+      if (!layout || !layouts['_' + layout]) layout = 'default'
       return Promise.resolve(layouts['_' + 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

@@ -6,6 +6,7 @@ import webpack from 'webpack'
 import HTMLPlugin from 'html-webpack-plugin'
 import StylishPlugin from 'webpack-stylish'
 import BundleAnalyzer from 'webpack-bundle-analyzer'
+import HtmlWebpackInlineSourcePlugin from 'html-webpack-inline-source-plugin'
 
 import Debug from 'debug'
 import base from './base.config'
@@ -42,6 +43,7 @@ export default function webpackClientConfig() {
       filename: 'index.spa.html',
       template: this.options.appTemplatePath,
       inject: true,
+      inlineSource: /runtime.*\.js$/,
       chunksSortMode: 'dependency'
     })
   )
@@ -57,6 +59,12 @@ export default function webpackClientConfig() {
     )
   }
 
+  // Enhances html-webpack-plugin functionality by adding the inlineSource option.
+  // https://github.com/DustinJackson/html-webpack-inline-source-plugin
+  if (!this.options.dev) {
+    config.plugins.push(new HtmlWebpackInlineSourcePlugin())
+  }
+
   // Generate vue-ssr-client-manifest
   config.plugins.push(
     new VueSSRClientPlugin({
@@ -78,48 +86,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

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: false
+    },
     babel: {
       babelrc: false
     },
@@ -99,7 +112,7 @@ export default {
     duration: 5000,
     rtl: false
   },
-  loadingIndicator: {},
+  loadingIndicator: false,
   transition: {
     name: 'page',
     mode: 'out-in',
@@ -134,8 +147,10 @@ export default {
     fallback: false
   },
   render: {
-    bundleRenderer: {},
-    resourceHints: true,
+    bundleRenderer: {
+      shouldPrefetch: () => false
+    },
+    resourceHints: undefined,
     ssr: undefined,
     http2: {
       push: false,

lib/common/options.mjs

@@ -103,9 +103,22 @@ Options.from = function (_options) {
     options.store = true
   }
 
-  // Normalize loadingIndicator
-  if (!isPureObject(options.loadingIndicator)) {
-    options.loadingIndicator = { name: options.loadingIndicator }
+  // SPA loadingIndicator
+  if (options.loadingIndicator) {
+    // Normalize loadingIndicator
+    if (!isPureObject(options.loadingIndicator)) {
+      options.loadingIndicator = { name: options.loadingIndicator }
+    }
+
+    // Apply defaults
+    options.loadingIndicator = Object.assign(
+      {
+        name: 'pulse',
+        color: '#dbe1ec',
+        background: 'white'
+      },
+      options.loadingIndicator
+    )
   }
 
   // Apply default hash to CSP option
@@ -113,16 +126,6 @@ Options.from = function (_options) {
     options.render.csp = { hashAlgorithm: 'sha256' }
   }
 
-  // Apply defaults to loadingIndicator
-  options.loadingIndicator = Object.assign(
-    {
-      name: 'pulse',
-      color: '#dbe1ec',
-      background: 'white'
-    },
-    options.loadingIndicator
-  )
-
   // cssSourceMap
   if (options.build.cssSourceMap === undefined) {
     options.build.cssSourceMap = options.dev
@@ -138,6 +141,11 @@ Options.from = function (_options) {
     options.debug = options.dev
   }
 
+  // Resource hints
+  if (options.render.resourceHints === undefined) {
+    options.render.resourceHints = !options.dev
+  }
+
   // Normalize ignore
   options.ignore = options.ignore ? [].concat(options.ignore) : []
 

lib/core/meta.mjs

@@ -43,12 +43,16 @@ export default class MetaRenderer {
       HEAD: '',
       BODY_SCRIPTS: ''
     }
+
     // Get vue-meta context
     const m = await this.getMeta(url)
+
     // HTML_ATTRS
     meta.HTML_ATTRS = m.htmlAttrs.text()
+
     // BODY_ATTRS
     meta.BODY_ATTRS = m.bodyAttrs.text()
+
     // HEAD tags
     meta.HEAD =
       m.meta.text() +
@@ -57,28 +61,42 @@ export default class MetaRenderer {
       m.style.text() +
       m.script.text() +
       m.noscript.text()
+
     // BODY_SCRIPTS
     meta.BODY_SCRIPTS = m.script.text({ body: true }) + m.noscript.text({ body: true })
+
     // Resources Hints
+
     meta.resourceHints = ''
-    // Resource Hints
+
     const clientManifest = this.renderer.resources.clientManifest
+
+    const shouldPreload = this.options.render.bundleRenderer.shouldPreload || (() => true)
+    const shouldPrefetch = this.options.render.bundleRenderer.shouldPrefetch || (() => true)
+
+    const runtimeRegex = /runtime.*\.js$/
+
     if (this.options.render.resourceHints && clientManifest) {
       const publicPath = clientManifest.publicPath || '/_nuxt/'
-      // Pre-Load initial resources
+
+      // Preload initial resources
       if (Array.isArray(clientManifest.initial)) {
         meta.resourceHints += clientManifest.initial
+          .filter(file => shouldPreload(file) && !(runtimeRegex.test(file)))
           .map(
             r => `<link rel="preload" href="${publicPath}${r}" as="script" />`
           )
           .join('')
       }
-      // Pre-Fetch async resources
+
+      // Prefetch async resources
       if (Array.isArray(clientManifest.async)) {
         meta.resourceHints += clientManifest.async
+          .filter(file => shouldPrefetch(file))
           .map(r => `<link rel="prefetch" href="${publicPath}${r}" />`)
           .join('')
       }
+
       // Add them to HEAD
       if (meta.resourceHints) {
         meta.HEAD += meta.resourceHints
@@ -87,12 +105,14 @@ export default class MetaRenderer {
 
     // Emulate getPreloadFiles from vue-server-renderer (works for JS chunks only)
     meta.getPreloadFiles = () =>
-      clientManifest.initial.map(r => ({
-        file: r,
-        fileWithoutQuery: r,
-        asType: 'script',
-        extension: 'js'
-      }))
+      clientManifest.initial
+        .filter(file => shouldPreload(file) && !(runtimeRegex.test(file)))
+        .map(r => ({
+          file: r,
+          fileWithoutQuery: r,
+          asType: 'script',
+          extension: 'js'
+        }))
 
     // Set meta tags inside cache
     this.cache.set(url, meta)

package.json

@@ -79,6 +79,7 @@
     "glob": "^7.1.2",
     "hash-sum": "^1.0.2",
     "html-minifier": "^3.5.11",
+    "html-webpack-inline-source-plugin": "^0.0.10",
     "html-webpack-plugin": "^3.0.6",
     "launch-editor-middleware": "^2.2.1",
     "lodash": "^4.17.5",

test/utils/browser.js

@@ -6,7 +6,8 @@ export default class Browser {
     this.browser = await puppeteer.launch(
       Object.assign(
         {
-          args: ['--no-sandbox', '--disable-setuid-sandbox']
+          args: ['--no-sandbox', '--disable-setuid-sandbox'],
+          executablePath: process.env.PUPPETEER_EXECUTABLE_PATH
         },
         options
       )

yarn.lock

@@ -3345,6 +3345,14 @@ html-tags@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
 
+html-webpack-inline-source-plugin@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/html-webpack-inline-source-plugin/-/html-webpack-inline-source-plugin-0.0.10.tgz#89bd5f761e4f16902aa76a44476eb52831c9f7f0"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    slash "^1.0.0"
+    source-map-url "^0.4.0"
+
 html-webpack-plugin@^3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.0.6.tgz#d35b0452aae129a8a9f3fac44a169a625d8cf3fa"