Using angular's templateCache in case of large apps - javascript

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.

Related

Angular - I'm referencing all JS files in index.html - is this ok?

I've started building my first AngularJS app.
I've been following a tutorial where it demonstrated on one controller adding everything in.
Now however I want to build on that so would like to seperate my controllers and services.
I easily seperated the services and controllers into seperate JS files and also realised that in my index.html i need to reference those JS files.
Is this the 'best practice' way? I'm feeling uneasy about listing so many js files in my index.html, feels untidy?
Any advice would be appreciated.
Thanks.
Your concern is valid. On one hand, having everything in separate files is a lot more maintainable. On the other, loading 100s of files slows the page down (for example, Chrome only loads... five (?) files at once, and if you have more than that, the page will slow down while it loads the rest).
I would look into software such as Gulp.js or Grunt, which you could use to concatenate all your files into one large build file, which can then be minified through the same software.
Have you looked at lazy loading angular modules and controllers using ocLazyload? and it works well with ui-router. You can find more details about ocLazyload at https://oclazyload.readme.io/docs

Large angular app: requirejs or standalone angular apps?

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)

Bundles and Virtual Paths

I am setting up a new site using angular, mvc and web api. The static content (js, css, images, etc) will be in Site A, the MVC site will be in Site B and the api will be in Site C. These are all separate sites, not virtual directories. I'm trying to use bundling in the MVC site to bundle the js and css files from the static site for use in the MVC site.
I've set up a Virtual Path Provider but when I load the site angular doesn't work and also doesn't throw any errors. I'm assuming that the angular.js file is not being loaded from the bundle because if I include a local javascript file angular works.
Is what I want to do possible? If so, how?
Virtual Path Providers only apply to views, not things like CSS and JS. Unfortunately, there's not really a good way to handle this scenario. The bundler can only act on files within the same project, not those in a separate project. If you want a separate site to handle your static assets, then you pretty much just have to resort to referencing them directly. You can use the Web.config's app settings section to set the base URL for your static site (that way you have just one place to go if you need to change it later and you can do things like run transforms on it to have a different value in production). This also means you're somewhat on your own for bundling and minification. However, you can make your static site an MVC site as well just to get the bundling infrastructure and then use that site to handle bundling. All your bundles should be at the standard location of /Content/[style bundle name].css or /bundles/[script bundle name].js. There's a cache busting string added to the path, but you can somewhat handle that manually.

Performance:-How to reduce precompiled js file size in angularjs and rails

I am working on a website which is based on angularjs and rails in the backend.
The site is currently in production/live
The issue which I am having is that after the assets have been precompiled with the help of rake assets:precompile,The overall js file size goes above 1Mb.Hence it takes time for the site to load.
This is a major issue and since the site is fully ajax based,I cannot implement page caching.
Also have tried gzip on my nginx server but this is not helping.
This is hampering the performance of the site and would welcome any sort of help or suggestions if possible.
Thanks
I don't know about RoR or the rake assets you mentioned but here is a few leads and how I proceed (Lately, I've been starting to use Grunt) :
Concat your js files into 1 js file. It's easier to process one request rather than many little ones.
Minify your js files and make sure to use minified lib version.
Try to adopt a smart approach to load your libraries and your own files. For instance, if you only need graphics in your admin dashboard, make sure not to load d3.js on your front page. I know the Jquery ecosystem is full of useful plugins but I've seen way too many developers taking shortcuts and claiming they need Jquery when others viable alternatives exist.
Serving file using gzip is a good idea. This should reduces the size of your files significantly.
Also, Could you provide a link to your website ?

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