CODEWITHSUNDEEP
node.jsangular
angel_neo
angel_neo

Reputation: 331

Project too large

I'm just starting to learn Angular, I installed in my Ubuntu Linux: Angular CLI: 7.1.4. and Node: 10.14.2.

My question is, why one project is too large? I mean a simple "helloworld" is 334MB, I don't know why, Is it possible resize it? or delete any folder that is unnecessary? Or Is there something wrong with my installation? (how can I detect that?)

The bigger folder is node_modules, and when I create my projects, generates a lot of folders.

I was reading about "angular lazy loading", but I'm new.. It is not totally clear for me.

this is the folder spaces:

enter image description here

Please... I hope somebody can help me... best regards

Upvotes: 1

Views: 1709

Answers (4)

angel_neo
angel_neo

Reputation: 331

You can remove node_modules folder when you are not going to use the app. And, when you need work on the application, you can re-generate node_modules using the command: npm install

Upvotes: 0

Phil
Phil

Reputation: 7607

Those are just node-modules, they are needed for building the project, but not necessarily everything inside of them will be deployed to production. As Amadan said, there is a process of tree-shaking (filtering only used modules) and also in production you use the minified version of the same JS code (where for example whitespace is missing and variable-names are shortened), among other optimizations. A production-optimized Angular project should not be more than a 100KB for a hello-world application.

In the provided image I see packages like

  • selenium-webdriver
  • protractor

Those belong to dev-dependencies (see your package.json file) because they are used for testing. When building for production, no code from dev-dependencies should be included. The typescript package (which is nr.2 in size in your screenshot) will also not be present in production because types like string are only used for writing Typescript code, but the browser receives Javascript, which it is compiled to.

Upvotes: -1

Amadan
Amadan

Reputation: 198546

In modern JavaScript, projects require modules that themselves require modules that require modules... resulting in node_modules directory with hundreds of dependencies. A 100Kb library might be included because someone needed one function from it. JavaScript is not compiled, so all that source tends to be rather big. This is an unfortunate, but unavoidable truth; your Angular project directories will be big, and there's nothing you can do about it. It is perfectly normal.

The good part: modern JavaScript deployment typically includes packing up those libraries with Webpack or Parcel or similar code bundlers. Most of them implement "tree shaking", which analyses the code to find only the functions that are potentially utilised starting from the entry point, and only bundle those, ignoring the rest. This means that 100Kb library whose one function is used is transformed into just that one function in the final distribution bundle.

Not all of the bundlers are equally good at it at this point. For example, Webpack cannot tree-shake the CommonJS modules, only ES6 ones.

Upvotes: 1

Ncs
Ncs

Reputation: 314

You might be using big bundles which are not needed, so you can break them up: https://medium.com/@julienetienne/javascript-bundles-are-too-big-break-up-the-libraries-3be87d5ef487

Upvotes: 2

Related Questions