when i use this plugin it reduces the build time. it takes around 4 seconds to finish the scss build.
my project has just started and it takes around 4 seconds to build just the scss files.
initially i thought it was because sass-loader is slow. but with the new speed-measure-webpack-plugin it pointed out the actual cause of the slow performance.
General output time took 5.42 secs
SMP β± Plugins
HtmlWebpackPlugin took 0.196 secs
NamedModulesPlugin took 0.012 secs
ProgressPlugin took 0.004 secs
HotModuleReplacementPlugin took 0.004 secs
MiniCssExtractPlugin took 0.003 secs
NoEmitOnErrorsPlugin took 0.002 secs
AntdScssThemePlugin took 0 secs
DefinePlugin took 0 secs
LoaderOptionsPlugin took 0 secs
SystemBellPlugin took 0 secs
SMP β± Loaders
css-loader, and
postcss-loader, and
antd-scss-theme-plugin took 4.07 secs
module count = 7
babel-loader, and
eslint-loader took 0.302 secs
module count = 1
here you can check the module count as well.
{
test: /\.css$/,
use: [
!isProd ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
include: path.resolve(__dirname, '../', './src'),
sourceMap: false,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: false,
include: path.resolve(__dirname, '../', './src'),
plugins() {
return [autoprefixer('last 2 versions', 'ie 10')];
},
},
},
],
},
{
test: /\.scss$/,
use: [
!isProd ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: false,
include: path.resolve(__dirname, '../', './src'),
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: false,
include: path.resolve(__dirname, '../', './src'),
plugins() {
return [autoprefixer('last 2 versions', 'ie 10')];
},
},
},
AntdScssThemePlugin.themify({
loader: 'fast-sass-loader',
options: {
processCssUrls: false,
sourceMap: false,
include: path.resolve(__dirname, '../', './src'),
data: '@import "~Styles/themes/core";@import "~Styles/themes/anttheme";',
},
}),
],
},
// extra loader only because of antd designs
{
test: /\.less$/,
use: [
!isProd ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: false,
include: path.resolve(__dirname, '../', './src'),
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: false,
include: path.resolve(__dirname, '../', './src'),
plugins() {
return [autoprefixer('last 2 versions', 'ie 10')];
},
},
},
AntdScssThemePlugin.themify({
loader: 'less-loader',
options: {
include: path.resolve(__dirname, '../', './src'),
sourceMap: false,
},
}),
],
},
new webpack.ProgressPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new SystemBellPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
allChunks: true,
}),
new AntdScssThemePlugin('./src/Styles/themes/anttheme.scss'),
],
*ignore the config how its written , i have devided my config into multiple files feature wise. *
the point here is does it really takes 4 seconds to build a simple 7 module project or i am doing something wrong.