Code splitting Web Workers is a problem when the Worker is loaded from a different domain.

Question

Code splitting Web Workers is a problem when the Worker is loaded from a different domain.

stevexbritton opened this issue a month ago · comments

🐛 bug report

When a Web Worker needs to be loaded from another domain Parcel dynamically generates a blob Javascript file (eg blob:https://192.168.0.20:3001/86fd3485-c662-4b90-8ea9-b1b439693cef
) containing the following code to load that script.

importScripts("https://192.168.0.20:1234/2.0.1alpha/dummy.8e5470d9.js");

Parcel can code split the Worker code into shared bundles and then try to load those bundles with code like below.

importScripts("./dummy2.08cc0e8f.js")

This fails because it's a local url. Parcel has failed to add the domain and root path to the importsScripts url. Manually adding the domain and root path, see below, fixes the problem.

importScripts("https://192.168.0.20:1234/2.0.1alpha/dummy2.08cc0e8f.js")

🎛 Configuration (.babelrc, package.json, cli command)

package.json

{
  "name": "",
  "version": "2.0.1alpha",
  "description": "",
  "homepage": "",
  "private": true,
  "source": "test/playpen.html",
  "type": "module",
  "scripts": {
  },
  "author": "",
  "license": "ISC",
  "browserslist": [
    "defaults"
  ],
  "staticFiles": {
    "staticPath": "./node_modules/three/examples/jsm/libs/draco",
    "excludeGlob": [
      "**/!(*.wasm)"
    ]
  },
  "dependencies": {
    "docs-ts": "^0.7.2",
    "fp-ts": "^2.16.1",
    "lit": "^3.1.2",
    "qrcode": "^1.5.1",
    "three": "~0.158.0"
  },
  "devDependencies": {
    "@parcel/transformer-typescript-tsc": "^2.12.0",
    "@parcel/validator-typescript": "^2.12.0",
    "@types/node": "^18.11.18",
    "@types/qrcode": "^1.5.0",
    "@types/three": "~0.158.0",
    "buffer": "^6.0.3",
    "genversion": "^3.1.1",
    "parcel": "^2.12.0",
    "parcel-reporter-static-files-copy": "^1.5.3",
    "process": "^0.11.10",
    "replace-in-file": "^6.3.5",
    "rimraf": "^3.0.2",
    "typescript": "^5.1.0"
  },
  "alias": {
    "buffer": "./node_modules/buffer",
    "fp-ts": "./node_modules/fp-ts",
    "three": "./node_modules/three"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",

    "module": "esnext",
    "moduleResolution": "bundler",
    "target": "ES2022",

    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noEmit": true,
    "sourceMap": false,
    "declaration": true,
    "alwaysStrict": true,
    "noImplicitReturns": true,
    "noUnusedLocals": false, // SB TODO true,
    "noUnusedParameters": false, // SB TODO true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "stripInternal": true,
    "allowJs": false,
    "isolatedModules": true,
    "experimentalDecorators": true,
    "useDefineForClassFields": false
  },
  "include": [
    "./src",
    "./test",
    "./examples"
  ]
}

🤔 Expected Behavior

Because the worker is loaded from a different domain it cannot be split into shared bundles.

😯 Current Behavior

When the worker tries to load the shared code bundle the browser reports "44b8fa89-d9be-4e3e-8893-33b5506832b9:1 Uncaught DOMException: Failed to execute 'importScripts' on ..."

💁 Possible Solution

Some way of telling Parcel not to code split Worker code or certain files. This can be achieved in a crude way by configuring the @parcel/bundler-default minBundles and minBundleSize parameters, but is only good to prove that it is the code splitting of the Worker code that is causing the problem.

🔦 Context

I have a Custom HTML Element that can use dedicated workers to improve performance. Parcel is splitting the worker code into shared modules which is fine if the hosting HTML page and the custom HTML script are loaded from the same domain, but not if the HTML page is loaded from a different domain.

I'm currently avoiding the problem by not using workers.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" type="image/png" href="../assets/images/favicon.png">

    <script type="module" src="https://192.168.0.20:1234/custom-html-script.js"></script>

💻 Code Sample

I haven't produced a code sample yet, that might be quite difficult, but I'm hoping to get some feedback first. If you accept this as a bug with Parcel then I can probably look into producing an example, if necessary.

🌍 Your Environment

Software	Version(s)
Parcel	2.12.0
Node	18.14.2
npm/Yarn	9.5.0
Operating System	Mac OS 14.3.1