From 936cd75645f18cefb157d28cbd5f7d13169b8467 Mon Sep 17 00:00:00 2001 From: modderme123 Date: Fri, 12 Mar 2021 21:25:05 -0800 Subject: [PATCH 1/4] fix(build): bundle non-inlined workers with rollup --- packages/vite/src/node/plugins/worker.ts | 43 ++++++++++++------------ 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts index 2c2e4501b79ac1..6e34b798bb3d05 100644 --- a/packages/vite/src/node/plugins/worker.ts +++ b/packages/vite/src/node/plugins/worker.ts @@ -6,6 +6,7 @@ import { fileToUrl } from './asset' import { cleanUrl, injectQuery } from '../utils' import Rollup from 'rollup' import { ENV_PUBLIC_PATH } from '../constants' +import path from 'path' function parseWorkerRequest(id: string): ParsedUrlQuery | null { const { search } = parseUrl(id) @@ -51,20 +52,19 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin { let url: string if (isBuild) { - if (query.inline != null) { - // bundle the file as entry to support imports and inline as blob - // data url - const rollup = require('rollup') as typeof Rollup - const bundle = await rollup.rollup({ - input: cleanUrl(id), - plugins: config.plugins as Plugin[] + // bundle the file as entry to support imports + const rollup = require('rollup') as typeof Rollup + const bundle = await rollup.rollup({ + input: cleanUrl(id), + plugins: config.plugins as Plugin[] + }) + try { + const { output } = await bundle.generate({ + format: 'iife', + sourcemap: config.build.sourcemap }) - try { - const { output } = await bundle.generate({ - format: 'es', - sourcemap: config.build.sourcemap - }) - + if (query.inline != null) { + // inline as base64 data url return `const blob = new Blob([atob(\"${Buffer.from(output[0].code).toString('base64')}\")], { type: 'text/javascript;charset=utf-8' }); export default function WorkerWrapper() { const objURL = (window.URL || window.webkitURL).createObjectURL(blob); @@ -74,15 +74,16 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin { (window.URL || window.webkitURL).revokeObjectURL(objURL); } }` - } finally { - await bundle.close() + } else { + const fileName = path.parse(cleanUrl(id)).name + url = `__VITE_ASSET__${this.emitFile({ + type: 'asset', + name: `${fileName}.js`, + source: output[0].code + })}__` } - } else { - // emit as separate chunk - url = `__VITE_ASSET__${this.emitFile({ - type: 'chunk', - id: cleanUrl(id) - })}__` + } finally { + await bundle.close() } } else { url = await fileToUrl(cleanUrl(id), config, this) From e2334cce4210cc168232b175f42090d374f5dc7e Mon Sep 17 00:00:00 2001 From: modderme123 Date: Sun, 14 Mar 2021 16:06:16 -0700 Subject: [PATCH 2/4] chore: update worker tests with an extra import --- packages/playground/worker/__tests__/worker.spec.ts | 9 +++++++++ packages/playground/worker/index.html | 4 ++++ 2 files changed, 13 insertions(+) diff --git a/packages/playground/worker/__tests__/worker.spec.ts b/packages/playground/worker/__tests__/worker.spec.ts index 1a1ec922127c8a..eb5eb2a35f0c7b 100644 --- a/packages/playground/worker/__tests__/worker.spec.ts +++ b/packages/playground/worker/__tests__/worker.spec.ts @@ -51,6 +51,15 @@ if (isBuild) { expect(files.length).toBe(3) const index = files.find((f) => f.includes('index')) const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8') + const worker = files.find((f) => f.includes('my-worker')) + const workerContent = fs.readFileSync( + path.resolve(assetsDir, worker), + 'utf-8' + ) + + // worker should have all imports resolved and no exports + expect(workerContent).not.toMatch(`import`) + expect(workerContent).not.toMatch(`export`) // chunk expect(content).toMatch(`new Worker("/assets`) expect(content).toMatch(`new SharedWorker("/assets`) diff --git a/packages/playground/worker/index.html b/packages/playground/worker/index.html index 3203fb0a98874e..a7ec2da11370c8 100644 --- a/packages/playground/worker/index.html +++ b/packages/playground/worker/index.html @@ -1,3 +1,4 @@ +
Expected values:
Response from worker: @@ -16,6 +17,9 @@ import Worker from './my-worker?worker' import InlineWorker from './my-worker?worker&inline' import SharedWorker from './my-shared-worker?sharedworker&name=shared' + import { mode } from './workerImport' + + document.querySelector('.mode-true').textContent = mode const worker = new Worker() worker.addEventListener('message', (e) => { From ee9fdb842871aade6aca5d0cf6a742269005d536 Mon Sep 17 00:00:00 2001 From: modderme123 Date: Tue, 22 Jun 2021 17:17:58 -0700 Subject: [PATCH 3/4] fix: hash worker assets --- packages/vite/src/node/plugins/asset.ts | 2 +- packages/vite/src/node/plugins/worker.ts | 38 +++++++++++++++--------- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts index dce0a8243c7aed..69547a7175b35b 100644 --- a/packages/vite/src/node/plugins/asset.ts +++ b/packages/vite/src/node/plugins/asset.ts @@ -254,7 +254,7 @@ async function fileToBuiltUrl( return url } -function getAssetHash(content: Buffer) { +export function getAssetHash(content: Buffer): string { return createHash('sha256').update(content).digest('hex').slice(0, 8) } diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts index 6e34b798bb3d05..b2725fc047fa47 100644 --- a/packages/vite/src/node/plugins/worker.ts +++ b/packages/vite/src/node/plugins/worker.ts @@ -2,7 +2,7 @@ import { ResolvedConfig } from '../config' import { Plugin } from '../plugin' import { parse as parseUrl } from 'url' import qs, { ParsedUrlQuery } from 'querystring' -import { fileToUrl } from './asset' +import { fileToUrl, getAssetHash } from './asset' import { cleanUrl, injectQuery } from '../utils' import Rollup from 'rollup' import { ENV_PUBLIC_PATH } from '../constants' @@ -58,14 +58,22 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin { input: cleanUrl(id), plugins: config.plugins as Plugin[] }) + let code: string try { const { output } = await bundle.generate({ format: 'iife', sourcemap: config.build.sourcemap }) - if (query.inline != null) { - // inline as base64 data url - return `const blob = new Blob([atob(\"${Buffer.from(output[0].code).toString('base64')}\")], { type: 'text/javascript;charset=utf-8' }); + code = output[0].code + } finally { + await bundle.close() + } + const content = Buffer.from(code) + if (query.inline != null) { + // inline as blob data url + return `const blob = new Blob([atob(\"${content.toString( + 'base64' + )}\")], { type: 'text/javascript;charset=utf-8' }); export default function WorkerWrapper() { const objURL = (window.URL || window.webkitURL).createObjectURL(blob); try { @@ -74,16 +82,18 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin { (window.URL || window.webkitURL).revokeObjectURL(objURL); } }` - } else { - const fileName = path.parse(cleanUrl(id)).name - url = `__VITE_ASSET__${this.emitFile({ - type: 'asset', - name: `${fileName}.js`, - source: output[0].code - })}__` - } - } finally { - await bundle.close() + } else { + const basename = path.parse(cleanUrl(id)).name + const contentHash = getAssetHash(content) + const fileName = path.posix.join( + config.build.assetsDir, + `${basename}.${contentHash}.js` + ) + url = `__VITE_ASSET__${this.emitFile({ + fileName, + type: 'asset', + source: code + })}__` } } else { url = await fileToUrl(cleanUrl(id), config, this) From e7393d0615d2f378abe054a50889c4224529c0db Mon Sep 17 00:00:00 2001 From: modderme123 Date: Tue, 22 Jun 2021 17:19:52 -0700 Subject: [PATCH 4/4] fix: assetPlugin no longer wipes cache with workers --- packages/vite/src/node/plugins/worker.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts index b2725fc047fa47..0d3198037732ef 100644 --- a/packages/vite/src/node/plugins/worker.ts +++ b/packages/vite/src/node/plugins/worker.ts @@ -1,5 +1,6 @@ import { ResolvedConfig } from '../config' import { Plugin } from '../plugin' +import { resolvePlugins } from '../plugins' import { parse as parseUrl } from 'url' import qs, { ParsedUrlQuery } from 'querystring' import { fileToUrl, getAssetHash } from './asset' @@ -56,7 +57,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin { const rollup = require('rollup') as typeof Rollup const bundle = await rollup.rollup({ input: cleanUrl(id), - plugins: config.plugins as Plugin[] + plugins: await resolvePlugins({ ...config }, [], [], []) }) let code: string try {