optimize webpack

examples/async-data/nuxt.config.js

@@ -1,7 +1,4 @@
 module.exports = {
-  build: {
-    vendor: ['axios'] // Add axios in the vendor.bundle.js
-  },
   loading: {
     color: '#4FC08D',
     failedColor: '#bf5050',

examples/auth-routes/nuxt.config.js

@@ -10,9 +10,6 @@ module.exports = {
       { hid: 'description', content: 'Auth Routes example' }
     ]
   },
-  build: {
-    vendor: ['axios']
-  },
   /*
   ** Add server middleware
   ** Nuxt.js uses `connect` module as server

examples/custom-build/nuxt.config.js

@@ -3,10 +3,8 @@ module.exports = {
     filenames: {
       css: 'styles.[chunkhash].css', // default: common.[chunkhash].css
       manifest: 'manifest.[hash].js', // default: manifest.[hash].js
-      vendor: 'vendor.[hash].js', // default: vendor.bundle.[hash].js
       app: 'app.[chunkhash].js' // default: nuxt.bundle.[chunkhash].js
     },
-    vendor: ['lodash'],
     extend(config, { isDev }) {
       if (isDev) {
         config.devtool = 'eval-source-map'

examples/custom-build/pages/index.vue

@@ -3,7 +3,6 @@
     <p><img src="~/assets/nuxt.png" /></p>
     <p>This image is included as data:image/png;base64...</p>
     <p>In the source code, the files generated are based on the build.filenames data.</p>
-    <p>If you look at the <a href="/_nuxt/vendor.js">vendor.js</a>, lodash has been included (cmd/ctrl + F "lodash").</p>
   </div>
 </template>
 

examples/custom-routes/nuxt.config.js

@@ -1,5 +1,2 @@
 module.exports = {
-  build: {
-    vendor: ['axios']
-  }
 }

examples/i18n/nuxt.config.js

@@ -1,8 +1,5 @@
 module.exports = {
   loading: { color: 'cyan' },
-  build: {
-    vendor: ['vue-i18n']
-  },
   router: {
     middleware: 'i18n'
   },

examples/layout-transitions/nuxt.config.js

@@ -1,7 +1,4 @@
 module.exports = {
-  build: {
-    vendor: ['axios']
-  },
   css: ['~/assets/main.css'],
   layoutTransition: {
     name: 'layout',

examples/plugins-vendor/nuxt.config.js

@@ -1,7 +1,4 @@
 module.exports = {
-  build: {
-    vendor: ['axios', 'mini-toastr', 'vue-notifications']
-  },
   plugins: [
     // ssr: false to only include it on client-side
     { src: '~/plugins/vue-notifications.js', ssr: false }

examples/routes-transitions/nuxt.config.js

@@ -1,6 +1,3 @@
 module.exports = {
-  build: {
-    vendor: ['axios']
-  },
   css: ['~/assets/main.css']
 }

examples/scroll-behavior/nuxt.config.js

@@ -1,6 +1,3 @@
 module.exports = {
-  build: {
-    vendor: ['axios']
-  },
   css: ['~/assets/main.css']
 }

examples/typescript/nuxt.config.js

@@ -19,8 +19,5 @@ module.exports = {
   ** Build configuration
   */
   css: ['tachyons/css/tachyons.min.css', '~/assets/css/main.css'],
-  build: {
-    vendor: ['axios', 'vuex-class', 'nuxt-class-component']
-  },
   modules: ['~/modules/typescript']
 }

examples/vue-chartjs/nuxt.config.js

@@ -7,7 +7,6 @@ module.exports = {
     ]
   },
   build: {
-    vendor: ['axios', 'moment', 'chart.js', 'vue-chartjs'],
     maxChunkSize: 300000
   },
   env: {

examples/with-firebase/nuxt.config.js

@@ -7,8 +7,5 @@ module.exports = {
     link: [
       { rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' }
     ]
-  },
-  build: {
-    vendor: ['axios']
   }
 }

examples/with-sockets/io/index.js

@@ -7,9 +7,6 @@ module.exports = function () {
   // close this server on 'close' event
   this.nuxt.plugin('close', () => new Promise((resolve) => server.close(resolve)))
 
-  // Add `socket.io-client` in vendor
-  this.addVendor('socket.io-client')
-
   // Add socket.io events
   let messages = []
   io.on('connection', (socket) => {

examples/with-vuetify/nuxt.config.js

@@ -10,11 +10,8 @@ module.exports = {
       { rel: 'stylesheet', type: 'text/css', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
     ]
   },
-  /*
+
-  ** Add Vuetify into vendor.bundle.js
-  */
   build: {
-    vendor: ['vuetify'],
     extractCSS: true,
     extend(config, ctx) {
       if (ctx.isServer) {

lib/builder/builder.js

@@ -81,19 +81,6 @@ module.exports = class Builder {
     )
   }
 
-  vendor() {
-    return ['vue', 'vue-router', 'vue-meta', this.options.store && 'vuex']
-      .concat(
-        this.options.build.extractCSS && [
-          // https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/456
-          'vue-style-loader/lib/addStylesClient',
-          'css-loader/lib/css-base'
-        ]
-      )
-      .concat(this.options.build.vendor)
-      .filter(v => v)
-  }
-
   forGenerate() {
     this.isStatic = true
   }

lib/builder/webpack/base.config.js

@@ -1,5 +1,10 @@
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const ProgressBarPlugin = require('progress-bar-webpack-plugin')
+const ProgressPlugin = require('webpack/lib/ProgressPlugin')
 const TimeFixPlugin = require('time-fix-plugin')
+const WarnFixPlugin = require('./plugins/warnfix')
+
+const Chalk = require('chalk')
 const { cloneDeep } = require('lodash')
 const { join, resolve } = require('path')
 
@@ -7,7 +12,6 @@ const { isUrl, urlJoin } = require('../../common/utils')
 
 const vueLoader = require('./vue-loader')
 const styleLoader = require('./style-loader')
-const WarnFixPlugin = require('./plugins/warnfix')
 
 /*
 |--------------------------------------------------------------------------
@@ -125,6 +129,24 @@ module.exports = function webpackBaseConfig({ name, isServer }) {
     plugins: this.options.build.plugins
   }
 
+  // Build progress bar
+  if (this.options.build.profile) {
+    config.plugins.push(
+      new ProgressPlugin({
+        profile: true
+      })
+    )
+  } else {
+    config.plugins.push(
+      new ProgressBarPlugin({
+        complete: Chalk.green('█'),
+        incomplete: Chalk.white('█'),
+        format: '  :bar ' + Chalk.green.bold(':percent') + ' :msg',
+        clear: false
+      })
+    )
+  }
+
   // Add timefix-plugin before others plugins
   if (this.options.dev) {
     config.plugins.unshift(new TimeFixPlugin())

lib/builder/webpack/client.config.js

@@ -4,34 +4,20 @@ const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
 const HTMLPlugin = require('html-webpack-plugin')
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
-const ProgressBarPlugin = require('progress-bar-webpack-plugin')
-const ProgressPlugin = require('webpack/lib/ProgressPlugin')
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const { resolve } = require('path')
 const Debug = require('debug')
-const Chalk = require('chalk')
 const { printWarn } = require('../../common/utils')
 const base = require('./base.config.js')
 
 const debug = Debug('nuxt:build')
 debug.color = 2 // Force green color
 
-/*
-|--------------------------------------------------------------------------
-| Webpack Client Config
-|
-| Generate public/dist/client-vendor-bundle.js
-| Generate public/dist/client-bundle.js
-|
-| In production, will generate public/dist/style.css
-|--------------------------------------------------------------------------
-*/
 module.exports = function webpackClientConfig() {
   let config = base.call(this, { name: 'client', isServer: false })
 
   // Entry points
   config.entry.app = resolve(this.options.buildDir, 'client.js')
-  config.entry.vendor = this.vendor()
 
   // Env object defined in nuxt.config.js
   let env = {}
@@ -84,24 +70,6 @@ module.exports = function webpackClientConfig() {
     )
   )
 
-  // Build progress bar
-  if (this.options.build.profile) {
-    config.plugins.push(
-      new ProgressPlugin({
-        profile: true
-      })
-    )
-  } else {
-    config.plugins.push(
-      new ProgressBarPlugin({
-        complete: Chalk.green('█'),
-        incomplete: Chalk.white('█'),
-        format: '  :bar ' + Chalk.green.bold(':percent') + ' :msg',
-        clear: false
-      })
-    )
-  }
-
   const shouldClearConsole =
     this.options.build.stats !== false &&
     this.options.build.stats !== 'errors-only'
@@ -111,6 +79,13 @@ module.exports = function webpackClientConfig() {
     new FriendlyErrorsWebpackPlugin({ clearConsole: shouldClearConsole })
   )
 
+  // Optimization
+  config.optimization = {
+    splitChunks: {
+      chunks: 'all'
+    }
+  }
+
   // --------------------------------------
   // Dev specific config
   // --------------------------------------
@@ -153,7 +128,7 @@ module.exports = function webpackClientConfig() {
         new UglifyJSPlugin(
           Object.assign(
             {
-              // cache: true,
+              cache: true,
               sourceMap: true,
               parallel: true,
               extractComments: {
@@ -190,6 +165,7 @@ module.exports = function webpackClientConfig() {
       isDev,
       isClient: true
     })
+
     // Only overwrite config when something is returned for backwards compatibility
     if (extendedConfig !== undefined) {
       config = extendedConfig

lib/common/options.js

@@ -206,12 +206,10 @@ Options.defaults = {
     filenames: {
       css: '[name].[contenthash].css',
       manifest: 'manifest.[hash].js',
-      vendor: 'vendor.[chunkhash].js',
       app: '[name].[chunkhash].js',
       chunk: '[name].[chunkhash].js'
     },
     styleResources: {},
-    vendor: [],
     plugins: [],
     babel: {
       babelrc: false

lib/core/module.js

@@ -23,12 +23,7 @@ module.exports = class ModuleContainer {
   }
 
   addVendor(vendor) {
-    /* istanbul ignore if */
+    printWarn('module: addVendor is no longer necessary')
-    if (typeof vendor !== 'string' && !Array.isArray(vendor)) {
-      throw new Error('Invalid vendor: ' + vendor)
-    }
-
-    this.options.build.vendor = uniq(this.options.build.vendor.concat(vendor))
   }
 
   addTemplate(template) {

test/fixtures/module/modules/basic/index.js

@@ -1,9 +1,8 @@
 const path = require('path')
 
 module.exports = function basicModule(options, resolve) {
-  // Add  vendor
+  // Add  vendor (deprecated)
   this.addVendor('lodash')
-  this.addVendor(['lodash', 'lodash'])
 
   // Add a plugin
   this.addPlugin(path.resolve(__dirname, 'reverse.js'))

test/module.test.js

@@ -29,13 +29,6 @@ test.serial('Init Nuxt.js', async t => {
   t.true(buildSpies.log.calledWithMatch('OPEN'))
 })
 
-test.serial('Vendor', async t => {
-  t.true(
-    nuxt.options.build.vendor.indexOf('lodash') !== -1,
-    'lodash added to config'
-  )
-})
-
 test.serial('Plugin', async t => {
   t.true(
     normalize(nuxt.options.plugins[0].src).includes(