I'm using speed-measure-webpack-plugin
to measure the performance of my Webpack builds, and something is mysterious to me : when cold booting my dev build, I see that modules with no loaders
is by far the most common type of module, and also the type of module that takes the longest to process :
SMP ⏱ Loaders
modules with no loaders took 48.51 secs
module count = 2963
typings-for-css-modules-loader, and
postcss-loader, and
less-loader took 41.81 secs
module count = 95
ts-loader took 39.55 secs
module count = 488
babel-loader took 4.12 secs
module count = 4
css-loader, and
postcss-loader took 3.91 secs
module count = 1
url-loader took 1.13 secs
module count = 10
pegjs-loader took 0.723 secs
module count = 2
style-loader, and
typings-for-css-modules-loader, and
postcss-loader, and
less-loader took 0.157 secs
module count = 95
html-webpack-plugin took 0.045 secs
module count = 1
style-loader, and
css-loader, and
postcss-loader took 0.002 secs
module count = 1
My questions are: what exactly are modules with no loaders? Is there a way to list all those modules with no loaders so I can see where they come from, and what can be done about them?
I'm suspecting they come from node_modules
dependencies, but I'm not sure what to do about it....
They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs.
Tells webpack to determine and flag chunks which are subsets of other chunks in a way that subsets don't have to be loaded when the bigger chunk has been already loaded. By default optimization. flagIncludedChunks is enabled in production mode and disabled elsewise. webpack.config.js module.
Ok, after removing the include
option in this rule of the webpack config :
{
test: /\.jsx?$/,
// include: path.resolve(__dirname, 'src'),
use: ['babel-loader'],
},
I was able to have no modules with no loaders, so I assume they were all vanilla JS files from node_modules
.
However, to my disappointment, this actually slowed my build:
SMP ⏱ Loaders
babel-loader took 1 min, 0.222 secs
module count = 2946
typings-for-css-modules-loader, and
postcss-loader, and
less-loader took 41.55 secs
module count = 95
ts-loader took 35.4 secs
module count = 488
css-loader, and
postcss-loader took 26.68 secs
module count = 12
modules with no loaders took 5.18 secs
module count = 10
url-loader took 1.69 secs
module count = 25
pegjs-loader took 0.597 secs
module count = 2
style-loader, and
typings-for-css-modules-loader, and
postcss-loader, and
less-loader took 0.104 secs
module count = 95
html-webpack-plugin took 0.025 secs
module count = 1
style-loader, and
css-loader, and
postcss-loader took 0.009 secs
module count = 12
I don't believe there is a way to actually optimize this...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With