otuv

otuv

Nodebloat on mix phx.new - can I drop irrelevant packages?

Hi,

Just had a rather unwanted experience.

I saw that my newly created (mix phx.new) project had a rather large assets/node_modules folder.

At a closer look it turns out it contains 7404 out of the entire projects total of 8827 items at roughly 2/3 of the total 31 MB.

I just created it and have everything from phoenix_html (which seems perfectly legit) to such as coffescript and snapdragon_util.
Do I have some crazy node settings (not a huge node champion) or is this normal.
If normal, is there a way I can drop all irrelevant packages?

Marked As Solved

peerreynders

peerreynders

It’s normal.

If normal, is there a way I can drop all irrelevant packages?

By definition if its there, its relevant to something you installed.

  • Basically ignore any bloat that is a result of the tooling (brunch/webpack, plugins/loaders) that you use to create your frontend JavaScript bundle.
  • But be extremely vigilant about any dependencies that you include inside your bundle (i.e. the JS libraries that you use inside the browser).

Even with tree shaking it can be extremely difficult to remove bloat. For example RxJS 6 dropped direct support of Observable object methods in favour of independent operator functions partially to aid tree shaking in creating smaller bundle sizes.

I see it as the extreme counter to the Not Invented Here syndrome. So extreme that libraries are included as dependencies for a product even if only an infinitesimal fraction of a library’s functionality is used - potentially leading to a lot of recursive bloat.

Some functionalities belong inside a properly curated and structured standard library while others should never get beyond the stage of a demonstration repository that people can simply learn (idioms) from - rather than becoming standalone installable packages.

Also Liked

chrismccord

chrismccord

Creator of Phoenix

can confirm.

There’s nothing for us to do about it on our end, this is an unfortunate reality of the front-end build ecosystem. While phoenix.js uses webpack to produce the es6/commonjs module, we have zero runtime dependency on the compiled phoenix.js. The out-of-the-box experience that mix phx.new gives you uses babel for ES6/2015/whatever compilation, (thru brunch <= 1.3, and now webpack in 1.4+), but it includes no other deps other than the js compiler, and css concat packages. The rest are just the rabbit hole of deps of wepback, babel, et al.

hilko

hilko

Welcome to to the insanity of front-end development!

I’ve never bothered to look into this before, but I assumed the main culprits would be brunch and babel. From a cursory glance it seems like the ‘phoenix’ dependency depends on these too though, so I suppose it’s all just one big mess (perhaps Chris McCord can correct me about this?).

There’s a bunch I could say about how I try to keep things simpler, but the truth is that I find this really difficult to do in practice. Any particular package is likely to use a ton of others, and this insane dependency graph just grows from there. Something like Webpack or Babel is pretty essential to most of what I do, for example, but both of these, or at least Webpack, pull in tons of other dependencies.

All that said, I would very much prefer if ‘phoenix’ and ‘phoenix_html’ avoid this, so I can try and figure out how to make the rest of my front-end stuff not end up with this insane number of dependencies.

Where Next?

Popular in Questions Top

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New

Other popular topics Top

aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New

We're in Beta

About us Mission Statement