diff --git a/lib/builder/builder.js b/lib/builder/builder.js index 5bb25d15b381..b9fbabcfdcb1 100644 --- a/lib/builder/builder.js +++ b/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) { diff --git a/lib/builder/webpack/client.config.js b/lib/builder/webpack/client.config.js index a5617ebd0b2e..2b55d80070bb 100644 --- a/lib/builder/webpack/client.config.js +++ b/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) ) } }) diff --git a/lib/common/options.js b/lib/common/options.js index 51671889869b..0f8677656125 100755 --- a/lib/common/options.js +++ b/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' },