You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When bundling Web Worker code with Vite, some of the dependencies that are used
by both the worker and the page context are duplicated in the final bundle, even
though they should be shared because they are virtually the same code.
In the provided repository, pixi.js is used to render to two instances of canvas, once within the page context and once within a Web Worker.
To do this, we have a file canvas.ts which imports pixi.js and exports a class called Canvas. We also have a worker.ts script that will run as a web worker. Both the worker script and main.ts import the Canvas class and set it up. Other than this they virtually do the same thing.
Intuitively, all of pixi.js should just be bundled once and shared across the two page context and web worker scripts which import it. However, the code ends up duplicated and bloating the bundle size (see build logs)
As far as I can tell, there is nothing in the Vite or Rollup docs that helps with this. I have tried various combinations of manualChunks and other options to no avail.
The repository includes a branch called with-manual-chunks. This branch forces Rollup to bundle all code belonging to pixi.js into a manual chunk called pixi.js. This way, you can compare the two bundles to see the (lack of) differences:
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
Describe the bug
Please refer to this repository for a way to reproduce the issue: https://github.com/gabrielecirulli/vite-pixi-bundling
When bundling Web Worker code with Vite, some of the dependencies that are used
by both the worker and the page context are duplicated in the final bundle, even
though they should be shared because they are virtually the same code.
In the provided repository,
pixi.js
is used to render to two instances ofcanvas
, once within the page context and once within a Web Worker.To do this, we have a file
canvas.ts
which importspixi.js
and exports a class calledCanvas
. We also have aworker.ts
script that will run as a web worker. Both the worker script andmain.ts
import theCanvas
class and set it up. Other than this they virtually do the same thing.Intuitively, all of
pixi.js
should just be bundled once and shared across the two page context and web worker scripts which import it. However, the code ends up duplicated and bloating the bundle size (see build logs)As far as I can tell, there is nothing in the Vite or Rollup docs that helps with this. I have tried various combinations of
manualChunks
and other options to no avail.Reproduction
https://github.com/gabrielecirulli/vite-pixi-bundling
Steps to reproduce
pnpm install
pnpm run build
dist/assets
Comparing the build output
The repository includes a branch called
with-manual-chunks
. This branch forces Rollup to bundle all code belonging topixi.js
into a manual chunk calledpixi.js
. This way, you can compare the two bundles to see the (lack of) differences:with-manual-chunks
pnpm install
pnpm run build
git diff --no-index dist/assets/pixi.js*
System Info
Used Package Manager
npm
Logs
`vite build --debug`
```shell 2024-05-19T19:25:38.250Z vite:config bundled config file loaded in 13.52ms 2024-05-19T19:25:38.266Z vite:config using resolved config: { server: { preTransformRequests: true, host: true, sourcemapIgnoreList: [Function: isInNodeModules$1], middlewareMode: false, fs: { strict: true, allow: [Array], deny: [Array], cachedChecks: undefined } }, worker: { format: 'es', plugins: '() => plugins', rollupOptions: {} }, build: { target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], outDir: 'dist', assetsDir: 'assets', assetsInlineLimit: 4096, cssCodeSplit: true, sourcemap: false, rollupOptions: {}, minify: 'esbuild', terserOptions: {}, write: true, emptyOutDir: null, copyPublicDir: true, manifest: false, lib: false, ssr: false, ssrManifest: false, ssrEmitAssets: false, reportCompressedSize: true, chunkSizeWarningLimit: 500, watch: null, commonjsOptions: { include: [Array], extensions: [Array] }, dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }, modulePreload: { polyfill: true }, cssMinify: true }, configFile: '/dir/to/vite-pixi-bundling/vite.config.ts', configFileDependencies: [ '/dir/to/vite-pixi-bundling/vite.config.ts' ], inlineConfig: { root: undefined, base: undefined, mode: undefined, configFile: undefined, logLevel: undefined, clearScreen: undefined, build: {} }, root: '/dir/to/vite-pixi-bundling', base: '/', rawBase: '/', resolve: { mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ], conditions: [], extensions: [ '.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json' ], dedupe: [], preserveSymlinks: false, alias: [ [Object], [Object] ] }, publicDir: '/dir/to/vite-pixi-bundling/public', cacheDir: '/dir/to/vite-pixi-bundling/node_modules/.vite', command: 'build', mode: 'production', ssr: { target: 'node', optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] } }, isWorker: false, mainConfig: null, bundleChain: [], isProduction: true, plugins: [ 'vite:build-metadata', 'vite:watch-package-data', 'vite:pre-alias', 'alias', 'vite:modulepreload-polyfill', 'vite:resolve', 'vite:html-inline-proxy', 'vite:css', 'vite:esbuild', 'vite:json', 'vite:wasm-helper', 'vite:worker', 'vite:asset', 'vite:wasm-fallback', 'vite:define', 'vite:css-post', 'vite:build-html', 'vite:worker-import-meta-url', 'vite:asset-import-meta-url', 'vite:force-systemjs-wrap-complete', 'commonjs', 'vite:data-uri', 'vite:dynamic-import-vars', 'vite:import-glob', 'vite:build-import-analysis', 'vite:esbuild-transpile', 'vite:terser', 'vite:reporter', 'vite:load-fallback' ], css: { lightningcss: undefined }, esbuild: { jsxDev: false }, preview: { port: undefined, strictPort: undefined, host: true, https: undefined, open: undefined, proxy: undefined, cors: undefined, headers: undefined }, envDir: '/dir/to/vite-pixi-bundling', env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true }, assetsInclude: [Function: assetsInclude], logger: { hasWarned: false, info: [Function: info], warn: [Function: warn], warnOnce: [Function: warnOnce], error: [Function: error], clearScreen: [Function: clearScreen], hasErrorLogged: [Function: hasErrorLogged] }, packageCache: Map(1) { 'fnpd_/dir/to/vite-pixi-bundling' => { dir: '/dir/to/vite-pixi-bundling', data: [Object], hasSideEffects: [Function: hasSideEffects], webResolvedImports: {}, nodeResolvedImports: {}, setResolvedCache: [Function: setResolvedCache], getResolvedCache: [Function: getResolvedCache] }, set: [Function (anonymous)] }, createResolver: [Function: createResolver], optimizeDeps: { holdUntilCrawlEnd: true, esbuildOptions: { preserveSymlinks: false } }, appType: 'spa', experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }, getSortedPlugins: [Function: getSortedPlugins], getSortedPluginHooks: [Function: getSortedPluginHooks] } vite v5.2.11 building for production... transforming... ✓ 616 modules transformed. rendering chunks... computing gzip size... dist/assets/batchSamplersUniformGroup-esTw4NqZ.js 0.23 kB dist/index.html 0.38 kB │ gzip: 0.27 kB dist/assets/CanvasPool-DAAltsjf.js 0.69 kB dist/assets/colorToUniform-PMjxk6y4.js 24.37 kB dist/assets/WebGPURenderer-C4GTSOc9.js 35.19 kB dist/assets/browserAll-s_Odv2Zz.js 37.24 kB dist/assets/SharedSystems-Dmf2ic5s.js 43.80 kB dist/assets/WebGLRenderer-DSs9dsMu.js 59.35 kB dist/assets/webworkerAll-CBdqNP-U.js 77.34 kB dist/assets/worker-wXglRUk2.js 228.69 kB dist/assets/batchSamplersUniformGroup-BJBcGol3.js 0.23 kB │ gzip: 0.21 kB dist/assets/CanvasPool-P9anc0rq.js 0.69 kB │ gzip: 0.38 kB dist/assets/colorToUniform-DdNNl6bf.js 24.37 kB │ gzip: 7.84 kB dist/assets/WebGPURenderer-D2rAnSo4.js 35.19 kB │ gzip: 9.73 kB dist/assets/browserAll-Qg6UHUQs.js 37.24 kB │ gzip: 9.96 kB dist/assets/SharedSystems-DviRLSqg.js 43.79 kB │ gzip: 12.25 kB dist/assets/WebGLRenderer-D69Oodqk.js 59.35 kB │ gzip: 16.33 kB dist/assets/webworkerAll-B3O_29JZ.js 77.34 kB │ gzip: 22.81 kB dist/assets/index-DaWpJUK9.js 174.57 kB │ gzip: 55.57 kB ✓ built in 3.09s ```Validations
The text was updated successfully, but these errors were encountered: