Profile npm packages

What to do if webpack runs very slooooooooooooowly?

I will look here on how to profile slow node scripts using VSCode and Google Chrome. I wrote a post on how to debug packages using VSCode that might be read in here:

Troubleshoot npm packages using VSCode

Find how your script is called using node

The “bin” section of the “package.json” contains the file that gets called from the command line:

ionic-team/ionic-app-scripts

Launch the node’s inspector

From inside your project, identify you library in your node_modules folder and launch the following command:

node --inspect .\node_modules\@ionic\app-scripts\bin\ionic-app-scripts.js serve

Profile with Chrome

Open Chrome at “chrome://inspect” and click on the “inspect” link

Start recording:

See the results

The main culprit here seems to be a webpack plugin called “RemoveParentModulesPlugin”:

webpack/webpack

During compilation, around 70 seconds are spent running it.

Of which 16 seconds within a single loop.

Summary

Profiling node scripts can help identify bottlenecks and might be an essential tool in order to solve the performance issues that might affect your dependencies