I do not work with Webpack itself but I know the effect from others ... there are three things to think about:
Sass becomes slowly as many SASS files are included to the process. Big SASS-Frameworks tend to use a lot of files and latest when you use a lot of big modules it heavily could slow down at all. Sometimes there are more modules included than needed.
Often the standard project settings try to to a lot of work at the same time. I.e. writing
min-filesin same process simply doubles the time. If it is that: just prepare 'min-files' at the end of your work. Up to that using additonal post-processors to autoprefix like linters and maby postcss needs extra time ... which counts doubles when writing min-files at once...JS-Sass-Compilers are slower at all. So you can save time using native SASS direct. This may not be handsome but in big projects that helped me a lot. If you may try that here the link to information how to install: https://sass-lang.com/install
Just ideas for thinking forward...
Answer from Brebber on Stack Overflow
» npm install fast-sass-loader
I do not work with Webpack itself but I know the effect from others ... there are three things to think about:
Sass becomes slowly as many SASS files are included to the process. Big SASS-Frameworks tend to use a lot of files and latest when you use a lot of big modules it heavily could slow down at all. Sometimes there are more modules included than needed.
Often the standard project settings try to to a lot of work at the same time. I.e. writing
min-filesin same process simply doubles the time. If it is that: just prepare 'min-files' at the end of your work. Up to that using additonal post-processors to autoprefix like linters and maby postcss needs extra time ... which counts doubles when writing min-files at once...JS-Sass-Compilers are slower at all. So you can save time using native SASS direct. This may not be handsome but in big projects that helped me a lot. If you may try that here the link to information how to install: https://sass-lang.com/install
Just ideas for thinking forward...
I have a real small prototype project with a maybe two page long styles.sass and my dev build with eval etc. took 16s. That was way too high.
I tried the cache-loader solution and it only supports webpack 4.0 and I use webpack 5.0.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR! dev webpack@"^5.75.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.0.0" from [email protected]
npm ERR! node_modules/cache-loader
npm ERR! dev cache-loader@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
Then I found a fast-sass-loader node module which is also not maintained anymore.
Like in life the simplest solution are always the best. Don't use SASS as at all. I replaced my sass file with a scss file. With a relative small effort my build went from 16s to 7s and I haven't even optimized anything in the packaging yet.
I'm quite sure your reload time goes down dramatically as well, the moment you replace every sass file with a scss one.
» npm install @4c/fast-sass-loader
I encountered the same issue with sass-loader and tried a few solutions but the best solution was to use cache-loader
Now my build went down from 27s to just 10s
Before
After
Install:
npm i -D cache-loader
Usage:
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../",
hmr: hotMode,
reloadAll: true,
},
},
// do not insert cache-loader above the extract css loader, it may cause issues
"cache-loader", // <--------
"css-loader?url=false",
"postcss-loader",
{
loader: "sass-loader",
options: {
sassOptions: {
hmr: true,
modules: true,
includePaths: [
path.join(__dir, "/views/scss/theme/"),
]
}
}
},
],
}
I have a real small prototype project with a maybe two page long styles.sass and my dev build with eval etc. took 16s. That was way too high.
I tried the cache-loader solution above and it only supports webpack 4.0 and I use webpack 5.0.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR! dev webpack@"^5.75.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.0.0" from [email protected]
npm ERR! node_modules/cache-loader
npm ERR! dev cache-loader@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
Then I found a fast-sass-loader node module which is also not maintained anymore.
Like in life the simplest solution are always the best. Don't use SASS as at all. I replaced my sass file with a scss file. With a relative small effort my build went from 16s to 7s and I haven't even optimized anything in the packaging yet.