Improve the performance of React JS using Content hash
What is Long term caching?
Long-term caching is the process of telling the browser to cache a file for a long time, like 3 months or even 1 year. This is an important setting to ensure that returning users won’t need to download the same JS/CSS files over and over again.
What is Content hashing?
Generate a hash based on the content of the file. This will ensure that, unless we change our base components, the user won’t need to re-download it.
How content hash improve performance ?
The browser won’t download when there is no change in the hash, so below are some example where you can do content hash.
- npm modules
- asset files that won’t change
- Core components
- common component
- common modules
we can do a code split for the above scenarios, so that react will create different bundles and webpack will create the content hash.
To add contest hashing we need to update the webpack config.
how do we add Content hashing in react app?
To learn more, visit the official documentation https://webpack.js.org/guides/caching/
