Bug report
What is the current behavior?
In my project, webpack4 is slower than webpack3. Why is it?
If used cache, webpack4 is quick. But I can not use cache.
I try to close some loaders to resolve it, but as before.
If the current behavior is a bug, please provide the steps to reproduce.
webpack3.x config
const path = require('path');
const webpack = require('webpack');
const babelOptions = {
presets: [
[require.resolve('babel-preset-env'), {
modules: false
}],
require.resolve('babel-preset-stage-2'),
require.resolve('babel-preset-react')
],
plugins: [
require.resolve('babel-plugin-syntax-async-functions'),
require.resolve('babel-plugin-syntax-dynamic-import'),
require.resolve('babel-plugin-transform-async-to-generator'),
require.resolve('babel-plugin-transform-regenerator'),
require.resolve('babel-plugin-transform-runtime'),
[require.resolve('babel-plugin-import'), {
libraryName: 'antd',
style: true
}]
]
};
module.exports = {
entry: {
'sales.dealerSalesBusinessPermit': './temp/sales.dealerSalesBusinessPermit'
},
target: 'web',
devtool: 'nosources-source-map',
output: {
pathinfo: true,
path: path.resolve('./release'),
filename: 'scripts/[name].[chunkhash].min.js'
},
resolve: {
modules: [
'node_modules'
],
alias: {
Shared: '@shsdt/web-shared/lib',
Shell: '@shsdt/web-shell/lib'
},
extensions: ['.js', '.jsx', '*'],
mainFields: ['browser', 'browserify', 'module', 'main'],
symlinks: false
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: require.resolve('babel-loader'),
options: babelOptions
}, {
test: /\.css$/,
use: [require.resolve('style-loader'), {
loader: require.resolve('css-loader'),
options: {
camelCase: true,
importLoaders: 1,
localIdentName: '[name]_[local]_[hash:base64:6]'
}
}]
}, {
test: /\.less$/,
use: [require.resolve('style-loader'), {
loader: require.resolve('css-loader')
}, {
loader: require.resolve('less-loader'),
options: {
javascriptEnabled: true,
modifyVars: {}
}
}]
}, {
test: /\.(jpg|png|xlsx|xls)$/,
loader: require.resolve('file-loader'),
options: {
name: '[path][name].[ext]',
outputPath(name) {
return `assets/${name.replace('node_modules/', '')
.replace('@shsdt/', '').replace('lib/', '')
.replace('assets/', '')}`;
}
}
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"',
PRODUCTION: true,
DEBUG: false
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: module => {
if(!module.context)
return false;
if(module.context.indexOf('@shsdt') > -1)
return module.context.indexOf('web-shared') > -1 ||
module.context.indexOf('web-bootstrap') > -1;
return module.context.indexOf('node_modules') > -1;
}
}),
new webpack.optimize.CommonsChunkPlugin({name: 'manifest'}),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
sourceMap: true,
comments: false
})
]
};
webpack4.x config
const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const babelOptions = {
presets: [
[require.resolve('babel-preset-env'), {
modules: false
}],
require.resolve('babel-preset-stage-2'),
require.resolve('babel-preset-react')
],
plugins: [
require.resolve('babel-plugin-syntax-async-functions'),
require.resolve('babel-plugin-syntax-dynamic-import'),
require.resolve('babel-plugin-transform-async-to-generator'),
require.resolve('babel-plugin-transform-regenerator'),
require.resolve('babel-plugin-transform-runtime'),
[require.resolve('babel-plugin-import'), {
libraryName: 'antd',
style: true
}]
]
};
module.exports = {
entry: {
'sales.dealerSalesBusinessPermit': './temp/sales.dealerSalesBusinessPermit'
},
mode: 'production',
target: 'web',
devtool: 'nosources-source-map',
output: {
pathinfo: true,
path: path.resolve('./release'),
filename: 'scripts/[name].[chunkhash].min.js'
},
resolve: {
modules: [
'node_modules'
],
alias: {
Shared: '@shsdt/web-shared/lib',
Shell: '@shsdt/web-shell/lib'
},
extensions: ['.js', '.jsx', '*'],
mainFields: ['browser', 'browserify', 'module', 'main'],
symlinks: false
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'common',
chunks: 'all'
}
}
},
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
cache: false,
parallel: 4,
extractComments: false
})
]
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: require.resolve('babel-loader'),
options: babelOptions
}, {
test: /\.css$/,
use: [require.resolve('style-loader'), {
loader: require.resolve('css-loader'),
options: {
camelCase: true,
importLoaders: 1,
localIdentName: '[name]_[local]_[hash:base64:6]'
}
}]
}, {
test: /\.less$/,
use: [require.resolve('style-loader'), {
loader: require.resolve('css-loader')
}, {
loader: require.resolve('less-loader'),
options: {
javascriptEnabled: true,
modifyVars: {}
}
}]
}, {
test: /\.(jpg|png|xlsx|xls)$/,
loader: require.resolve('file-loader'),
options: {
name: '[path][name].[ext]',
outputPath(name) {
return `assets/${name.replace('node_modules/', '')
.replace('@shsdt/', '').replace('lib/', '')
.replace('assets/', '')}`;
}
}
}]
},
plugins: [
new webpack.DefinePlugin({
PRODUCTION: true,
DEBUG: false
})
]
};
What is the expected behavior?
Useing this config, I can not use cache , webpack4 is slower than webpack3. Why is it?
Other relevant information:
webpack version: 4.10.1 / 3.10.0
Node.js version: 8.9.3
Operating System: win10(64)
Additional tools:
mode: "production"adds a lot of not-so-well-known plugins which was not the case in webpack 3. In consequence, webpack 4 is slower if you were not using them before.