better common chunks

This commit is contained in:
Pooya Parsa 2017-08-20 22:52:01 +04:30
parent 9bfd00d3f4
commit f42783af32
2 changed files with 20 additions and 7 deletions

View File

@ -18,7 +18,7 @@ export default function webpackBaseConfig ({ isClient, isServer }) {
const config = { const config = {
devtool: this.options.dev ? 'cheap-module-source-map' : 'nosources-source-map', devtool: this.options.dev ? 'cheap-module-source-map' : 'nosources-source-map',
entry: { entry: {
vendor: ['vue', 'vue-router', 'vue-meta'] app: null
}, },
output: { output: {
path: resolve(this.options.buildDir, 'dist'), path: resolve(this.options.buildDir, 'dist'),

View File

@ -24,20 +24,28 @@ export default function webpackClientConfig () {
config.name = 'client' config.name = 'client'
// Entry // App entry
config.entry.app = resolve(this.options.buildDir, 'client.js') config.entry.app = resolve(this.options.buildDir, 'client.js')
// Add vendors // Add vendors
if (this.options.store) { // This vendors should explicitly extracted
config.entry.vendor.push('vuex') // Even if not used in 50% of the chunks!
} const vendor = [
config.entry.vendor = config.entry.vendor.concat(this.options.build.vendor) 'vue',
'vue-router',
'vue-meta',
'core-js',
'regenerator-runtime',
'es6-promise',
'babel-runtime',
this.options.store && 'vuex'
].concat(this.options.build.vendor).filter(v => v)
// Extract vendor chunks for better caching // Extract vendor chunks for better caching
const _this = this const _this = this
config.plugins.push( config.plugins.push(
new webpack.optimize.CommonsChunkPlugin({ new webpack.optimize.CommonsChunkPlugin({
name: 'vendor', name: 'common',
filename: this.options.build.filenames.vendor, filename: this.options.build.filenames.vendor,
minChunks (module, count) { minChunks (module, count) {
// In the dev we use on-demand-entries. // In the dev we use on-demand-entries.
@ -47,6 +55,11 @@ export default function webpackClientConfig () {
return false return false
} }
// Extract all explicit vendor modules
if (module.context && vendor.some(v => module.context.includes(v))) {
return true
}
// Total pages // Total pages
const totalPages = _this.routes ? _this.routes.length : 0 const totalPages = _this.routes ? _this.routes.length : 0