В эти дни я работал над своей игрой https://neoinvade.com и столкнулся с некоторыми серьезными проблемами с потрясающим однопоточным javascript. Если вы не знаете, что означает single thread, самым простым объяснением будет то, что даже если вы можете асинхронизировать некоторые команды, которые создают ложное впечатление о параллельном запуске, есть только one call-stack, поэтому пользовательский интерфейс все равно будет отставать от больших данных. обработка на ЦП.

Итак, как же осуществить законный параллельный запуск кода, интенсивно использующего ЦП? Использование веб-воркера!

Мне было трудно настраивать машинописный текст и веб-воркеры, поэтому я решил собрать эту информацию воедино и помочь некоторым людям.

Во-первых, вам нужен упаковщик. Я часами пытался настроить watchify & browserify, но безуспешно. Если вы сталкиваетесь с той же проблемой, я считаю, что webpack гораздо более продвинутый и простой в использовании и настройке.

{
    mode: 'development',
    devtool: 'source-map', // used to show ts files in debugger & 
    better error stack
    entry: {
        bundle: '<main-app-entry>.ts', // replace it with real files
        worker: '<worker-path>.ts' // replace it with real files
    },
    output: {
        filename: '[name].js', // [name] is an actuall variable
        path: path.resolve(__dirname, 'assets/js'),
    },
    watch: true, // allows watching instead of one-time build
    watchOptions: {
        aggregateTimeout: 200,
        poll: 1000
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ],
    },
    module: {
        rules: [{
           test: /\.tsx?$/,
           use: 'ts-loader',
           exclude: /node_modules/,
        }]
    },
    plugins: [
        new WebPack.DefinePlugin({
          'WORKER_URL': JSON.stringify('/assets/js/worker.js') // define variables that can be used in code - for production I used worker.min.js
        })
   ]
};

Следующая остановка main.js

/*
you can use the variable here to add the destination of the file - remember that this path is relative to your server url and not to your ts file in the project
*/
let worker = new Worker(WORKER_URL) 
worker.postMessage('ping')

Последняя остановка worker.ts

const scope = (self as unknown) as Worker
scope.addEventListener('message', event => {
    console.log(event.data)
scope.postMessage('pong')
})

Вот и все! Удачного кодирования!