vitejs / vite

Next generation frontend tooling. It's fast!
http://vite.dev
MIT License
68.15k stars 6.15k forks source link

Worker does not go through some plugins in vite build, but does in development #7569

Closed stereokai closed 2 years ago

stereokai commented 2 years ago

Describe the bug

In a Vite project with some Rollup plugins, when importing a worker like this: new URL("./worker/CompiledWorker.js", import.meta.url).href, the inlined code doesn't get transformed through some plugins when running vite build. I tried setting the plugins both directly on Vite and also on Rollup. See repo.

Reproduction

https://github.com/stereokai/vite-test

System Info

System:
    OS: macOS 11.6.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
    Memory: 249.74 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - /Users/toma/.nvm/versions/node/v16.13.2/bin/node
    npm: 8.4.1 - /Users/toma/.nvm/versions/node/v16.13.2/bin/npm
  Managers:
    Homebrew: 3.3.13 - /usr/local/bin/brew
    pip3: 22.0.4 - /usr/local/bin/pip3
    RubyGems: 2.4.6 - /Users/toma/.rvm/rubies/ruby-2.2.1/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.32.0 - /usr/bin/git
    Clang: 13.0.0 - /usr/bin/clang
    FFmpeg: 5.0 - /usr/local/bin/ffmpeg
  Servers:
    Apache: 2.4.51 - /usr/sbin/apachectl
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.65.2 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 1.8.0_60 - /usr/bin/javac
    Perl: 5.30.2 - /usr/bin/perl
    PHP: 7.3.29 - /usr/bin/php
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.10.4 - /usr/local/bin/python3
    Ruby: 2.2.1 - /Users/toma/.rvm/rubies/ruby-2.2.1/bin/ruby
  Databases:
    SQLite: 3.32.3 - /usr/bin/sqlite3
  Browsers:
    Chrome: 100.0.4896.60
    Firefox: 94.0.2
    Safari: 14.1.2

Used Package Manager

pnpm

Logs

~/dev/vite-test main ?1 ❯ pnpm run build                                                                                                                                              Ruby 2.2.1 23:52:51

> vite-test@0.0.0 build /Users/toma/dev/vite-test
> NODE_ENV=production vite build --debug

  vite:config bundled config file loaded in 257.23ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'copy',
  vite:config     'copy',
  vite:config     'replace',
  vite:config     'jscc',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:watch-package-data',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'replace',
  vite:config     'jscc',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { plugins: [Array], output: [Object] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   configFile: '/Users/toma/dev/vite-test/vite.config.js',
  vite:config   configFileDependencies: [ '/Users/toma/dev/vite-test/vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/Users/toma/dev/vite-test',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: '/Users/toma/dev/vite-test/public',
  vite:config   cacheDir: '/Users/toma/dev/vite-test/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isWorker: false,
  vite:config   isProduction: true,
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: {
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   }
  vite:config } +13ms
vite v2.9.1 building for production...
[plugin:replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
[plugin:replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`. (x2)
transforming (5) commonjsHelpers.jsUse of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
✓ 7 modules transformed.
dist/assets/favicon.17e50649.svg     1.49 KiB
dist/index.html                      0.56 KiB
dist/assets/index.f8da1a16.css       0.22 KiB / gzip: 0.18 KiB
dist/assets/index.3ff82567.js        1.80 KiB / gzip: 1.11 KiB
dist/assets/workerpool.f49a4ca2.js   20.94 KiB / gzip: 6.59 KiB

Validations

poyoho commented 2 years ago

Vite would think new URL('./hello.js', import.meta.url) is an asset so don't process it. And new Worker(new URL('./hello.js', import.meta.url)) is worker assets.

I think you want got a worker url for Vite, but now maybe can not.

stereokai commented 2 years ago

@poyoho thanks for your reply :)

I think you want got a worker url for Vite, but now maybe can not.

It's not a maybe, it's a certain ;)

Do you think pull request #7706 will have ay effect?

poyoho commented 2 years ago

no, it will make a dynamic import to be a chunk instead of worker assets.

sapphi-red commented 2 years ago

This hacky workaround works. https://stackblitz.com/edit/vitejs-vite-a3lfsj?file=dist%2Fassets%2Fworker.68989bfb.js&terminal=dev

stereokai commented 2 years ago

@sapphi-red Thanks a lot! Did you have a look at my use case (https://github.com/stereokai/vite-test)? Thanks

sapphi-red commented 2 years ago

Sorry I meant a workaround to get a worker url. I saw your repro now but I think it is almost working with my worker url workaround. Additionally, change workerpoolImport* like below. It worked for me.

const workerpoolImportDev = `
importScripts("/node_modules/workerpool");
`;
let workerpoolImportProd;

try {
  workerpoolImportProd = `
  import workerpool from "workerpool";`;
} catch (e) {}
stereokai commented 2 years ago

@sapphi-red thanks, though what do you mean exactly by almost working?

And can you please explain your change of workerpoolImport?

stereokai commented 2 years ago

@sapphi-red @poyoho Did you try out the test repo I set up? Thanks :)