Large angular app: requirejs or standalone angular apps? - javascript

Our angularjs app becomes bigger and bigger. Lots of modules and up to 10MB js libraries loaded when the app starts.
What the best practice to resolve this? Requirejs or separate it to several standalone angular apps?

Requirejs will help you organize, but 10 megs of static javascript do not sound like an organization problem only.
If breaking down into separate apps makes sense for you (i.e. various distinct functionalities housed under the same roof), it could also help you shrink down on javascript statics the client has to load (assuming one part of the site does not request js files it doesn't need) by only including the required js files.
With requirejs however you will enjoy a more structured development time, and you could opt to use the files unpackaged or optimized (r.js optimizer)- but lazy loading (http requiring) unpackaged modules could hurt perceived website performance more than the all-in-one-min.js
If you can put in the time for optimizing require builds, you could try dehydration or split packaging to help speed up your app(s)

Related

Angular Application's first page very slowly to load

I'am hosting my .Net Core / Angular application.
When I visit the url of my application the first page makes more than 90 seconds to load. I found that these files are very Big (15MB): styles. J's, scripts. J's, main. J's, vendor. J's, pollyfills. J's.
So I used this website to minifier the js code https://jscompress.com/
Now my application is faster, but I think that it can be faster.
Do you have any idea please ?click here to see the image
Not sure exactly how you have your application structured, but if possible you could break things up into lazy loaded modules.
I would check into this article, which mentions a variety of possible things to look into when trying to improve load times: https://medium.com/khojchakra/reduce-initial-load-time-of-angular-application-9b9ed4a6bfc9
Also try to serve your application AOT when you go to actually serve it for production if you are not already. This could speed things up quite a bit; but not during local development. the app reload times are quite depressing when making code changes with aot enabled
You can try to build with ng AOT option:
ng build --aot --build-optimizer.
You can find out more here https://angular.io/cli/build
With this your app should load faster
Always use latest versions of angular. Do code splitting. Lazy loading the modules reduces your initial bundle size. Remove unused imports. Try to avoid bloated third party libraries. Proper segregation of functionalities into separate modules.
Advanced: AFter doing all of the above, if you still want to reduce your bundle size. Try Using bazel for build process. https://blog.mgechev.com/2018/11/19/introduction-bazel-typescript-tutorial/
More Advanced: Still you want to reduce your bundle size. Wait for Angular Ivy(public release).

How to share libraries between two webpack-built applications?

I have two JavaScript single-page applications in two separate GIT repositories. I want to keep them separated as much as possible (different teams working on them etc.), but they are still very closely related and even co-exist within the context of the same web page as part of one large SPA. Naturally, these two applications share large amounts of library code and it is very wasteful to bundle each with its own copy of libraries.
Is there any way I can reuse the library code? What would be a possible approach?
What I am describing seems to be achievable using the DLL plugin. Basically, I create a vendor.js file, which requires all of the dependencies. Then, from that file generate a bundle of all the libraries and a manifest.json file. Then, using DllReferencePlugin it should be possible to tell webpack in each of my apps to take the dependency from the vendor bundle. Both apps can be built independently. As a last step, simply load of the three bundles on the page.

Using angular's templateCache in case of large apps

I am working on optimizing a pretty large angularjs application with 100+ templates. I use grunt for automation. What i am trying to achieve here is that i need to prefix all the urls in my production code with a cdnUrl as I plan to host static assets on cdn.
I tried using this grunt plugin to do that and i was successfully to replace all references in my code except the templateUrls in <ng-include> tags and those in UI routers state configuration.
Hence i thought of solving that issue by precompiling all my angular js templates into a single js file using $templateCache service using this plugin. After checking out the size of the precompiled js file i found out it was a whopping 1.13 MB even with html minified.
Comparing that to my overall app it takes just 1.5 ~ 1.7 mb for my entire app during first load. So i don't find it legible to include this precompiled template which forces lot of extra weight to be downloaded on the user's device. Also there are some views which are partially restricted to some users and generally speaking i feel its unfair to load data for those sections of the app which many users won't be anyway visiting.
So what do you guys recommend in such cases ? Is it still preferable to use $templateCache in production? if not any help regarding prefixing angular templates with cdn url using grunt will be helpful.

How to avoid a bloated index.html in AngularJS?

I've started learning Angular last week and going through lots of tutorials and best practices. One of the tips that I often encountered was to separate each controller, filter and service into its own file.
The idea is great and there are lots of resources on how to do this, but nobody ever talks about the index.html. My problem is that every single one of those individual files will now have to be loaded through a separate <script> tag inside the index.html, which makes the file seem bloated. So I was wondering:
Will loading everything on app start affect the performance on a bigger Angular app with lots of controllers and 3rd party libraries?
Is using RequireJS necessary on bigger apps or will I just complicate things without getting the benefit of faster loading times? Or does Angular have a way of truly modularizing an app and have it load controllers / filters / services / 3rd party libs on demand?
So is this the way to go if I want to modularize my app? Should I just leave things as is and not worry about the performance?
You can have dozens of files, all separated into controllers, directives, services and more, then simply use grunt or gulp to concatenate (and hopefully minify) them to one single file which you include. Take a look at Grunt-contrib-concat as an example grunt task.

Minimize JS at runtime or generate static?

My question could be perceived opinion based, but I am more needing for advantages and incovenients of both way to minimize JS script in a django app.
Is it better to minimize JS scripts at rendering time with python library such SlimIt or Django-pipeline to minimize all app's scripts and save them in files?
What strategy django experts are using? Is there some cases where one or other strategy is more adapted?
Other question: Can JS scripts with template tags be minimized correctly?
In my experience it doesn't matter all that much. This is down to the fact that both methods behave in a very similar way, as minification at runtime caches the results. Either in the file system in your static directory or in a cache such as memcached.
One downside to doing this at runtime though is that the first request will be slower, as the file or cache hasn't been populated yet. And the downside to generating everything manually is exactly that, you have to generate everything manually when you make changes.
My workflow involves having all static files generated at runtime during development and having them all minified and saved during production. Django pipeline does a lot of this out of the box.

Categories