Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

webpack

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

like image 655
Mathieu Avatar asked Apr 30 '20 14:04

Mathieu


People also ask

When using webpack Why do we need loader?

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.

What is optimization in webpack?

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.


1 Answers

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

like image 152
Mathieu Avatar answered Oct 05 '22 21:10

Mathieu