WebStorm is our IDE of choice and we love it. It’s brilliant. This blog’s title might be a bit of a hyperbole, but WebStorm has a serious issue. There is one big fuckup and that is the way WebStorm indexes stuff. With version 10 the indexing process improved already, but it is still far from perfect. Once in a while I switch to Sublime just because of Webstorm’s performance issue. That’s not good.

When you are using a lot of Node dependencies in your project, WebStorm tend to get a bit very slow. We can’t actually blame WebStorm for it, it is NPM’s fault. Of course we can change WebStorm’s settings and disable indexing of the /node_modules folder, but to me that’s crazy. We want indexing and autocompletion on those files!

So, what seems to be the problem?

Let’s say we have already installed jQuery. Our Node modules folder looks like this:

/jquery
  

Fine. Next we decide you also need Bootstrap. One of Bootstrap’s dependencies is jQuery. After installing Bootstrap our modules folder looks something like this:

/jquery
  /bootstrap/...
  /bootstrap/node_modules/jquery
  
Wtf? Double dependencies?

Yeah. And this is a problem. Installing Bootstrap only gives us only one doubled dependency, but what if we use 10 modules that all use jQuery? Exactly. This sucks. Of course, the tools that handle our build process will make sure we do not load jQuery 10 times, but during development things will slow down.

NPM 3 to the rescue

The beta of npm 3 has been released, and I’m running it right now. Let’s reproduce our prevous example and install jQuery:

npm install jquery
  

Bam. Our folder node_modules folder looks like this:

/jquery
  

Now let’s install Bootstrap using npm install bootstrap. Now our node_modules folder looks like this:

/jquery
  /bootstrap/...
  

Wow! In node_modules/bootstrap there is no longer a reference to jQuery because we already one of our previously installed components already needed it or we’ve already installed it manually. And it’s obvious that WebStorm only needs to index jQuery once, which will increase its performancy incredibility. Yeah!

Try it!

If you want to try it, use npm install -g npm@3.0-latest but be careful: not only is it a beta, but you can also break your npm installation if the global install fails.

Leave a Reply