I was taking a look in this nice Angular best practices repository and I can't find a proper way to apply this pattern of modularization.
The author suggest importing all the other modules in the main app module, that seems to be a great idea for me, but in my perception it also means loading all the js files of the system when loading the page for the first time "into" the main module.
I'm looking this wrong? I'm I right? If I'm right, is there a workaround to avoid loaind all the js files? Should I be worried with the loading time of the js files?
Angular application is SPA, the page is loaded only once, all relevant JS files should be loaded at the time when the app is bootstrapped.
Angular doesn't officially support lazy loading to load additional module files on demand, doing this by patching the framework may cause more troubles than it may solve.
Bundling all modules with bundling systems (Webpack, Browserify, etc) into a single JS improves loading time and results in better performance than loading JS files selectively.
Related
I have a question regarding loading External JS files in Angular JS in terms of performance:
I have a small module which uses tinymce editor.
I have installed it via bower ('angular-ui-tinymce') and it works fine.
Since I'm using this library rarely, and it is being loaded on app start every time - is it better (in terms of performance) to load it in index.html async / defer like this? (to avoid being a blocking script?)
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tinymce/0.0.19/tinymce.min.js" defer></script>
Is it possible to load external js files only when the user enters a specific module?
Thanks.
When you say "performance" in this case, you mean your bundling size I assume?
What you have to consider is if this is going to come up again down the road.
A handful of dependencies are best served when bundled together instead of several individual requests.
Even though it is not this case, if by any chance you were including dependencies that had to be configured during bootstrap they could not be asynchronously loaded.
So IMHO you want the best of both, you can always bundle and place your app on a CDN, free performance right there.
**I am developing a site ,in which front-end is made with Angularjs **
Site name is http://limokit.com/limolog but the problem is that , it take minimum 30 seconds to open the site page on browser. How to reduce this loading time?
we used ngRoute to change the states , but do not getting the result which we wanted to achieve . We also converted all html and js as minified one but it is also not effecting the loading issue for first time.
At first glance it looks like you're loading individual js and css file separately. This can slow down the loading of the page greatly especially on slower connections. The common optimization to do here is to group all js files and css files together and serve one single js and one single css file on production. I don't know what you're using to serve the JS/CSS files but I use compressor for Django.
Also, to further debug this problem, it helps if you look at the network requests that your page is doing on page load in the Chrome inspector. You can glean a lot of information by seeing where your bottlenecks are on page load.
In your site you're having 63 requests and around 3MB size (uncached).
As mentioned in the other answer package everything in bundles. E.g. vendor.bundle.js, bundle.js and bundle.css and also minify these bundles.
I would use webpack or gulp for bundling.
For debugging you can look in the browser console networking tab at the lower right in Firefox you can see a link to load time statistics and also get a info about caching.
The following screenshot shows statistics to your site (left with cache, right uncached).
.
Ditch all frameworks and libraries such as Angular and Jquery and use JSvanilla. Plain javascript is much faster to run(around 160x according to many resources i read..i also know that from my own experience).
Frameworks makes your site crawl.
I'm trying to manage the bootstrap process of a large AngularJS/Grails application. Here's what I've come up with, but I'm not so sure it's as clean as it could be, or as efficient. Thoughts?
Load angular-loader in a one-line minified /script
Load jquery explicity in another /script
Load a third-party async loader ($script) and all of the remaining dependencies
When the dependencies have loaded, call angular.bootstrap(document, ['myApp]);
Load my minified, concatenated app-specific javascript in another /script
This seems clunky. What alternatives might there be? I did consider RequireJS, but I don't like how intrusive it is, and I like using a grunt task to concat+uglify my app into a single script.
The general approach that I use is to load the basic components upfront and only load the controller and associated services on demand using RequireJS. Obviously, this is only applicable if you are dealing with large application.
As AngularJS does not natively support on-demand loading and delegate such task to async loader such as RequireJS, I encapsulated the logic need in something I call angularAMD.
Here is a sample site I created to illustrate how angularAMD works:
http://marcoslin.github.io/angularAMD/
I am using Angular JS. I wish to put unrelated code (ie, which is not a factory, service, controler, etc) in additional, separate modules, in a similar way one would with AMD or CommonJS.
At the time of writing, a search for 'Angular.JS make new module' using Google does not return any documentation on making Angular.JS modules.
I have a found a post on the Angular.JS Google Group that seems to indicate that instead of loading dependencies dynamically like other module systems, in Angular.JS dependencies must be inserted as additional script tags.
Is there any documentation on making Angular modules (which is not limited to controllers, services, or other angular concepts)?
Is the statement about script tags true? Do I need to manually add script tags for every module I may use?
Looking further into the various Angular boilerplate apps, apps manually load every part of their apps via script tags. Unlike other systems, Angular 'modules' don't take care of actually loading dependencies, they just inject them once already loaded.
I saw in some ExtJs examples that they are only include ext.js in the page and ExtJs resolve all dependencies via XHR request after loading app.js, Lazy load. But I checked the debugger network and I found that ExtJs made ~250 XHR requests to resolve dependencies.
Making ~250 requests for loading an application doesn't seems a good solution. I want to know should I use ext.js (Lazy loading) or ext-all.js (No more requests) for production version?
If there is not any really good reason NEVER lazy load on a
productive system.
There can be some special cases where this makes sense but that should only be done for rarely used classes and not the whole ExtJS lib.
So the answer is that you should either use ext-all.js or let the Sencha CMD Tool build you a app.js which contains only required classes.