I am currently working on a project with this build time profile. This is how the initial build profile appears.
SMP ⏱
General output time took 3 mins, 16.82 secs
SMP ⏱ Plugins
InjectManifest took 21.066 secs
ExtractCssChunksPlugin took 4.73 secs
LimitChunkCountPlugin took 1.84 secs
DefinePlugin took 0.423 secs
ReactLoadablePlugin took 0.122 secs
CopyPlugin took 0.085 secs
ContextReplacementPlugin took 0.077 secs
StatsPlugin took 0.002 secs
SMP ⏱ Loaders
extract-css-chunks-webpack-plugin, and
css-loader, and
postcss-loader, and
resolve-url-loader, and
sass-loader took 3 mins, 9.78 secs
module count = 342
css-loader, and
postcss-loader, and
resolve-url-loader, and
sass-loader took 3 mins, 9.77 secs
module count = 342
modules with no loaders took 45.23 secs
module count = 3304
babel-loader took 42.55 secs
module count = 786
url-loader, and
image-webpack-loader took 5.28 secs
module count = 402
file-loader took 1.58 secs
module count = 53
url-loader took 0.103 secs
module count = 3
It is large but still acceptable for the initial build.
However, any subsequent changes in watch mode results in close to half the time i.e 1.5 minutes.
The reasons are variable at times. For a JS change sometimes it is CopyPlugin and sometimes babel-loader , both take 1.5 minutes and a SASS change takes 1.5 minutes for a sass-loader.
This is due to a process named basic chunk optimization.
This where the build gets stuck for a long time.
After a lot of searching, I found the solution. It was using this plugin.
babel-plugin-dynamic-import-node
This reduced the watch mode recompilation time from 1.5 mins to 2 secs and solved my problem. However, what puzzles me is that this solution was for Webpack 1 and we are using Webpack 4. Is there some configuration/plugin that does it already? Since the plugin solution is 4 years old there is a good chance Webpack has added these optimizations to its later versions. Can someone explain to me how this plugin works and makes builds faster?
Apologies in advance, if I am missing a basic of Webpack.