Leverage browser caching with webpack hash | Webpack tutorial смотреть онлайн

Hi All,
In this video we gonna discuss how browser leverage caching for static JS and CSS files (Leverage browser caching with webpack hash). This is also a webpack tutorial. For this we will use react app demo and webpack. By learning this we will also be able to understand what frontend application bundle comprise of. When we create a bundle of our resources then we get a static folder inside our build folder. Inside this static folder there are minified and compressed js and css. Webpack use a hashchunk between the names of these files. This hash chunk is basically a numbering which represents the versioning of the file. When we make any change inside any file and bundle it again, a new chunk hash number is assigned to the file in build folder. When we deploy on server and browser get a static files, it cache it and store its version. Whenever we want to load application again then browser just compare this versioning with the file version on server and if it is different then only it download that resource again otherwise uses its cached content.

Steps:
1. Make a build using "npm run build"
2. Check static file versioning inside build folder
3. Make some changes in your code
4. Build again
5. You will find a new version hash chunk is assigned to the static file

Other related videos:
- How to host & deploy react frontend application on the production server using Render website for free
https://youtu.be/jRTaUHEbrs8

- How to use Environment Variables in React application - dotenv file
https://youtu.be/ukGeell7tS0

If you like this video then please subscribe to my channel and like and share this video. Thank you.

Connect with my social profiles:
LinkedIn: https://www.linkedin.com/in/sudarshan-tanwar-59253847/
Stackoverflow: https://stackoverflow.com/users/2031628/sudarshan-tanwar

#browserleveragecaching #sudarshantanwar #cachestaticfiles