Why you should use NPM packages instead of atmosphere packages?

1

I wanted to share something I’ve learnt recently while trying to optimize my meteor application. I may be wrong about certain things and if I am, I would appreciate being corrected so I can learn as well.

My big concern was that in order to render my simple landing page for my app, the browser has to load roughly 1.6mb worth of content (excluding) which is unreasonable for a near static landing page. I started to realise that a lot of my packages are being loaded globally, even if you are using imports, packages such as “rubaxa:sortable” don’t seem to support it and instead load everywhere. That particular package allows you to create a sortable UI and weighs 20kb, I am also only using it on one single page out of my entire app, so why should it be loaded everywhere? From what I understand, even if it does support imports, it would still load everywhere in order to be backwards compatible? Is that correct?

Regardless, I switched to using the identical NPM package, sortablejs and just simply import it into the single view of my app that uses it. I ran some tests to see how this affected the overall load size and number of requests for the app.

These tests may not be 100% accurate, but just provide an indicator.

Before I removed the package, my app was making 135 requests on the landing page, after removing it and using the NPM version only on the required page, my app only needed to make 132 requests. I emptied my cache and reloaded several times and wrote down all the scores each time.

Now I’m not sure if all meteor is doing is just importing the NPM code into the overall app file meaning the overall size of the app will still be the same or meteor is only loading the sortable code on the view requiring it. If someone can confirm what it does that would be good. Sadly I couldn’t see cause chrome dev tools, wasn’t allowing me to see the kb size difference only the mb difference so I couldn’t tell.

That said the number of request is definitely lower and that is certainly good.

If someone can confirm that NPM does indeed have this advantage over atmopshere packages, I’d appreciate it.

Thanks

2

You will not be making large numbers of requests in production. The meteor build command (or meteor deploy if you’re using Galaxy) generates single, concatenated .js, .html and .css files.

3

You are completely right, I looked at my production server and everything was significantly compressed, doesn’t seem to be a huge issue.

Regarding what I said earlier, it seems client side NPM modules are also loaded into the single app file.

1 Like