perf: improve chunk splitting

lib/builder/webpack/base.config.js

@@ -1,4 +1,3 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const TimeFixPlugin = require('time-fix-plugin')
 const WarnFixPlugin = require('./plugins/warnfix')
 const ProgressPlugin = require('./plugins/progress')
@@ -45,11 +44,13 @@ module.exports = function webpackBaseConfig({ name, isServer }) {
       path: resolve(this.options.buildDir, 'dist'),
       filename: this.getFileName('app'),
       chunkFilename: this.getFileName('chunk'),
+      jsonpFunction: '_NXT_',
       publicPath: isUrl(this.options.build.publicPath)
         ? this.options.build.publicPath
         : urlJoin(this.options.router.base, this.options.build.publicPath)
     },
     performance: {
+      maxEntrypointSize: 1000 * 1024,
       hints: this.options.dev ? false : 'warning'
     },
     resolve: {
@@ -143,16 +144,6 @@ module.exports = function webpackBaseConfig({ name, isServer }) {
   // Hide warnings about plugins without a default export (#1179)
   config.plugins.push(new WarnFixPlugin())
 
-  // CSS extraction
-  const extractCSS = this.options.build.extractCSS
-  if (extractCSS) {
-    const extractOptions = Object.assign(
-      { filename: this.getFileName('css') },
-      typeof extractCSS === 'object' ? extractCSS : {}
-    )
-    config.plugins.push(new ExtractTextPlugin(extractOptions))
-  }
-
   // Clone deep avoid leaking config between Client and Server
   return cloneDeep(config)
 }

lib/builder/webpack/client.config.js

@@ -9,12 +9,18 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const { resolve } = require('path')
 const Debug = require('debug')
 const base = require('./base.config.js')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 const debug = Debug('nuxt:build')
 debug.color = 2 // Force green color
 
+/*
+|--------------------------------------------------------------------------
+| Webpack Client Config
+|--------------------------------------------------------------------------
+*/
 module.exports = function webpackClientConfig() {
-  let config = base.call(this, { name: 'client', isServer: false })
+  const config = base.call(this, { name: 'client', isServer: false })
 
   // Entry points
   config.entry = resolve(this.options.buildDir, 'client.js')
@@ -83,7 +89,59 @@ module.exports = function webpackClientConfig() {
   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'
+    name: this.options.dev, // || this.options.mode === 'spa',
+
+    // 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
+      }
+    }
+  }
+
+  // Create additional runtime chunk for cache boosting
+  config.optimization.runtimeChunk = true
+
+  // CSS extraction
+  const extractCSS = this.options.build.extractCSS
+  if (extractCSS) {
+    config.plugins.push(new ExtractTextPlugin(Object.assign({
+      filename: this.getFileName('css')
+
+      // When using optimization.splitChunks and there are
+      // extracted chunks in the commons chunk,
+      // allChunks *must* be set to true
+      // TODO: For nuxt this makes duplicate css assets!
+      // allChunks: true
+    },
+    typeof extractCSS === 'object' ? extractCSS : {}
+    )))
   }
 
   // --------------------------------------

lib/common/options.js

@@ -204,10 +204,9 @@ Options.defaults = {
     ssr: undefined,
     publicPath: '/_nuxt/',
     filenames: {
-      css: '[name].[contenthash].css',
-      manifest: 'manifest.[hash].js',
       app: '[name].[chunkhash].js',
-      chunk: '[name].[chunkhash].js'
+      chunk: '[name].[chunkhash].js',
+      css: '[name].[contenthash].css'
     },
     styleResources: {},
     plugins: [],