I am investigating the development setup for our next developments.
Requirements
Java, WAR
Javascript, Angular2
JSP, Html, CSS
When doing this with eclipse-neon and nodeeclipse a simple Angular2 "Hello World" will take up giant
100 MBytes, in words hundred megabytes
nearly all is located in "node_modules".
Generating a WAR results in about 30 MBytes after waiting a long time.
Is there a way to reduce this giant footprint to a reasonable size?
As proposed I investigated both ways using webpack with simple "Hello World" apps
First I tried
http://angular.io/docs/ts/latest/guide/webpack.html
. After removing .map-files the total size was 1.1MB. The (packed) WAR comes with 250KB
Second I tried angular-cli. angular-cli creates a set of config-files and a simple "Hello World". After remove .map-files the total size was 3.2MB. the WAR comes with 490KB.
Regarding the size both approaches looks valid. However, we will continue with the first approach since it used explicit config file for webpack. We need to tweak webpack in order to use and support JSP. It is not obvious how this could be done with angular-cli.
If you do not need to tweak the webpack config, you may prefer angular-cli
In fact this is an experience you make when starting with angular 2 and node. The solution to this is using a package builder like "webpack". I'd recommend to create a starter project with "angular-cli"
https://github.com/angular/angular-cli
and start from there to add your project-specific components, libraries, ...
This makes it possible to jump right into development and testing this feature very quickly. Investigating the mighty and complexity behind that is recommended, but can be done step by step.
The command-line commands for this generated project - you can see them defined in the generated "package.json" - provide all you need to develop and run the code
and also
e.g. npm run build:prod
...
preparing the code for deployment, including reducing and packing the code to an absolute minimum size (in my case from ~ 120MB to 2.7MB)
Related
I'm packaging an application I have written into an AppImage so that it can be delivered to Linux users.
One of the key features of the GUI toolkit I'm using is that it is small and lightweight, allowing me to compile a build which is statically linked to the GUI library of around 6Mb.
However, after building the AppImage - where I do what the instructions say - use all the functionality (which basically includes only using file browser dialogues to load files) - it generates an absolutely enormous AppImage of around 200Mb!
I know that AppImages are supposed to be a "little bit" big, but this is completely mad as a proposed solution for portability when the natively compiled binary including a statically linked GUI toolkit is only 6Mb.
However, I'm not convinced at all that I need all of that 200Mb. A very similar piece of software to mine, but that additionally uses Qt (which is pretty bloated in comparison) is only about 30Mb. I actually suspect that appimage-builder is doing something very wrong - I think it is listing the files in the directory I explore when using the file browser dialogue as dependencies (they are big files). I have no real other explanation. But if so how do I stop it doing that?
Why is mine so big? What can I do about it?
For the record I am using this method for building my AppImage
Building my binary separately
Running appimage-builder --generate and completing the form
Running appimage-builder --recipe AppImageBuilder.yml --skip-tests
Edit: Removing the obviously not needed files that were being packaged have reduced the size of the appimage to just 140Mb, but this is still almost 5 times bigger than equivalent appimages I've seen. Are there some tricks/options I'm not aware of?
In few recent days got started with AppImage and faced the same problem.
Shortly: check dependencies of your app by any possible ways and configure recipe to include only concrete dependencies and avoid includings of any theme/icon/etc packages which are not realy used :)
My case is a small app, written in Dart (with Flutter). The built project itself weights about 22MB (du -sh . in output directory). My host os is Linux Mint (Cinnamon).
First time I run appimage-builder --generate it generated me the "recipe" with 17 packages to be installed and bunch of libraries to be copied from /lib/x86_64-linux-gnu/. When I generated AppImage from this recipe, result was about 105MB, which are extremely large in my opinion for small app.
My first experiments was to cleanup included files section, as I guess "all necessary" libraries should be installed from apt. I referred to a few configs from network where were marked only few libraries for include and was exclude section, which contains some DE related files (themes, fonts, icons and etc.)
Using that I got result about 50MB (which are still large enough).
Next experiments were referred to from this issue - https://github.com/AppImageCrafters/appimage-builder/issues/130#issuecomment-843288012
Shortly - after generating an AppImage file, there appeared file .bundle.yml file inside AppDir folder, which contains deployed libraries. Advice is to try exclude something from that. May be it's a good enough advice, but it takes too long time to check for each package/library if it breaks resulted AppImage file at least with official tests of appimage-builder (docker containers). I faced more broken results than any sane size reduction.
My next experiment was to reduce dependencies which should be installed from package manager and use files from host system. I deleted AppDir and appimage-builder-cache folders and regenerated the recipe. At next step I commented all packages which should be installed from package manager and leaved only included files. Result was fail, because of needing one package, but after adding it I got AppImage result in 36MB. That sounds much better than starting 105MB or even previous result of 50MB.
Here I got small "boost" - Flutter project built into AOT binaries, without runtime. So I checked output of ldd for my app, and then mapped list of required libraries to list of library files which were detected by appimage-builder. Finally some of them was correct, some not found in ldd output and some was in ldd output, but were not detected by appimage-builder. I added all undetected, removed all unused. My final result is 26MB and it passed all appimage-builder tests (running in docker images of fedora, cent, debian, ubuntu and arch)
I understand that it's bad enough for continuous building, because it will require to always check for used libraries and adapt config if something changed, but for rare enough builds I guess it's has some kind of balance between good and bad.
In an effort to debug a production Angular issue, I'm trying to generate a source map for the project. As suggested on a number of SO articles I'm doing as below:
export NODE_OPTIONS=--max-old-space-size=2048
ng build --prod --sourcemaps
The choice of 2G RAM in the first line above is based on the fact I'm running this under VirtualBox on a laptop that I need to run other stuff on. It seems it's decided to steal a few gig of swap over and above that anyway, the HDD activity light has barely been off since the build started ...
The ng build process has been running for about 14 hours now, with practically that entire time having been stuck on this line:
69% building modules 1392/1397 modules 5 active ...b/node_modules/chartjs-color/index.js
This isn't a remarkably big project, how on earth is it taking this long?
I'll add that I don't really know Angular, just looking at this while the maintainer is on leave, so please don't assume I haven't missed anything obvious.
Literally all I want is the source map, not interested in anything else being built. Is there anything I can skip?
Edit:
I followed the one upvoted comment and tried restarting the build - same problem over and over.
Tried checking out to a fresh project and reinstalling node modules locally, as another dev suggested the fact I was checking out production atop of dev branch might be an issue - same.
Tried doubling RAM - same.
What appears to have fixed it is the addition of option --no-aot. But I don't know if that means it's a none-identical build, at least in terms of source map? Will find out I guess ...
I am using a rather large and performance-intensive nodejs program to generate hinting data for CJK fonts (sfdhanautohint), and for some better dependency tracking I had to end up calling the nodejs program tens of thousands of times from a makefile like this.
This immediately brought me to the concern that doing such is actually putting a lot of overhead in starting and pre-heating the JIT engine, so I decided to find something like ngen.exe for nodejs. It appears that V8 already has some support for code caching, but is there anything I can do to use it in NodeJS?
Searching for kProduceCodeCache in NodeJS's GitHub repo doesn't return any non-bundled-v8 results. Perhaps it's time for a feature request…
Yes, this happens automatically. Node 5.7.0+ automatically pre-caches (pre-heats the JIT engine for your source) the first time you run your code (since PR #4845 / January 2016 here: https://github.com/nodejs/node/pull/4845).
It's important to note you can even pre-heat the pre-heat (before your code is ever even run on a machine, you can pre-cache your code and tell Node to load it).
Andres Suarez, a Facebook developer who works on Yarn, Atom and Babel created v8-compile-cache, which is a tiny little module that will JIT your code and require()s, and save your Node cache into your $TMP folder, and then use it if it's found. Check out the source for how it's done to suit other needs.
You can, if you'd like, have a little check that runs on start, and if the machine architecture is in your set of cache files, just load the cached files instead of letting Node JIT everything. This can cut your load time in half or more for a real-world large project with tons of requires, and it can do it on the very first run
Good for speeding up containers and getting them under that 500ms "microservice" boot time.
It's important to note:
Caches are binaries; they contain machine-executable code. They aren't your original JS code.
Node cache binaries are different for each target CPU you intend to run on (IA-32, IA-64, ARM etc). If you want to pre-cache pre-caches for your users, you must make cache targets for each target architecture you want to support.
Enjoy a ridiculous speed boost :)
I have a complicated workflow of TS compilation and I want to make my watchers faster (and still smarts). I currently have 3 different TS compilation that are executed when Grunt starts but also on watch changes.
grunt-ts configuration:
https://gist.github.com/Vadorequest/f1fb95ab4bbc786f420b
grunt-watch configuration:
https://gist.github.com/Vadorequest/eaa82c292a5d3e1ee51f
It currently works. But it takes too much time to recompile every file each time a change is made in any TS file that belong to a set of files. I'm looking for a way to compile only what needs to be compiled, in a smart way. (Meaning that if A.ts inherits of B.ts, if B is changed then A should be recompiled too, it should be possible since WebStorm IDE is able to do that using its Files Watchers)
I read something about fast-compile on https://github.com/TypeStrong/grunt-ts#fast but it doesn't seem like I could use it, but I'm confused about it. (see https://github.com/TypeStrong/grunt-ts/issues/293)
I'm looking for a solution, and also for advices because I think my setup can be improved. It's great to have server side TS files and even shared TS files across the server and the client, but it adds a lot of compilation workflow which is hard to understand and to maintain. Maybe using the recent feature tsconfig.json would help? Any advice would be appreciated.
More details:
serverCommonJs: The server uses TS files that are compiled before to start the application, like controllers and models for instance.
clientCommonJs: Most of the client scripts are in CommonJs rather than in AMD because they're all concatened and minified and it's way easier to work with commonJS than AMD which requires a tons of setup.
amd: Some files are compiled in AMD, whether they're used in the server or the client, or both.
On my computer it takes about 1.5s to 2.5s to compile one set of file. Once compiled they're all copied into a temporary folder which is served to the browser (assets). So it takes easily 5 up to 10 seconds and it could be much much faster if only the changed files were compiled and copied.
I also have a similar issue with LESS files, but that's another story and it should be much simpler to fix since I only have one set of LESS files.
I'm migrating my tumblr blog to docpad and have started with this boilerplate: https://github.com/ervwalter/ewalnet-docpad
Now my problem is that "docpad run" takes 58s to run, and a livereload run takes 23s. I wrote the author of this boilerplate and he says he is having the same, but it doesn't bother him too much.
But I don't want to wait half a minute for every change in a blog post to see how it looks like, so I'm trying to make it faster. I tried profiling with nodetime but I don't see a drilldown per method or so. My assumption is that the time is lost in the partials, at it sends the whole posts to the partials
How can I profile Docpad so I see where the time is lost? I know the question is very broad, but all I found on performance optimizing on DocPad is that you should make Docpad not to parse static files.
Update the missing link was that I needed to start the CPU profiler on nodetime:
configure nodetime, described here
start CPU profiler on nodetime
start docpad: docpad --profile run
Unfortunately in my case the output is not much helping. The results of my run reveal that 81% of the time is spent in ambi.js, which seems is just a intermediate layer which calls functions. I could not find out which functions are called, adding console.log(fireMethod.toString()) I only see
function () { [native code] }
so I'm not really further. How can I find out where the time is actually spent?
For reference: here is my v8.log
Also, I'm a bit worried, that docpad almost only relies on modules written by Benjamin Lupton. Why is that so?
After an odyssey of about 1 week I came to the conclusion that Docpad is not made for speed, it is made to handle complex sites. Some facts:
even a fresh docpad installation with only twitter bootstrap takes 12s to build
there are no means to only regenerate the files which source files have changed (dependency tree), it always regenerates everything
reading threads like this show that speed is not in focus
My use case is writing articles for a blog and I have a lot of "change text and see how it looks" loops. I have switched to Hexo which is a lot faster:
hexo server starts in 2.5 seconds. With livereload on, when I change a blog post, the broswer tab reloads the page and shows the new content in about 1s
generating all files afresh with hexo clean and hexo generate takes only 5s.
This is the same setup (with less, coffeescript, etc.) I had for DocPad where DocPad needed 38s to run.
Additionally to speed hexo gave me
themes: hexo nicely separates between the theme and the content (DocPad mingles the two). Currently there are about 30 hexo themes to choose from
implementation of read more: in hexo <! --more --> is supported out of the box
deployment to github pages is out of the box
architecture was a lot easier for me to understand, writing widgets is a bliss, the documentation also looks nicer
Overall, it looks like hexo is suited better for blogs, whereas docpad is better suited for more complex sites. Hexo looks like it's really taking off, getting about 30 stars on github per week, whereas docpad is only getting about 10 stars per week.
you can use meta
standalone: true
while you work on a file. This meta will regenerate only this file if update it. Remove the meta after you finish.