improve CommonsChunkPlugin

inspired by zeit next

lib/builder/builder.js

@@ -236,6 +236,9 @@ export default class Builder extends Tapable {
       this.options.router.extendRoutes(templateVars.router.routes, r)
     }
 
+    // Make routes accessible for other modules and webpack configs
+    this.routes = templateVars.router.routes
+
     // -- Store --
     // Add store if needed
     if (this.options.store) {

lib/builder/webpack/client.config.js

@@ -31,18 +31,32 @@ export default function webpackClientConfig () {
     config.entry.vendor.push('vuex')
   }
   config.entry.vendor = config.entry.vendor.concat(this.options.build.vendor)
+
   // Extract vendor chunks for better caching
+  const _this = this
   config.plugins.push(
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
       filename: this.options.build.filenames.vendor,
-      minChunks (module) {
+      minChunks (module, count) {
+        // In the dev we use on-demand-entries.
+        // So, it makes no sense to use commonChunks based on the minChunks count.
+        // Instead, we move all the code in node_modules into each of the pages.
+        if (_this.options.dev) {
+          return false
+        }
+
+        // Total pages
+        const totalPages = _this.routes.length
+
         // A module is extracted into the vendor chunk when...
         return (
           // If it's inside node_modules
           /node_modules/.test(module.context) &&
           // Do not externalize if the request is a CSS file
-          !/\.(css|less|scss|sass|styl|stylus)$/.test(module.request)
+          !/\.(css|less|scss|sass|styl|stylus)$/.test(module.request) &&
+          // Used in at-least 1/2 of the total pages
+          (totalPages <= 2 ? count >= totalPages : count >= totalPages * 0.5)
         )
       }
     })

lib/common/options.js

@@ -166,7 +166,7 @@ Options.defaults = {
     filenames: {
       css: 'common.[contenthash].css',
       manifest: 'manifest.[hash].js',
-      vendor: 'vendor.[chunkhash].js',
+      vendor: 'common.[chunkhash].js',
       app: 'app.[chunkhash].js',
       chunk: '[name].[chunkhash].js'
     },