feat: support importing web worksers as import "./worker?worker"

close #403

package.json

@@ -95,6 +95,7 @@
     "rollup-plugin-dynamic-import-variables": "^1.0.1",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-vue": "^6.0.0-beta.6",
+    "rollup-plugin-web-worker-loader": "^1.3.0",
     "selfsigned": "^1.10.7",
     "slash": "^3.0.0",
     "vue": "^3.0.0-beta.14",

playground/App.vue

@@ -23,6 +23,7 @@
   <TestRewriteUnoptimized />
   <TestNormalizePublicPath />
   <TestDynamicImport />
+  <TestWebWorker />
 </template>
 
 <script>
@@ -48,6 +49,7 @@ import TestOptimizeLink from './optimize-linked/TestOptimizeLink.vue'
 import TestRewriteUnoptimized from './rewrite-unoptimized/TestRewriteUnoptimized.vue'
 import TestNormalizePublicPath from './TestNormalizePublicPath.vue'
 import TestDynamicImport from './dynamic-import/TestDynamicImport.vue'
+import TestWebWorker from './worker/TestWorker.vue'
 
 export default {
   components: {
@@ -72,7 +74,8 @@ export default {
     TestOptimizeLink,
     TestRewriteUnoptimized,
     TestNormalizePublicPath,
-    TestDynamicImport
+    TestDynamicImport,
+    TestWebWorker
   }
 }
 </script>

playground/worker/TestWorker.vue

@@ -0,0 +1,28 @@
+<template>
+  <h2>Inline Web Worker</h2>
+  <p><button class="worker-send" @click="send">Click to ping worker</button></p>
+  <p class="worker-response">Message from worker: {{ res }}</p>
+</template>
+
+<script>
+import { ref } from 'vue'
+import Worker from './worker?worker'
+
+export default {
+  setup() {
+    const worker = new Worker()
+    const res = ref()
+
+    worker.addEventListener('message', e => {
+      res.value = e.data
+    })
+
+    return {
+      res,
+      send() {
+        worker.postMessage('ping')
+      }
+    }
+  }
+}
+</script>

playground/worker/worker.js

@@ -0,0 +1,7 @@
+import { msg } from './workerImport'
+
+self.onmessage = (e) => {
+  if (e.data === 'ping') {
+    self.postMessage(msg)
+  }
+}

playground/worker/workerImport.js

@@ -0,0 +1 @@
+export const msg = 'pong'

src/node/build/index.ts

@@ -283,14 +283,22 @@ export async function build(options: BuildConfig): Promise<BuildResult> {
         assetsDir,
         assetsInlineLimit
       ),
+      // https://github.com/darionco/rollup-plugin-web-worker-loader
+      // configured to support `import Worker from './my-worker?worker'`
+      require('rollup-plugin-web-worker-loader')({
+        targetPlatform: 'browser',
+        pattern: /(.+)\?worker/,
+        extensions: supportedExts,
+        preserveSource: true // somehow results in slightly smaller bundle
+      }),
       // minify with terser
       // this is the default which has better compression, but slow
       // the user can opt-in to use esbuild which is much faster but results
       // in ~8-10% larger file size.
       minify && minify !== 'esbuild'
         ? require('rollup-plugin-terser').terser()
         : undefined
-    ]
+    ].filter(Boolean)
   })
 
   const { output } = await bundle.generate({

src/node/server/index.ts

@@ -24,6 +24,7 @@ import { cachedRead } from '../utils'
 import { envPlugin } from './serverPluginEnv'
 export { rewriteImports } from './serverPluginModuleRewrite'
 import { sourceMapPlugin, SourceMap } from './serverPluginSourceMap'
+import { webWrokerPlugin } from './serverPluginWebWorker'
 
 export type ServerPlugin = (ctx: ServerPluginContext) => void
 
@@ -99,6 +100,7 @@ export function createServer(config: ServerConfig): Server {
     esbuildPlugin,
     jsonPlugin,
     assetPathPlugin,
+    webWrokerPlugin,
     serveStaticPlugin
   ]
   resolvedPlugins.forEach((m) => m(context))

src/node/server/serverPluginWebWorker.ts

@@ -1,5 +1,14 @@
 import { ServerPlugin } from '.'
 
 export const webWrokerPlugin: ServerPlugin = ({ app }) => {
-  app.use(async (ctx, next) => {})
+  app.use((ctx, next) => {
+    if (ctx.query.worker != null) {
+      ctx.type = 'js'
+      ctx.body = `export default function WrappedWorker() {
+        return new Worker(${JSON.stringify(ctx.path)}, { type: 'module' })
+      }`
+      return
+    }
+    return next()
+  })
 }

test/test.js

@@ -578,6 +578,12 @@ describe('vite', () => {
       expect(await getText(`.dynamic-import-one`)).toMatch(`One`)
       expect(await getText(`.dynamic-import-two`)).toMatch(`Two`)
     })
+
+    test('importing web worker', async () => {
+      const button = await page.$('.worker-send')
+      await button.click()
+      await expectByPolling(() => getText('.worker-response'), 'pong')
+    })
   }
 
   // test build first since we are going to edit the fixtures when testing dev

yarn.lock

@@ -5909,6 +5909,11 @@ rollup-plugin-vue@^6.0.0-beta.6:
     hash-sum "^2.0.0"
     rollup-pluginutils "^2.8.2"
 
+rollup-plugin-web-worker-loader@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-web-worker-loader/-/rollup-plugin-web-worker-loader-1.3.0.tgz#4ee63ad8c3970a649a2c7a8b4b8cf3292eff3e70"
+  integrity sha512-BA/bp7ThY5wpWij7vWOJQyJgdQWaMFp6uFCv3i4qHdUd+0d+LFT8GzkgwsU8i26n6+iCQ3xTTHOyoi8h36EbUQ==
+
 rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"