perf: Do not run react compiler needlessly #75676
Open
+17
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This stack of pull requests is managed by Graphite. Learn more about stacking. |
kdy1
changed the title
Stats from current PRDefault Build (Increase detected
|
| vercel/next.js canary | vercel/next.js kdy1/react-compiler-iff | Change | |
|---|---|---|---|
| buildDuration | 18s | 16.5s | N/A |
| buildDurationCached | 15.7s | 13.2s | N/A |
| nodeModulesSize | 392 MB | 392 MB | |
| nextStartRea..uration (ms) | 434ms | 415ms | N/A |
Client Bundles (main, webpack)
| vercel/next.js canary | vercel/next.js kdy1/react-compiler-iff | Change | |
|---|---|---|---|
| 5306-HASH.js gzip | 54 kB | 54 kB | N/A |
| 8276.HASH.js gzip | 169 B | 168 B | N/A |
| 8377-HASH.js gzip | 5.46 kB | 5.46 kB | N/A |
| bccd1874-HASH.js gzip | 52.9 kB | 52.9 kB | N/A |
| framework-HASH.js gzip | 57.5 kB | 57.5 kB | N/A |
| main-app-HASH.js gzip | 241 B | 242 B | N/A |
| main-HASH.js gzip | 34.5 kB | 34.5 kB | N/A |
| webpack-HASH.js gzip | 1.71 kB | 1.71 kB | N/A |
| Overall change | 0 B | 0 B | ✓ |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | vercel/next.js kdy1/react-compiler-iff | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 39.4 kB | 39.4 kB | ✓ |
| Overall change | 39.4 kB | 39.4 kB | ✓ |
Client Pages
| vercel/next.js canary | vercel/next.js kdy1/react-compiler-iff | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 193 B | 193 B | ✓ |
| _error-HASH.js gzip | 193 B | 193 B | ✓ |
| amp-HASH.js gzip | 512 B | 510 B | N/A |
| css-HASH.js gzip | 343 B | 342 B | N/A |
| dynamic-HASH.js gzip | 1.84 kB | 1.84 kB | ✓ |
| edge-ssr-HASH.js gzip | 265 B | 265 B | ✓ |
| head-HASH.js gzip | 363 B | 362 B | N/A |
| hooks-HASH.js gzip | 393 B | 392 B | N/A |
| image-HASH.js gzip | 4.59 kB | 4.58 kB | N/A |
| index-HASH.js gzip | 268 B | 268 B | ✓ |
| link-HASH.js gzip | 2.35 kB | 2.35 kB | N/A |
| routerDirect..HASH.js gzip | 328 B | 328 B | ✓ |
| script-HASH.js gzip | 397 B | 397 B | ✓ |
| withRouter-HASH.js gzip | 323 B | 326 B | N/A |
| 1afbb74e6ecf..834.css gzip | 106 B | 106 B | ✓ |
| Overall change | 3.59 kB | 3.59 kB | ✓ |
Client Build Manifests
| vercel/next.js canary | vercel/next.js kdy1/react-compiler-iff | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 748 B | 747 B | N/A |
| Overall change | 0 B | 0 B | ✓ |
Rendered Page Sizes
| vercel/next.js canary | vercel/next.js kdy1/react-compiler-iff | Change | |
|---|---|---|---|
| index.html gzip | 525 B | 524 B | N/A |
| link.html gzip | 539 B | 538 B | N/A |
| withRouter.html gzip | 520 B | 520 B | ✓ |
| Overall change | 520 B | 520 B | ✓ |
Edge SSR bundle Size
| vercel/next.js canary | vercel/next.js kdy1/react-compiler-iff | Change | |
|---|---|---|---|
| edge-ssr.js gzip | 130 kB | 130 kB | N/A |
| page.js gzip | 210 kB | 210 kB | N/A |
| Overall change | 0 B | 0 B | ✓ |
Middleware size
| vercel/next.js canary | vercel/next.js kdy1/react-compiler-iff | Change | |
|---|---|---|---|
| middleware-b..fest.js gzip | 677 B | 671 B | N/A |
| middleware-r..fest.js gzip | 155 B | 156 B | N/A |
| middleware.js gzip | 31.3 kB | 31.3 kB | N/A |
| edge-runtime..pack.js gzip | 844 B | 844 B | ✓ |
| Overall change | 844 B | 844 B | ✓ |
Next Runtimes
| vercel/next.js canary | vercel/next.js kdy1/react-compiler-iff | Change | |
|---|---|---|---|
| app-page-exp...dev.js gzip | 393 kB | 393 kB | ✓ |
| app-page-exp..prod.js gzip | 132 kB | 132 kB | ✓ |
| app-page-tur..prod.js gzip | 145 kB | 145 kB | ✓ |
| app-page-tur..prod.js gzip | 141 kB | 141 kB | ✓ |
| app-page.run...dev.js gzip | 380 kB | 380 kB | ✓ |
| app-page.run..prod.js gzip | 128 kB | 128 kB | ✓ |
| app-route-ex...dev.js gzip | 39.3 kB | 39.3 kB | ✓ |
| app-route-ex..prod.js gzip | 25.6 kB | 25.6 kB | ✓ |
| app-route-tu..prod.js gzip | 25.6 kB | 25.6 kB | ✓ |
| app-route-tu..prod.js gzip | 25.4 kB | 25.4 kB | ✓ |
| app-route.ru...dev.js gzip | 40.8 kB | 40.8 kB | ✓ |
| app-route.ru..prod.js gzip | 25.4 kB | 25.4 kB | ✓ |
| dist_client_...dev.js gzip | 356 B | 356 B | ✓ |
| dist_client_...dev.js gzip | 349 B | 349 B | ✓ |
| pages-api-tu..prod.js gzip | 9.69 kB | 9.69 kB | ✓ |
| pages-api.ru...dev.js gzip | 11.8 kB | 11.8 kB | ✓ |
| pages-api.ru..prod.js gzip | 9.68 kB | 9.68 kB | ✓ |
| pages-turbo...prod.js gzip | 21.9 kB | 21.9 kB | ✓ |
| pages.runtim...dev.js gzip | 31.5 kB | 31.5 kB | ✓ |
| pages.runtim..prod.js gzip | 21.9 kB | 21.9 kB | ✓ |
| server.runti..prod.js gzip | 60.5 kB | 60.5 kB | ✓ |
| Overall change | 1.67 MB | 1.67 MB | ✓ |
build cache Overall increase ⚠️
| vercel/next.js canary | vercel/next.js kdy1/react-compiler-iff | Change | |
|---|---|---|---|
| 0.pack gzip | 2.1 MB | 2.11 MB | |
| index.pack gzip | 75.4 kB | 75.9 kB | |
| Overall change | 2.18 MB | 2.18 MB |
Diff details
Diff for main-HASH.js
Diff too large to display
timneutkens
reviewed
Feb 5, 2025
Failing test suitesCommit: 423a9cb
Expand output● Production Usage › should navigate through history after query update ● Production Usage › should handle query/hash correctly during query updating #hello? $search ● Production Usage › should handle query/hash correctly during query updating #? $search ● Production Usage › should handle query/hash correctly during query updating ## $search ● Production Usage › should handle query/hash correctly during query updating ##? $search ● Production Usage › should handle query/hash correctly during query updating ##hello? $search ● Production Usage › should handle query/hash correctly during query updating ##hello $search ● Production Usage › should handle query/hash correctly during query updating #hello?world $search ● Production Usage › should handle query/hash correctly during query updating #a ?hello=world ● Production Usage › should handle query/hash correctly during query updating #a ?hello ● Production Usage › should handle query/hash correctly during query updating #a ?hello= ● Production Usage › should not show target deprecation warning ● Production Usage › should respond with 405 for POST to static page ● Production Usage › should contain generated page count in output ● Production Usage › should output traces ● Production Usage › should not contain currentScript usage for publicPath ● Production Usage › should not contain amp, rsc APIs in main chunk ● Production Usage › With basic usage › should render the page ● Production Usage › With basic usage › should polyfill Node.js modules ● Production Usage › With basic usage › should allow etag header support ● Production Usage › With basic usage › should allow etag header support with getStaticProps ● Production Usage › With basic usage › should allow etag header support with getServerSideProps ● Production Usage › With basic usage › should have X-Powered-By header support ● Production Usage › With basic usage › should render 404 for routes that do not exist ● Production Usage › With basic usage › should render 404 for /_next/static route ● Production Usage › With basic usage › should render 200 for POST on page ● Production Usage › With basic usage › should render 404 for POST on missing page ● Production Usage › With basic usage › should render 404 for _next routes that do not exist ● Production Usage › With basic usage › should render 404 even if the HTTP method is not GET or HEAD ● Production Usage › With basic usage › should render 404 for dotfiles in /static ● Production Usage › With basic usage › should return 405 method on static then GET and HEAD ● Production Usage › With basic usage › should return 412 on static file when If-Unmodified-Since is provided and file is modified ● Production Usage › With basic usage › should return 200 on static file if If-Unmodified-Since is invalid date ● Production Usage › With basic usage › should set Content-Length header ● Production Usage › With basic usage › should set Cache-Control header ● Production Usage › With basic usage › should set correct Cache-Control header for static 404s ● Production Usage › With basic usage › should block special pages ● Production Usage › With basic usage › should not contain customServer in NEXT_DATA ● Production Usage › API routes › should work with pages/api/index.js ● Production Usage › API routes › should work with pages/api/hello.js ● Production Usage › API routes › does not work with pages/api/readfile-dirname.js ● Production Usage › API routes › should work with pages/api/readfile-processcwd.js ● Production Usage › API routes › should work with dynamic params and search string ● Production Usage › With navigation › should navigate via client side ● Production Usage › With navigation › should navigate to nested index via client side ● Production Usage › With navigation › should reload page successfully (on bad link) ● Production Usage › With navigation › should reload page successfully (on bad data fetch) ● Production Usage › should navigate to external site and back ● Production Usage › should navigate to page with CSS and back ● Production Usage › should navigate to external site and back (with query) ● Production Usage › should change query correctly ● Production Usage › Runtime errors › should render a server side error on the client side ● Production Usage › Runtime errors › should render a client side component error ● Production Usage › Runtime errors › should call getInitialProps on _error page during a client side component error ● Production Usage › Misc › should handle already finished responses ● Production Usage › Misc › should allow to access /static/ and /_next/ ● Production Usage › Misc › Should allow access to public files ● Production Usage › Misc › should reload the page on page script error ● Production Usage › Misc › should have default runtime values when not defined ● Production Usage › Misc › should not have runtimeConfig in NEXT_DATA ● Production Usage › Misc › should add autoExport for auto pre-rendered pages ● Production Usage › Misc › should not add autoExport for non pre-rendered pages ● Production Usage › Misc › should add prefetch tags when Link prefetch prop is used ● Production Usage › Misc › It does not add a timestamp to link tags with prefetch attribute ● Production Usage › Misc › should reload the page on page script error with prefetch ● Production Usage › should not expose the compiled page file in development ● Production Usage › should not put backslashes in pages-manifest.json ● Production Usage › should handle failed param decoding ● Production Usage › should replace static pages with HTML files ● Production Usage › should not replace non-static pages with HTML files ● Production Usage › should handle AMP correctly in IE ● Production Usage › should warn when prefetch is true ● Production Usage › should not emit stats ● Production Usage › should contain the Next.js version in window export ● Production Usage › should clear all core performance marks ● Production Usage › should not clear custom performance marks ● Production Usage › should have defer on all script tags ● Production Usage › should only have one DOCTYPE ● Production Usage › should preserve query when hard navigating from page 404 ● Production Usage › should remove placeholder for next/image correctly ● Production Usage › Dynamic import › default behavior › should render dynamic import components ● Production Usage › Dynamic import › default behavior › should render one dynamically imported component and load its css files ● Production Usage › Dynamic import › default behavior › should render three dynamically imported components and load their css files ● Production Usage › Dynamic import › default behavior › should bundle two css modules for one dynamically imported component into one css file ● Production Usage › Dynamic import › default behavior › should bundle two css modules for nested components into one css file ● Production Usage › Dynamic import › default behavior › should not remove css styles for same css file between page transitions ● Production Usage › Dynamic import › default behavior › should output two css files even in case of three css module files while one is shared across files ● Production Usage › Dynamic import › default behavior › should render one dynamically imported component without any css files ● Production Usage › Dynamic import › default behavior › should render even there are no physical chunk exists ● Production Usage › Dynamic import › ssr:false option › should not render loading on the server side ● Production Usage › Dynamic import › ssr:false option › should render the component on client side ● Production Usage › Dynamic import › ssr:true option › should render the component on the server side ● Production Usage › Dynamic import › ssr:true option › should render the component on client side ● Production Usage › Dynamic import › custom loading › should render custom loading on the server side when ● Production Usage › Dynamic import › custom loading › should render the component on client side ● Production Usage › process.env › should set process.env.NODE_ENV in production ● Production Usage › process.browser › should eliminate server only code on the client ● Production Usage › process.browser › should eliminate client only code on the server ● Production Usage › With Security Related Issues › should handle invalid URL properly ● Production Usage › With Security Related Issues › should only access files inside .next directory ● Production Usage › With Security Related Issues › should not allow accessing files outside .next/static directory ● Production Usage › With Security Related Issues › should not leak the user's home directory into the build ● Production Usage › With Security Related Issues › should prevent URI based XSS attacks ● Production Usage › With Security Related Issues › should prevent URI based XSS attacks using single quotes ● Production Usage › With Security Related Issues › should prevent URI based XSS attacks using double quotes ● Production Usage › With Security Related Issues › should prevent URI based XSS attacks using semicolons and double quotes ● Production Usage › With Security Related Issues › should prevent URI based XSS attacks using semicolons and single quotes ● Production Usage › With Security Related Issues › should prevent URI based XSS attacks using src ● Production Usage › With Security Related Issues › should prevent URI based XSS attacks using querystring ● Production Usage › With Security Related Issues › should prevent URI based XSS attacks using querystring and quotes ● Production Usage › With Security Related Issues › should handle encoded value in the pathname correctly \ ● Production Usage › With Security Related Issues › should handle encoded value in the pathname correctly % ● Production Usage › With Security Related Issues › should handle encoded value in the query correctly ● Production Usage › With Security Related Issues › should handle encoded value in the pathname correctly / ● Production Usage › With Security Related Issues › should handle encoded value in the pathname to query correctly (/) ● Production Usage › With Security Related Issues › should handle encoded / value for trailing slash correctly ● Production Usage › With Security Related Issues › should not execute script embedded inside svg image, even if dangerouslyAllowSVG=true Read more about building and testing Next.js in contributing.md. |
timneutkens
reviewed
Feb 5, 2025
| @@ -86,6 +86,9 @@ export default function transform( | |||
| target, | |||
| filename, | |||
| }) | |||
| if (!babelConfig) { | |||
There was a problem hiding this comment.
In what case is this hit? When there is no babel config it shouldn't add this loader 🤔
There was a problem hiding this comment.
experimental.reactCompiler: true && filename.includes('/node_modules/') for now
I found this edge case after adding the check for node modules.
In the future, files filtered by #75605 will also hit this line.
huozhi
reviewed
Feb 5, 2025
| @@ -273,6 +273,13 @@ function getFreshConfig( | |||
| return false | |||
| } | |||
|
|
|||
| if ( | |||
| filename.includes('/node_modules/') || | |||
There was a problem hiding this comment.
Will use [\/]node_modules[\/] faster than 2 includes check for corner cases? Also easier to write
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
node_modules.Why?
We were stripping TypeScript and JSX using babel when the React Compiler is enabled. We don't have to, and we should not.