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

Process plugins round-robin in a web worker queue

Browse Source 
Speeds it up a lot!
This commit is contained in:
Tyler Hallada 2022-03-03 01:33:36 -05:00
parent 5144f8d6e1
commit 20144ae130
2 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/DataDirPicker.tsx
View File

@ -1,6 +1,6 @@
import React, { useContext, useEffect, useRef } from "react"; import React, { useContext, useEffect, useRef } from "react";
import { WorkerContext } from "../pages/index"; import { WorkersContext } from "../pages/index";
import { useAppSelector, useAppDispatch } from "../lib/hooks"; import { useAppSelector, useAppDispatch } from "../lib/hooks";
import { import {
addPluginInOrder, addPluginInOrder,
@ -22,12 +22,12 @@ export const excludedPlugins = [
type Props = {}; type Props = {};
const DataDirPicker: React.FC<Props> = () => { const DataDirPicker: React.FC<Props> = () => {
const worker = useContext(WorkerContext); const workers = useContext(WorkersContext);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const plugins = useAppSelector((state) => state.plugins.plugins); const plugins = useAppSelector((state) => state.plugins.plugins);
const onDataDirButtonClick = async () => { const onDataDirButtonClick = async () => {
if (!worker) { if (workers.length === 0) {
return alert("Worker not loaded yet"); return alert("Worker not loaded yet");
} }
const dirHandle = await ( const dirHandle = await (
@ -53,13 +53,13 @@ const DataDirPicker: React.FC<Props> = () => {
} }
dispatch(setPending(plugins.length)); dispatch(setPending(plugins.length));
for (const plugin of plugins) { plugins.forEach(async (plugin, index) => {
const file = await plugin.getFile(); const file = await plugin.getFile();
console.log(file.lastModified); console.log(file.lastModified);
console.log(file.lastModifiedDate); console.log(file.lastModifiedDate);
const contents = new Uint8Array(await file.arrayBuffer()); const contents = new Uint8Array(await file.arrayBuffer());
try { try {
worker.postMessage( workers[index % workers.length].postMessage(
{ {
skipParsing: excludedPlugins.includes(plugin.name), skipParsing: excludedPlugins.includes(plugin.name),
filename: plugin.name, filename: plugin.name,
@ -71,7 +71,7 @@ const DataDirPicker: React.FC<Props> = () => {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
} });
}; };
return ( return (
@ -80,7 +80,7 @@ const DataDirPicker: React.FC<Props> = () => {
To see all of the cell edits and conflicts for your current mod load To see all of the cell edits and conflicts for your current mod load
order select your <code>Data</code> directory below to load the plugins. order select your <code>Data</code> directory below to load the plugins.
</p> </p>
<button onClick={onDataDirButtonClick} disabled={!worker}> <button onClick={onDataDirButtonClick} disabled={workers.length === 0}>
{plugins.length === 0 ? "Open" : "Reload"} Skyrim Data directory {plugins.length === 0 ? "Open" : "Reload"} Skyrim Data directory
</button> </button>
</> </>

26
pages/index.tsx
View File

@ -12,31 +12,37 @@ import {
} from "../slices/plugins"; } from "../slices/plugins";
import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt"; import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
export const WorkerContext = createContext<Worker | null>(null); export const WorkersContext = createContext<Worker[]>([]);
const Home: NextPage = () => { const Home: NextPage = () => {
const [worker, setWorker] = useState<Worker | null>(null); const [workers, setWorkers] = useState<Worker[]>([]);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
useEffect(() => { useEffect(() => {
async function loadWorker() { async function loadWorkers(count: number) {
const { default: Worker } = await import( const { default: Worker } = await import(
"worker-loader?filename=static/[fullhash].worker.js!../workers/PluginsLoader.worker" "worker-loader?filename=static/[fullhash].worker.js!../workers/PluginsLoader.worker"
); );
const newWorker = new Worker(); const newWorkers = [];
newWorker.onmessage = (evt: { data: PluginFile }) => { for (let i = 0; i < count; i++) {
const worker = new Worker();
worker.onmessage = (evt: { data: PluginFile }) => {
const { data } = evt; const { data } = evt;
dispatch(decrementPending(1)); dispatch(decrementPending(1));
console.log(data.parsed); console.log(data.parsed);
dispatch(addPluginInOrder(data)); dispatch(addPluginInOrder(data));
}; };
setWorker(newWorker); newWorkers.push(worker);
} }
loadWorker(); setWorkers(newWorkers);
}
loadWorkers(window.navigator.hardwareConcurrency ?? 8);
return () => { return () => {
if (worker) { if (workers) {
for (const worker of workers) {
worker.terminate(); worker.terminate();
} }
}
}; };
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [dispatch]); }, [dispatch]);
@ -89,7 +95,7 @@ const Home: NextPage = () => {
<meta name="twitter:site" content="@tyhallada" /> <meta name="twitter:site" content="@tyhallada" />
<meta name="twitter:creator" content="@tyhallada" /> <meta name="twitter:creator" content="@tyhallada" />
</Head> </Head>
<WorkerContext.Provider value={worker}> <WorkersContext.Provider value={workers}>
<div <div
style={{ style={{
margin: 0, margin: 0,
@ -113,7 +119,7 @@ const Home: NextPage = () => {
> >
<Map /> <Map />
</div> </div>
</WorkerContext.Provider> </WorkersContext.Provider>
</> </>
); );
}; };