CODEWITHSUNDEEP
webpack
Mathieu
Mathieu

Reputation: 759

Webpack: what are modules with no loaders? How to optimize them?

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....

Upvotes: 10

Views: 5401

Answers (2)

Niels Bom
Niels Bom

Reputation: 9407

Is there a way to list all those modules with no loaders?

Yes, you can tell the speed-measure-webpack-plugin to show the top n modules that are the slowest in each category using the loaderTopFiles option. This will show you which modules they are.

Upvotes: -1

Mathieu
Mathieu

Reputation: 759

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...

Upvotes: 1

Related Questions