mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
perf: improve chunk splitting
This commit is contained in:
parent
cd362f6feb
commit
531af31af7
@ -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)
|
||||
}
|
||||
|
@ -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 : {}
|
||||
)))
|
||||
}
|
||||
|
||||
// --------------------------------------
|
||||
|
@ -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: [],
|
||||
|
Loading…
Reference in New Issue
Block a user