Vite react-admin browser dev tools freeze (100% CPU)

adrian-marcu commented 12 months ago

Describe the bug

I encountered a strange issue where importing react-admin on a component and then when using Firefox/Chrome dev tools would use 100% CPU for a few seconds and make the browser unusable (in case of Chrome it would make the dev tools unusable for a few seconds because of having a process per tab). In case of Firefox, it would freeze the entire browser application for a few seconds.

In the reproduction link I provided it even freezes the whole web page without having any dev tools open in the browser. (Used firefox). Please uncomment line 5 in "App.jsx" and just wait a few seconds, you can press the counter button.

Firefox Profiler poiting to the moment I hit refresh on the page where i have my react-admin import:

You can see clearly that the CPU for this goes crazy

Reproduction

https://stackblitz.com/edit/vitejs-vite-vudfw6?file=src%2FApp.jsx

Steps to reproduce

npm create vite@latest
pick React project, Javascript/ Javascript +SWC
import latest react-admin into package.json (used "react-admin": "^4.16.1" in my case)
import any component from react-admin in the App.jsx component (ex: import {fetchUtils} from "react-admin";)
Start the Vite app with dev configuration ("dev": "vite")
Open up Firefox/Chrome (use Firefox to better see what i'm talking about)
Open up dev tools in Firefox
Refresh the page
Browser freezes

System Info

System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 50.73 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.8.1 - /opt/homebrew/bin/node
    npm: 9.5.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 119.0.6045.199
    Safari: 16.2

Used Package Manager

npm

Logs

Click to expand!

```shell % vite build --debug vite:config bundled config file loaded in 221.68ms +0ms vite:config using resolved config: { vite:config plugins: [ vite:config 'vite:build-metadata', vite:config 'vite:watch-package-data', vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vite:react-babel', vite:config 'vite:react-refresh', 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-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:build-html', vite:config 'vite:worker-import-meta-url', vite:config 'vite:asset-import-meta-url', vite:config 'vite:force-systemjs-wrap-complete', vite:config 'commonjs', vite:config 'vite:data-uri', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', 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 optimizeDeps: { vite:config disabled: 'build', vite:config force: undefined, vite:config esbuildOptions: { preserveSymlinks: false, jsx: 'automatic' }, vite:config include: [ 'react', 'react/jsx-dev-runtime', 'react/jsx-runtime' ] vite:config }, vite:config build: { vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config sourcemap: false, vite:config rollupOptions: { onwarn: [Function: onwarn] }, vite:config minify: 'esbuild', vite:config terserOptions: {}, vite:config write: true, vite:config emptyOutDir: null, vite:config copyPublicDir: true, vite:config manifest: false, vite:config lib: false, vite:config ssr: false, vite:config ssrManifest: false, vite:config ssrEmitAssets: 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 modulePreload: { polyfill: true }, vite:config cssMinify: true vite:config }, vite:config esbuild: { jsxDev: false, jsx: 'automatic', jsxImportSource: undefined }, vite:config resolve: { vite:config mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ], vite:config conditions: [], vite:config extensions: [ vite:config '.mjs', '.js', vite:config '.mts', '.ts', vite:config '.jsx', '.tsx', vite:config '.json' vite:config ], vite:config dedupe: [ 'react', 'react-dom' ], vite:config preserveSymlinks: false, vite:config alias: [ [Object], [Object] ] vite:config }, vite:config configFile: '/Users/marcuadrian/Desktop/Work/vitememtest2/vite.config.js', vite:config configFileDependencies: [ '/Users/marcuadrian/Desktop/Work/vitememtest2/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 optimizeDeps: { force: undefined }, vite:config build: {} vite:config }, vite:config root: '/Users/marcuadrian/Desktop/Work/vitememtest2', vite:config base: '/', vite:config rawBase: '/', vite:config publicDir: '/Users/marcuadrian/Desktop/Work/vitememtest2/public', vite:config cacheDir: '/Users/marcuadrian/Desktop/Work/vitememtest2/node_modules/.vite', vite:config command: 'build', vite:config mode: 'production', vite:config ssr: { vite:config target: 'node', vite:config optimizeDeps: { disabled: true, esbuildOptions: [Object] } vite:config }, vite:config isWorker: false, vite:config mainConfig: null, vite:config isProduction: true, vite:config css: { lightningcss: undefined }, vite:config server: { vite:config preTransformRequests: true, vite:config sourcemapIgnoreList: [Function: isInNodeModules$1], vite:config middlewareMode: false, 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 envDir: '/Users/marcuadrian/Desktop/Work/vitememtest2', 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(1) { vite:config 'fnpd_/Users/marcuadrian/Desktop/Work/vitememtest2' => { vite:config dir: '/Users/marcuadrian/Desktop/Work/vitememtest2', vite:config data: [Object], vite:config hasSideEffects: [Function: hasSideEffects], vite:config webResolvedImports: {}, vite:config nodeResolvedImports: {}, vite:config setResolvedCache: [Function: setResolvedCache], vite:config getResolvedCache: [Function: getResolvedCache] vite:config }, vite:config set: [Function (anonymous)] vite:config }, vite:config createResolver: [Function: createResolver], vite:config worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} }, vite:config appType: 'spa', vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }, vite:config getSortedPlugins: [Function: getSortedPlugins], vite:config getSortedPluginHooks: [Function: getSortedPluginHooks] vite:config } +21ms vite v5.0.4 building for production... ✓ 13185 modules transformed. dist/index.html 0.46 kB │ gzip: 0.30 kB dist/assets/react-h3aPdYU7.svg 4.13 kB │ gzip: 2.14 kB dist/assets/index-4sK4E3Wk.css 1.39 kB │ gzip: 0.72 kB dist/assets/index-1f4CyHxp.js 143.39 kB │ gzip: 46.11 kB ✓ built in 5.75s ```

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 12 months ago

Start a new pull request in StackBlitz Codeflow.

vitejs-vite-vudfw6 (Open reproduction)

sapphi-red commented 12 months ago

This is happening because the depOptimized react-admin has 14.8MB sourcemap. The large source map is generated because Vite doesn't do tree-shaking in dev.

ArnaudBarre commented 11 months ago

Please avoid double reporting so that we can track correctly things and we avoid multiple team member debugging the same issue. Here is my comment on the React bug tracker:

So this is two things:

An unoptimized codepath for adding source maps entries in Firefox, this should be reported to their bug tracker
An abusive usage of export * from react admin
A dependency of material UI that ships a log of icon in the most inefficient format possible (i.e. JSX)
Missing bundling from the libs used by react-admin

All this give a 10MB bundle of react-admin with a 15MB source-map with a log of source contents, which when the devtools is opened are parsed in a probably not optimized path.

The solution for now is to:

Report the perf issue to firefox
Remove the sourcemap file (node_modules/.vite/deps/react-admin.js.map)

I'm looking for a clean way to cleanup the generated source map after every deps re-optimized or wehn serving request, I will report here when I found it and close the issue as "upstream issue"

vitejs / vite