What minimum node modules do I require for simple project? Can I remove most of them manually or should I do
npm install [some minimum requirements]
I mean, common, I have a simple site of 5-10 pages and one of them is making http requests to services, I really don't need node modules folder of 90 MB in my small project.
Your ng build will be a lot smaller for what you actually need to place on your server, only a few MB for a small website.
By default npm install will install only your package.json dependencies (and their sub-dependencies), and Angular CLI is fairly minimalist as far as included packages (assuming you're using it, which is highly recommended). Also, you can remove testing similar to this answer: Completely removing tests from angular4, but not much else. The other piece is that you can also remove animations, even some of the other non-core items but unless your really tied for space I'd recommend leaving those packages alone.
OK, so whoever has simple Angular 2/4 project, and for some reason doesn't want to include all node modules in deployment package, I found these to be must-have node modules; my site works fine with just those:
-.bin
-#angular
-core-js
-reflect-metadata
-rx
-rxjs
-systemjs
-zone.js
In index file I have these references:
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
(Why I got the downvote just for saving disc space for people who can't afford much hosting, or who don't want to copy endless tiny files over the network... is beyond me)
Related
I have a monorepo project, containing 10 packages let's say.
Each and every one of these packages has a Dockerfile, with a seprate npm install command. Each npm install command takes about 10 minutes on their own. Building all images takes 10 x 10 minutes, which is unacceptable.
What I came up with so far: Creating a Dockerfile where I copy the whole monorepo at the same time, do an npm install there, which takes only ~15 mins, since there's a lot of common depenendencies. From there I can just use this as the base image for all the other images. The only problem is, that this base image is 5 gigs, which is huge, because it ecapsulates the node_modules folder, which now contains ALL the dependencies from every project.
Copying only necessary folders from node_modules ? Is there a command in npm, that lists all the depdendencies for a package.json file (with all the peer dependendencies etc) so I can filter what I copy from the base image's node_modules folder to the final image (thus reducing size while not downloading common dependencies multiple times)? Maybe an already established tool that can do just that?
Boundling node_modules ?: Another idea I had is to bundle the app, which would only include in the finaly bundle the code the package actaully uses, so using multi-stage builds, the final image could be very small. This is what I'm already using with the frontend of the applicaiton (with Vite or CRA previously) but I have not managed to get it working for node.js. Presumably because pg-native might have some binaries, which can not be bundled. Nevertheless, it would be the BEST solution to bundle everything into a 5mb js file, and install only problematic dependencies afterwards like pg-native. I have not found any tutorial, description about this whatsoever, so I'm not terribly confident this can even be achieved, and I've got no clue ...why?
Ridiculously uneffective answers I've found so far include:
reducing dependencies - its not possible, checked 3 times with depcheck
installing only the prod dependencies - only saves a few mb-s nothing significant
using multi stage builds - it's a good solution to start a fresh image, if you have build artifacts in the "builder" image, but in my case, it does not reduce the node_moduels size, only in the frontend image, because there the node_modules are bundle to a js file, and not necessary during runtime.
using node:x-alpine image - using it already, it saves 500mb, but that's also insignificant compared to the 3-4gigs of node_modules I have to copy around everywhere.
Finally, a little explanation why this is important for me: I'm using Builx with a docker-container driver, which is necessary to take advantage of caching via gha or local caching types set via the --cache-to option. The docker-container driver has a very slow phase, called sending tarball, and it's directly related to image size. Downloading-uploading the cache from GHA-s cache storage is also very much effected by the cache size. So on paper, if we take ~600mb images, instead of ~4000mb images, the whole process could be speed up via 6-7x. That's a huge improvement, not even mentioning how cost effective that would be, since in the cloud everything is billed my seconds of computing power / storage used.
Cheers
So, I'm heading to new territory in web dev.
I set up a basic npm project using npm init in my project folder. I don't have angular, react or any other Dev framework running. Basically I want to get started with some npm packages to easily update the things I need.
For my first test I picked bootstrap and font-awesome.
For testing I have a http-server running and displaying a index.html file from the public folder.
The site I'm displaying is a basic html site for now. How do I actually implementy packages the right way? Using <link rel="stylesheet" href="/path/to/node_modules/..."> is one option but not actually the way it is done, right?
Or will it be repacked once I'm ready for production. Since node_modules is not going to be transferred to the prod server.
Thank you very much in advance!
there is a difference between running javascript in nodejs and the browser javascript engine.
although nodejs is built on top of v8 javascript engine, nodejs is different in some ways, here are 2 of them:
nodejs is used mainly in server-side programming, where javascript is used for client-side
nodejs has builtin libraries which are not in the javascript specifications
if you are developing a client-side in nodejs (using react, angular or any other client-side frameworks), you will have to "convert" (a process called transpiling) it to run within the browser.
there are several tools which can help you in the process of transpiling your code. some famous ones are webpack and parcel in conjunction with babel (to pollyfill) to "build" your project and yield a bundled (few javascript file, usually one, that bundles all the javascript code into one of more files) javascript file(s), which are loaded by the webpage.
as you can see, once the project is bundled, node_modules directory has no use -- exactly what you want.
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:
Please... I hope somebody can help me...
best regards
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
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.
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
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.
I use npm as a package manager for my web frontend projects. I have a need to generate some fake data locally within JavaScript in a project. Faker.js seems to be the perfect library to do so.
Most libraries, when I install them with npm, either have usable js files at the root of the installed files or provide a dist or similar folder with the .js files that I can reference, e.g. <script src="node_modules/angular/angular.min.js"></script> Faker.js however does not include this.
The documentation for faker simply includes this line: <script src = "faker.js" type = "text/javascript"></script> Clearly this will not work since the package doesn't even install a file called faker.js anywhere. My assumption is that you're expected to either use it with Node.js (non web frontend) projects or you're expected to build it somehow to get the faker.js file.
One tutorial I found online says you can npm install faker and then use <script src="node_modules/faker/build/build/faker.js">. But I also do not have a build folder. The tutorial didn't give any instructions on building the faker.js file.
Can someone shed some light on how this works? I have actually seen at least one other package (jQuery) that is similar and does not include a compiled usable browser version in the distribution. In past projects I've simply downloaded a compiled .js file and included it in my source control, but I'd like to try to avoid that if at all possible!
(Please don't answer with "just use a CDN" - I am working in an environment with specific policy requirements that HTML on the production server may not directly reference any off-site assets or scripts, but it is OK to pull in those libraries and self-host them. Frustrating, yes, but I don't get to make the rules.)
I would like to start working with the Angular2 Beta, but I am facing a few problems regarding the required libraries.
I am using Eclipse and it's TypeScript Plugin.
Also, I am using SystemJSas module loader.
My problem is that if I install Angular2 using npm install angular2 it loads the whole Angular-Project, including the CommonJS-Version, ES6-Version and the TypeScript-Version. This results in a over 30 MB big folder with almost 2000 files, though I only need the TypeScript-Version (still a few 100 files), without examples.
Also, importing the /ts-folder in Eclipse gives me errors, that the modules from "rxjs" do not exist ("rxjs/Subject"...). So i guess i have to download that project too.
Using the package.json used in the 5 Min Quickstart, npm install downloads over 80MB (almost 10000 files), and I am sure, I don't need all those files.
So i would like to know, which files are really needed by Angular2 and how can i download them?
Should i create my own package.json-File? Or is there a even simpler way?
EDIT:
Taking a look at our (working) Angular 1.X Project, i can see a single angular.js file, as well as files for the different modules (like restangular.js, angular-route.js etc.), in total about 10 files.
What i am now looking for is an angular2 counterpart of those files.
Do those counterparts exist? Where can i find them?
"What i am now looking for is an angular2 counterpart of those files":
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
You need those 4 .js (not .ts) files.
"Where can i find them?"
They got downloaded with npm. You can keep those 4 and delete everything else. You can also get them from a CDN, or download them manually.
<!-- 1. Load libraries -->
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
HOWEVER. These are already compiled javascript files, and they'll work for you if you write your app using JS, but right now 90% of the scarse documentation you will find about Angular 2 is on typescript and in order to work with typescript you'll need the source files of Angular 2 which is the whole package you are getting.
My suggestion if you are doing it in typescript: Don't worry about all those files getting downloaded, they are meant for development, not neccesarily part of your build. You can only include the ones I told you in your build and that will keep you real app small. Also you are not suppose to add all those files into the git repo or w/e repo you are using, the idea is that you have git ignore the whole "node_modules" folder and you only commit the package.json file, which will work for other developers so they run npm install and they get all the dependencies themselves. So all those files are only meant to be in dev machines, you don't have to worry about them making you app too big cause they won't be part of your app.
The package.json file in Angular 2 Quickstart guides contains development dependencies like concurrently,lite-server, typescript etc along with es6-shim etc for older browser compatibility.
Basic dependencies for angular 2 are
angular2
typescript
systemjs
rxjs
You can look into this Angular2 Tutorial Plunker to start a simple application. It also contains routing library.