How does subresource integrity actually help?

Subresource integrity is not about protecting your own code of the web application against modification. What SRI is intended to do can be seen from the description of the goals:

Compromise of a third-party service should not automatically mean compromise of every site which includes its scripts.

Thus, it is about protecting your use of resources located at sites which are not under your control. SRI gives back some control even if code from a third party site is included. It does not offer availability but it offers integrity, i.e. protection against unwanted modifications by the third party (or some hacker which took over this party).

Let's say you have a site built around jQuery. You don't download jQuery and use your copy, but you use a version from a CDN, making use of the caching on client's browsers. That works because if one site uses the CDN version, it will be cached and every site that uses the same version will benefit, not having to download an identical file every time.

One day, someone hacks into the CDN servers and replaces the JavaScript files with altered versions that submit every keystroke to the attacker's servers somewhere. And every single site that uses that script is affected, your site included.

Here enters Subresource Integrity - SRI. It prevents a third party from altering external resources undetected. If you have SRI enabled on your external resources, a client browser will not load resources with hash mismatches.

then they could easily just replace the root resource with hashes of their own malicious code

Not really. SRI protects your site (code you control) from changes on a third party script, which you don't control. An attack on your code is not protected by SRI, because if an attacker changes a third party script and your site, he can do the same changing only your site with way less trouble. After all, attacking your site is easier than attacking Akamai, CloudFlare, Google, or Microsoft.