modules loaded by requirejs are loading again on page refresh for e.g. Backbonejs and other js libraries. it should pick those modules from browser cache on page refresh . right ?
is there a way to implement this which will improve the performance to a great extent on page refresh.
Files required par require.js are retrieved using the normal browser's mechanisms (as if you add done a ). In other words, if they can be cached, they'll be cached.
If you are using Chrome and DevTool is open, make sure in the options that you haven't checked "Disable cache (while DevTools is open)"... there are probably similar options in Firefox / IE.
As implied by #Enders, it's not strictly a RequireJS issue. All you can do is make sure your server sends correct response headers which will encourage your clients' browsers to cache the resources. I say "encourage" because there is no way to force clients to cache, in the worst case they could run with "disable all cache".
Approachable information about caching best practices can be found in this Google Developers article
Related
Using a client side routing server side doesn't forge entire page to serve a client, but datas are downloaded from webapp "on demand".
So, in this scenario, if you see html code you could see something like this below:
<body>
<div class="blah">{{content}}</div>
</body>
I know that prerender strategy can be used and i think that probably google crawler is very smarty and can see contents anyway, but the question is:
is it good this approach on seo side?
Using prerender strategy server needs to generate page with content. Could be that a penalty in page speed factor?
Thank you in advance to everyone.
As you've mentioned google is pretty smart and from a recent experience, is able to fetch some of your site's static content even when using client-side rendering. However when it comes to client-side routing it's not quite there yet so if you need to have SEO, server side rendering frameworks like nuxt.js should be your go-to.
but datas are downloaded from webapp "on demand"
The same thing applies when you do asynchronous fetches (download on demand as you've described it), imagine the data inside your {{ content }} was coming from an external API, as far as I'm concerned no crawler at this time is able to deal with this, so your content area would just be empty. So generally speaking, when SEO is an requirement, so is server-side rendering.
Using prerender strategy server needs to generate page with content.
Could be that a penalty in page speed factor?
Yes and no. Load times will certainly go up a little, but when using client-side rendering, the client needs to render the page after loading it, so this time just gets shifted to your server. This applies again to asynchronous data fetching. The delivery of the site will take longer, but the data it has to fetch will already be there, so the client wont have to do it (SSR frameworks allow you to fetch data and render it before sending the site to the client). If you accumulate everything, there shouldn't be a huge difference in time from sending the request to actually seeing the rendered page in your browser.
I am working on angularjs 1.5 and i want to reload css stylesheet without hard refresh because currently it's creating caching so without hard refresh it's not possible to see changes most of changes are dynamic in css file that's why i need to reload is there any way in angularjs ?
If your browser cache is the problem you can try one of the following things:
If you are developing on chrome, you can open dev tools and under the network section, you can disable browser cache. Everytime you reload now will fetch all resources fresh.
You can fingerprint your CSS by appending a hash or a version number to your filename at the build step. Ex: http://example.com/path/to/style-v01.css
You can make the link tag which includes the css to use a randomized query parameter which ensures the cache does not kick in. Ex: http://example.com/path/to/style.css?v=1.0
Ideally, in a production environment, your files are fingerprinted to avoid this problem.
**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've got a fairly simple Angular2 application in the works, and I'm trying to demo it to my boss on our staging server (typical Ubuntu LAMP). Every time I update a template and redeploy, I also have to clear my browser cache -- and so does my boss, and so do my future users! Not good!
I'm using templateUrl to load in my components' templates, and they are always being cached by the browser. I've tried disabling caching in .htaccess but it only seems to set the headers on the initial request and not for any of the XHR.
Is there a way to configure apache to disable caching for XHR? Or just completely disable browser caching no matter what?
Or am I doing something wrong in Angular? Is it a bad idea to run an Angular app on Apache?
Any advice or ideas would be greatly appreciated!
It was Apache doing the caching, but the problem was simply a misunderstanding on my part. I never cleared my cache once I set Apache to stop caching. I assumed it would happen automatically, which is obviously not the way browser caching works.
So I'll have to clear my boss's cache one last time, and from there on out the problem will be solved.
Is there any way with AngularJS to force a page to refresh after it has been changed. What I mean by this is that I have multiple users actively working in the app but a change is required to the controller.js file. At this point the only way I'm aware of is for them to manually push refresh on the browser. Is there any code that I can use to make it "actively" watch that file for changes and reload when necessary without the users having to manually push refresh?
This isn't really an angular problem. You can do polling on the client side with setInterval, hitting the file on the server to trigger a refresh on the client.
If you're looking for something to speed up development, then you're probably looking for hot module loading. The solution depends on what version of angular and build tool you're using (e.g. grunt/webpack/npm).
Check out this article for angular 2, but you can find similar solutions for angular 1:
http://blog.mgechev.com/2015/10/26/angular2-hot-loader-hot-loading-tooling/
But if you just want to force a page refresh from the client side, you would just call: $window.location.reload()