perf: improve chunk splitting

This commit is contained in:
Pooya Parsa 2018-03-17 13:04:33 +03:30
parent cd362f6feb
commit 531af31af7
3 changed files with 64 additions and 16 deletions

View File

@ -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)
}

View File

@ -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 : {}
)))
}
// --------------------------------------

View File

@ -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: [],