thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement WorkerPool, use webkitdirectory input

Browse Source 
WorkerPool speeds up processing of plugins by using more cores on separate threads. It terminates and recreates a worker after it finishes a task since web assembly seems to slow down a ton when a worker is reused (maybe memory becomes to large / unfragmented, idk).

I switched to the deprecated input tag with webkitdirectory since it is the only way to load a folder under the program files folder. Drag and drop might be another alternative, but I'd rather have a picker.
This commit is contained in:
Tyler Hallada
2022-03-04 23:49:14 -05:00
parent 3a34f48e6c
commit eebae85a65
6 changed files with 143 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
pages/index.tsx
View File

@@ -1,52 +1,38 @@
import { createContext, useEffect, useRef, useState } from "react";
import { createContext, useEffect, useCallback, useState } from "react";
import type { NextPage } from "next";
import Head from "next/head";
import "mapbox-gl/dist/mapbox-gl.css";
import Map from "../components/Map";
import { useAppDispatch, useAppSelector } from "../lib/hooks";
import {
addPluginInOrder,
decrementPending,
PluginFile,
} from "../slices/plugins";
import { useAppDispatch } from "../lib/hooks";
import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
import { WorkerPool } from "../lib/WorkerPool";
export const WorkersContext = createContext<Worker[]>([]);
export const WorkerPoolContext = createContext<WorkerPool | null>(null);
const Home: NextPage = () => {
const [workers, setWorkers] = useState<Worker[]>([]);
const pluginsPending = useAppSelector((state) => state.plugins.pending);
const [workerPool, setWorkerPool] = useState<WorkerPool | null>(null);
const dispatch = useAppDispatch();
const createWorkerPool = useCallback(async () => {
setWorkerPool(
await new WorkerPool().init(window.navigator.hardwareConcurrency)
);
}, []);
useEffect(() => {
async function loadWorkers(count: number) {
const { default: Worker } = await import(
"worker-loader?filename=static/[fullhash].worker.js!../workers/PluginsLoader.worker"
);
const newWorkers = [];
for (let i = 0; i < count; i++) {
const worker = new Worker();
worker.onmessage = (evt: { data: PluginFile }) => {
const { data } = evt;
dispatch(decrementPending(1));
dispatch(addPluginInOrder(data));
};
newWorkers.push(worker);
}
setWorkers(newWorkers);
}
loadWorkers(window.navigator.hardwareConcurrency ?? 8);
return () => {
if (workers) {
for (const worker of workers) {
worker.terminate();
}
if (workerPool) {
workerPool.terminateAll();
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dispatch]);
useEffect(() => {
createWorkerPool();
}, [createWorkerPool]);
return (
<>
<Head>
@@ -95,7 +81,7 @@ const Home: NextPage = () => {
<meta name="twitter:site" content="@tyhallada" />
<meta name="twitter:creator" content="@tyhallada" />
</Head>
<WorkersContext.Provider value={workers}>
<WorkerPoolContext.Provider value={workerPool}>
<div
style={{
margin: 0,
@@ -119,7 +105,7 @@ const Home: NextPage = () => {
>
<Map />
</div>
</WorkersContext.Provider>
</WorkerPoolContext.Provider>
</>
);
};