We have a single page app served as a single js file from index.html created using webpack. The name of the js file is hashed to burst the cache:
<script src="/app/assets/module.4ff4f6r342r23bfd26a.js"></script>
However I notice that browsers still cache the old version. Most likely this is happening because index.html got cached, and with it an old reference to the old module.js name.
What is confusing, is that it seems like no one else is having this problem and i don't see a clear way to disable caching of index.html in webpack. What gives?
Related
I am running angular app off a GCP storage
when I run ng build --prod --base-href . --output-path ~/Dev/GCP/
it all works perfectly except...
If the user refreshes to get the new content, 404s on css and javascript
I get the idea of if but how can I get it to understand the change without losing links cause of the hash.
I have tried turning off hash but that undoes the whole point of cache-busting right.
ng build --prod --base-href . --output-path ~/Dev/GCP/
user can refresh and not get 404 on files like js and css and some routes cuase of the js
This is not a angular problem. Let me explain what happens:
The initial application is uploaded on GCP storage
The user hits the url and get the index.html base page
You redeploy with new hashes (cache busting)
The user hits the url and get the cached index.html base page from step 2 from the browser. This points to the old js and css files, which don't exist anymore.
To verify the above scenario (and if you are not going from CDN, which will need edges to be refreshed), when you hit 4 try to do it with force refresh (like ctrl+F5).
If you validate this, then you'll need to check GCP storage on how to apply no-cache header on your index.html
I am a newbie at working with nodeJS and especially with the framework Sails.
I did my research and found that with sails you just need to put CSS-files under the the folder "assets" and call them directly with the URL, e.g. if I put the file custom.css in the folder "assets/foo" I should be able to access it via the URL "localhost:1337/foo/custom.css".
The problem is that my local server throws a 404 Error not being able to find the files, but strangely when I deployed the app to Heroku it works perfectly and I am able to access the css files.
Why is this not working locally?
Welcome to Sails! CSS is served automatically if you put it in your assets/styles folder. Your JS should be in assets/js folder as well. This way you can access it like localhost:1337/assets/js/myjs.js.
In your view - if you don't want to serve it everywhere with a layout - just put your tag like this: <link rel="stylesheet" href="/styles/myawesomestyle.css"> or <script src="/js/mypowerfuljs.js"></script>.
Remember, everything in assets will be made publicly available.
I really recommend that you read the docs HERE.
If we set browser caching for a JS or CSS file via .htaccess what happens if we need to push a fix ASAP ?
Eg. By accident we push a bug that stops the site functioning, say we set the whole body to display:none; in the css.
The site in question is a static html / js / css site running on a lamp stack
If we had 2 days browser caching enabled, and someone visited the site whilst the bug was up, is there a way to purge all caches (without renaming the file) in such an incident ?
If I am using a CDN to serve .js libraries like jquery or react , to my client through multiple 'script' tags then the browser caches these files and later reuses them instead of requesting them again for faster initial load time.
With browserify all .js libraries are bundled into a single .js file , so won't the client need to download the entire .js bundle every time ?
Will this not make the initial load time slow ?
Example ,
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js')>
//get from cache if present
<script src='mycomponents.js'> // should get from server
With browserify ,
<script src='mybundle.js'> // includes jquery + mycomponents , always from server
Depending on the server you are using, it will say to the client's browser if the file can be served from cache or not. Typically, if your script is modified (it means any of the bundled scripts), or when it is the first visit, the client need to request the whole bundle.
If not, it will send 304 a status code, saying that cached file can be used.
If you use CDN, the client most likely don't need to download all the dependencies, since he probably has cached them when visiting other websites. On first visit, or when it's updated, the only file to download is your components' script, which will probably be updated more often, or cache will expire sooner.
Browserify is good for productivity and dependency management. If you're looking for performance, I would recommend using CDN.
But remember that a CDN can fail, so prefer using a failover script on your server
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script>if (typeof jQuery === "undefined") { document.write('<script src="assets/js/jquery.min.js">\x3C/script>') }</script>
CDNs have cache headers configured in a way that means the browser will not have to download the file every time.
You can serve your assets with the headers shown on this page if you want browsers to cache them.
I'm experimenting with Yesod and I've created a simple scaffolding site with yesod. I've downloaded a bootstrap template site and wish to simply host this site with yesod. The template site has an index.html and a bunch of css and js files. This seemly simple task has baffled me. By my understanding, the site should be placed under the 'static' directory, I tried to use sendFile to send the index.html file in getHomeR, but only the content of the that file is displayed, without the css and js. Should I do this with a Subsite?
Thank you
Have a look in your browser console, most likely you're getting 404s due to bad relative links. I'd try using a redirect call to point to the static for so that all of the relative links are correct.