Reduce redux saveState overhead (#283)

* Reduce redux saveState overhead

I noticed my CPU was quite high when downloading big streams and most of
the CPU was being spent doing browser.storage.local.set(...) for saving
the state.  This state only appears to be needed when the background
page is reloaded (which will never happen if the a content-script is
active.

Buffering the save by 200ms reduces JS overhead by about ~40% (not
including native methods overhead) and total CPU usage on my system
(circa 2022 AMD 16 core) is reduced by ~28%.

* change: use throttle

---------

Co-authored-by: Shy <[email protected]>

src/extension/extension-background/package.json

@@ -17,6 +17,7 @@
     "typescript": "4.9.5"
   },
   "dependencies": {
+    "@github/mini-throttle": "^2.1.0",
     "@hls-downloader/core": "file:../../core",
     "@types/uuid": "^7.0.2",
     "@videojs/vhs-utils": "^1.3.0",

src/extension/extension-background/src/index.ts

@@ -6,6 +6,7 @@ import { CryptoDecryptor } from "./services/crypto-decryptor";
 import { FetchLoader } from "./services/fetch-loader";
 import { IndexedDBFS } from "./services/indexedb-fs";
 import { M3u8Parser } from "./services/m3u8-parser";
+import { throttle } from "@github/mini-throttle";
 
 (async () => {
   const state = await getState();
@@ -22,7 +23,7 @@ import { M3u8Parser } from "./services/m3u8-parser";
   wrapStore(store);
 
   store.subscribe(() => {
-    saveState(store.getState());
+    throttle(saveState, 100);
   });
 
   subscribeListeners(store);

src/extension/extension-background/src/persistState.ts

@@ -1,7 +1,8 @@
 import { browser } from "webextension-polyfill-ts";
 import { RootState } from "@hls-downloader/core/lib/adapters/redux/root-reducer";
 
-export async function saveState(state: RootState) {
+export async function saveState() {
+  const state = getState();
   if (!state) {
     return;
   }