Hanging around this problem from quite a few days..
I have an angular 5 application, I am using some js files which are present in src/assets/js/*.js of my angular app's project directory. Since to achieve good performance, i am using lazy loading technique for loading of these js files.
I have a script.service.ts file in the app folder which loads the js files, i provide the names of the js files to this service to make it load. I also have a script.store.ts file where i have mapping of the js file names with there paths. Script.service.ts uses this path to load the js file with the mentioned name.
Problem - Now, whenever i change something in my js file and deploy the application, the changes are not getting reflected in the browser since the files are already cached. I have used gulp plugin to append a hash content to these file names with task runner, but i cannot make changes in the code of script.store.ts every time, since the content hash is unique for each file..
I am searching for a solution where i can achieve cache busting having incorporated this lazy loading feature of js files..
I hope i will get the solution soon. Thanks in Advance.
Related
You can find meaning of code busting at https://www.keycdn.com/support/what-is-cache-busting
The main point is that when new version is deployed, uses should use new feature with avoiding cache feature.
My app is deployed with Universal SSR and using scss.
I checked deployed files and css codes was included at html so css is not related to cache busting.
Also, I checked js file and whenever the js file is builed, the filename seems changed with some random string. I think it support cache busting on js file.
My conclusion is that nuxt support cache busting. Am I right? If then, Can you give proper reference on nuxt website or webpack configuration codes on github??
Thank you!
I am creating a mobile singlepage web app using jquery mobile. The webapp includes a number of javascript files and a number of css files. I have written a deploy script that concatenates and minifies js and css files, and now I am wondering whether I should inline the concatenated js and css directly in the HTML file - please note that I am talking about a singlepage app here (I know that this would be a bad idea in a traditional web 1.0 app with dynamically generated HTML). I am also using appcache/manifest file to cache the singlepage app so that subsequent access to the web app will be served from the cache, so it is the initial load time that is my primary concern.
When I inline everything (jquery, jquery mobile etc.), my 7kb HTML file increases to 350kb (100kb zipped) but now everything can be loaded in a single request.
But am I missing some other benefits such as parallel downloading of js files - and would it therefore be better to not inline the css and js, but instead just concatenate all js and css to a single js file and a single css file and then fetch each of them in separate requests?
Are there any limits regarding file size that I should be aware of? Maybe caching in network routers works better with smaller file sizes or whatever?
So my question boils down to whether it is a good idea to inline everything when making singlepage mobile web apps?
The answer to how much should be concatenated and how much should be inlined varies depending on a number of conditions. The final answer is you should do A/B testing and find what works best for you. From what you describe I recommend you definitely NOT inline 350K of CSS & JS. If you do this then any change to the HTML or JS or CSS requires downloading the entire payload. Instead, compartmentalize those changes and forced updates by keeping HTML, JS, & CSS as separate requests. You could do dynamic | inlining to make the first response fast but leverage (app or localStorage) cache for subsequent requests, but that's going to get complicated when coupled with app cache (because the HTML doc is saved to app cache). Otherwise, just keep them separate, save each resource to app cache, and update individual resources as needed.
I would not recommend inlining everything into the html if your webapp could be accessed from different urls with different querystring.
Example :
http://webapp.com/?fb_token=fdsf
http://webapp.com/?referer=bla
http://webapp.com/?tracker=toto
Each of those will add a master copy in the appcache (you can veryfy it by looking at chrome://appcache-internals/ in chrome). You then risk to reach the quota limit for appcache in term of cache. Furthermore on appcache update, the browser goes through its appcache entry list and ask a fresh copy of it.
A good compromise that i am following for mobile device & appcache , is to keep the html tiny and then have one big css (containing base 64 inlined images) and one js file.
FYI, there is currently a quota limit on the size on the sum of all your listed resources in appcache in the order from 5MB to 25MB (25 being the new iOS6 limit)
-seb
I am using Codeigniter. I am keeping my images,CSS and Javascript files in a folder called "support" in the document root of my application. So my document root folder looks like this-
.settings
application
support
system
.buildpath
.project
index
.htacces
Now my question is will it make my website take time to load as I have to use <? echo base_url();?>support/ every time I need to get something from my support folder? Because you see when I am using <? echo base_url();?>I am actually calling the full website address.. and I have 7 CSS and 13 javascript files to call from "support" so it will definitely take time to load the website. (Please correct me if I am wrong). If you think by this a website can get slow could you please tell me where exactly should I put my CSS,images and javascript files in. I heard views is not a good place for this.
Thanks in Advance :)
This question is probably bigger than you think.
First of all, using <? echo base_url();?> instead of "hard-coding" your web address will not slow down your site. A function call like this is very negligible to the speed of loading your pages.
I think the other part of your question is regarding architecture.
When you think of speed for your website, you need to know what factors slow down the loading of your page. (Although not an exhaustive list, this will help in your case):
the number of files (images, css, javascript, etc.) that need to load for your page
the cache-ability of those files
some server side header nonsense (e-tags and so-forth)
the processing to build your php pages
the size of your page
Now, in your instance, I would recommend putting all of your "static" files in the document root under a folder (say static). Then, access them all in your "views" with the base_url() function.
This way, your page as it's delivered to the browser, will make external calls for those static files - allowing the browser to cache all of those files (assuming the headers are set up correctly). If you put them into views, then they're actually added to the page that is being requested. So, the next page that is requested has to download those files again along with that second page being requested. Make sense?
To help with the "number of files", you can always concatenate and minify any css/javascript that you have. So instead of the browser downloading and caching 8 js files, you can serve it 1 js file with all of your code.
I am using HTML5 offline storage. The goal is to make the whole site available offline. So intuitively, no server requests means all the pages need to be on the client. The only way I know of to accomplish such a task is to make the site into one page then show hide portions with jquery when the user "navigates". Is there a better way?
The html 5 offline spec allows multiple pages to be saved offline so you don't need to put all your content onto one page.
EDIT: link to spec http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html
Be careful that your jquery does not still point to the cloud. You'll need to save the relevant .js files locally.
N.B. If your whole site can be generated and saved as individual .html files then all you need to do is to save these files in the correct (relative) directory structure.
I've been reading this post about minifying and compressing static files like CSS/JS within the publish/package event in VS2010.
I wonder if it also is possible to combine the files to one CSS file and one JS file?
And how that can be done in this process.
As far as minifying and compressing your CSS and JS files - that shouldn't be any issue.
However - when it comes to actually combining all of your related files (CSS & JS) into single files, you will need to be careful to avoid any naming conflicts that can occur.
(This is especially important if you are using some already minified JS files - as variables like a,b,c etc. will be used often.)
The YUI Compresser can handle both the compression of CSS and JavaScript files.
Hope this helps.
Publish time merging is good idea but sometimes say page "A" needs 'a.js' and 'b.js' whereas page "B" needs 'a.js' and 'c.js' and there can many such dynamic combinations. Doing this check at build time and then grouping is sometimes very hectic.
What if grouping happens on the fly for required resources and with one HTTP request like this...
<script language="JavaScript" src="/appContext/js/a,./subdir/b.js"></script>
WebUtilities library (for J2EE) does exactly same and helps with many other front end optimizations.
Minimizing HTTP requests
Minifying JS,CSS files
Minifying inline JS, CSS snipped (custom tag)
Leveraging browser caching (Expires, Cache-Control)
Server side caching (until resource changes)
Early setting charset etc.
Here is the link. Have look in case you find it useful.
http://code.google.com/p/webutilities/