[Turbopack] enable production chunking for CSS too #75049
Draft
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
ijjk
added
created-by: Turbopack team
This was referenced Jan 17, 2025
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
This stack of pull requests is managed by Graphite. Learn more about stacking. |
Stats from current PRDefault Build (Increase detected
|
| vercel/next.js canary | vercel/next.js sokra/css-production-chunking | Change | |
|---|---|---|---|
| buildDuration | 17.2s | 15.4s | N/A |
| buildDurationCached | 14.4s | 12.2s | N/A |
| nodeModulesSize | 418 MB | 418 MB | N/A |
| nextStartRea..uration (ms) | 418ms | 420ms | N/A |
Client Bundles (main, webpack)
| vercel/next.js canary | vercel/next.js sokra/css-production-chunking | 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.44 kB | 5.44 kB | N/A |
| bccd1874-HASH.js gzip | 52.9 kB | 52.9 kB | ✓ |
| 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.4 kB | 34.4 kB | N/A |
| webpack-HASH.js gzip | 1.71 kB | 1.71 kB | N/A |
| Overall change | 52.9 kB | 52.9 kB | ✓ |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | vercel/next.js sokra/css-production-chunking | 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 sokra/css-production-chunking | 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.57 kB | 4.57 kB | N/A |
| index-HASH.js gzip | 268 B | 268 B | ✓ |
| link-HASH.js gzip | 2.35 kB | 2.34 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 sokra/css-production-chunking | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 749 B | 747 B | N/A |
| Overall change | 0 B | 0 B | ✓ |
Rendered Page Sizes
| vercel/next.js canary | vercel/next.js sokra/css-production-chunking | Change | |
|---|---|---|---|
| index.html gzip | 524 B | 524 B | ✓ |
| link.html gzip | 539 B | 536 B | N/A |
| withRouter.html gzip | 520 B | 520 B | ✓ |
| Overall change | 1.04 kB | 1.04 kB | ✓ |
Edge SSR bundle Size
| vercel/next.js canary | vercel/next.js sokra/css-production-chunking | Change | |
|---|---|---|---|
| edge-ssr.js gzip | 129 kB | 129 kB | N/A |
| page.js gzip | 208 kB | 208 kB | N/A |
| Overall change | 0 B | 0 B | ✓ |
Middleware size
| vercel/next.js canary | vercel/next.js sokra/css-production-chunking | Change | |
|---|---|---|---|
| middleware-b..fest.js gzip | 670 B | 667 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 sokra/css-production-chunking | Change | |
|---|---|---|---|
| 274-experime...dev.js gzip | 322 B | 322 B | ✓ |
| 274.runtime.dev.js gzip | 314 B | 314 B | ✓ |
| app-page-exp...dev.js gzip | 375 kB | 375 kB | ✓ |
| app-page-exp..prod.js gzip | 130 kB | 130 kB | ✓ |
| app-page-tur..prod.js gzip | 143 kB | 143 kB | ✓ |
| app-page-tur..prod.js gzip | 139 kB | 139 kB | ✓ |
| app-page.run...dev.js gzip | 363 kB | 363 kB | ✓ |
| app-page.run..prod.js gzip | 126 kB | 126 kB | ✓ |
| app-route-ex...dev.js gzip | 37.6 kB | 37.6 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 | 39.2 kB | 39.2 kB | ✓ |
| app-route.ru..prod.js gzip | 25.4 kB | 25.4 kB | ✓ |
| pages-api-tu..prod.js gzip | 9.69 kB | 9.69 kB | ✓ |
| pages-api.ru...dev.js gzip | 11.6 kB | 11.6 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 | 27.7 kB | 27.7 kB | ✓ |
| pages.runtim..prod.js gzip | 21.9 kB | 21.9 kB | ✓ |
| server.runti..prod.js gzip | 916 kB | 916 kB | ✓ |
| Overall change | 2.47 MB | 2.47 MB | ✓ |
build cache Overall increase ⚠️
| vercel/next.js canary | vercel/next.js sokra/css-production-chunking | Change | |
|---|---|---|---|
| 0.pack gzip | 2.1 MB | 2.1 MB | N/A |
| index.pack gzip | 75 kB | 75.2 kB | |
| Overall change | 75 kB | 75.2 kB |
Diff details
Diff for main-HASH.js
Diff too large to display
Failing test suitesCommit: 524194d
Expand output● app-dynamic-error › production mode › throws an error when prerendering a page with config dynamic error Read more about building and testing Next.js in contributing.md.
Expand output● app dir - with output export and custom distDir (next dev) › should render properly Read more about building and testing Next.js in contributing.md.
Expand output● hmr-deleted-page › should not show errors for a deleted page Read more about building and testing Next.js in contributing.md.
Expand output● dynamic = "error" in devmode › should show error overlay when dynamic is forced Read more about building and testing Next.js in contributing.md.
Expand output● app-dir assetPrefix full URL › should not break HMR when asset prefix set to full URL Read more about building and testing Next.js in contributing.md.
Expand output● hmr-app-and-pages › should do HMR when app router and pages router have shared CSS Read more about building and testing Next.js in contributing.md.
Expand output● build trace with extra entries › production mode › should build and trace correctly Read more about building and testing Next.js in contributing.md.
Expand output● App assetPrefix config › should render correctly with assetPrefix: "/" Read more about building and testing Next.js in contributing.md.
Expand output● app-simple-routes › works with simple routes › renders a node route ● app-simple-routes › works with simple routes › renders a edge route Read more about building and testing Next.js in contributing.md.
Expand output● app dir - crossOrigin config › skip in start mode Read more about building and testing Next.js in contributing.md.
Expand output● app-dir assetPrefix with basePath handling › should redirect route when requesting it directly ● app-dir assetPrefix with basePath handling › should render link ● app-dir assetPrefix with basePath handling › should redirect route when requesting it directly by browser ● app-dir assetPrefix with basePath handling › should redirect route when clicking link ● app-dir assetPrefix with basePath handling › bundles should return 200 on served assetPrefix ● app-dir assetPrefix with basePath handling › rewrites › rewrites that do not start with assetPrefix should still work ● app-dir assetPrefix with basePath handling › rewrites › should respect rewrites that start with assetPrefix Read more about building and testing Next.js in contributing.md.
Expand output● experimental-lightningcss › should support css modules Read more about building and testing Next.js in contributing.md.
Expand output● app dir client cache semantics (30s/5min) › prefetch={true} › should prefetch the full page ● app dir client cache semantics (30s/5min) › prefetch={true} › should re-use the cache for the full page, only for 5 mins ● app dir client cache semantics (30s/5min) › prefetch={true} › should prefetch again after 5 mins if the link is visible again ● app dir client cache semantics (30s/5min) › prefetch={false} › should not prefetch the page at all ● app dir client cache semantics (30s/5min) › prefetch={false} › should re-use the cache only for 30 seconds ● app dir client cache semantics (30s/5min) › prefetch={undefined} - default › should prefetch partially a dynamic page ● app dir client cache semantics (30s/5min) › prefetch={undefined} - default › should re-use the full cache for only 30 seconds ● app dir client cache semantics (30s/5min) › prefetch={undefined} - default › should renew the 30s cache once the data is revalidated ● app dir client cache semantics (30s/5min) › prefetch={undefined} - default › should refetch below the fold after 30 seconds ● app dir client cache semantics (30s/5min) › prefetch={undefined} - default › should refetch the full page after 5 mins ● app dir client cache semantics (30s/5min) › prefetch={undefined} - default › should respect a loading boundary that returns ● app dir client cache semantics (30s/5min) › should seed the prefetch cache with the fetched page data ● app dir client cache semantics (30s/5min) › should renew the initial seeded data after expiration time Read more about building and testing Next.js in contributing.md.
Expand output● app-dir action disallowed origins › should error if x-forwarded-host does not match the origin Read more about building and testing Next.js in contributing.md.
Expand output● app dir › Loading › should render loading.js in initial html for slow page Read more about building and testing Next.js in contributing.md.
Expand output● app-dir action allowed origins › should pass if localhost is set as a safe origin Read more about building and testing Next.js in contributing.md.
Expand output● app dir - with output export - dynamic missing gsp dev › development mode › should error when dynamic route is missing generateStaticParams ● app dir - with output export - dynamic missing gsp dev › development mode › should error when dynamic route is set to true Read more about building and testing Next.js in contributing.md.
Expand output● next/dynamic › development mode › should load a App Router page correctly Read more about building and testing Next.js in contributing.md.
Expand output● build trace with extra entries › production mode › should build and trace correctly Read more about building and testing Next.js in contributing.md.
Expand output● app dir - with output export (next start) › production mode › should error during next start with output export ● app dir - with output export (next start) › production mode › should warn during next start with output standalone Read more about building and testing Next.js in contributing.md.
Expand output● Export with default map › production mode › should export with folder that has dot in name ● Export with default map › production mode › should export an amp only page to clean path ● Export with default map › production mode › should export hybrid amp page correctly ● Export with default map › production mode › should export nested hybrid amp page correctly ● Export with default map › production mode › should export nested hybrid amp page correctly with folder ● Export with default map › production mode › should export hybrid index amp page correctly Read more about building and testing Next.js in contributing.md.
Expand output● app dir - dynamic error trace › should show the error trace ● app dir - dynamic error trace › should show the error trace Read more about building and testing Next.js in contributing.md.
Expand output● app dir - with output export (next dev / next build) › production mode › should error when running next export ● app dir - with output export (next dev / next build) › production mode › should correctly emit exported assets to config.distDir Read more about building and testing Next.js in contributing.md.
Expand output● _allow-underscored-root-directory › should not serve app path with underscore ● _allow-underscored-root-directory › should pages path with a underscore at the root ● _allow-underscored-root-directory › should serve app path with %5F Read more about building and testing Next.js in contributing.md.
Expand output● ssr-only-error › should show ssr only error in error overlay ● Test suite failed to run Read more about building and testing Next.js in contributing.md.
Expand output● app dir - css with pageextensions › css support with pageextensions › page in app directory with pageextention, css should work › should support global css inside layout Read more about building and testing Next.js in contributing.md.
Expand output● app-catch-all-optional › should handle optional catchall ● app-catch-all-optional › should handle optional catchall with no params Read more about building and testing Next.js in contributing.md.
Expand output● dev-fetch-hmr › should retain module level fetch patching Read more about building and testing Next.js in contributing.md.
Expand output● Error overlay - RSC runtime errors › should show runtime errors if invalid client API from node_modules is executed ● Error overlay - RSC runtime errors › should show runtime errors if invalid server API from node_modules is executed ● Error overlay - RSC runtime errors › should show source code for jsx errors from server component ● Error overlay - RSC runtime errors › should show the userland code error trace when fetch failed error occurred ● Error overlay - RSC runtime errors › should not show the bundle layer info in the file trace Read more about building and testing Next.js in contributing.md.
Expand output● dynamic-io-dev-warmup › logs with Prerender or Server environment depending based on whether the timing of when the log runs relative to this environment boundary Read more about building and testing Next.js in contributing.md.
Expand output● RSC binary serialization › should correctly encode/decode binaries and hydrate ● RSC binary serialization › should correctly encode/decode binaries and hydrate Read more about building and testing Next.js in contributing.md.
Expand output● custom-app-server-action-redirect › redirects with basepath properly when server action handler uses ● custom-app-server-action-redirect › redirects with proper cookies set from both redirect response and post respose Read more about building and testing Next.js in contributing.md.
Expand output● app dir - basepath › should successfully hard navigate from pages -> app ● app dir - basepath › should support ● app dir - basepath › should support Link with basePath prefixed ● app dir - basepath › should prefix metadata og image with basePath ● app dir - basepath › should prefix redirect() with basePath ● app dir - basepath › should render usePathname without the basePath ● app dir - basepath › should handle redirect in dynamic in suspense boundary routes with basePath ● app dir - basepath › should only make a single RSC call to the current page (/base/refresh) ● app dir - basepath › should only make a single RSC call to the current page (/base/refresh?foo=bar) ● app dir - basepath › should properly stream an internal server action redirect() with a relative URL ● app dir - basepath › should properly stream an internal server action redirect() with a absolute URL ● app dir - basepath › should redirect externally when encountering absolute URLs on the same host outside the basePath Read more about building and testing Next.js in contributing.md.
Expand output● Static Image Component Tests › production mode › Should allow an image with a static src to omit height and width ● Static Image Component Tests › production mode › Should use immutable cache-control header for static import ● Static Image Component Tests › production mode › Should use immutable cache-control header even when unoptimized ● Static Image Component Tests › production mode › should have containing followed by for priority image ● Static Image Component Tests › production mode › Should automatically provide an image height and width ● Static Image Component Tests › production mode › should use width and height prop to override import ● Static Image Component Tests › production mode › should use height prop to adjust both width and height ● Static Image Component Tests › production mode › should use width prop to adjust both width and height ● Static Image Component Tests › production mode › should add a data URL placeholder to an image ● Static Image Component Tests › production mode › should add a blur placeholder a statically imported jpg ● Static Image Component Tests › production mode › should add a blur placeholder a statically imported png ● Static Image Component Tests › production mode › should add a blur placeholder a statically imported png with fill ● Static Image Component Tests › production mode › should add placeholder with blurDataURL and fill ● Static Image Component Tests › production mode › should add placeholder even when blurDataURL aspect ratio does not match width/height ratio ● Static Image Component Tests › production mode › should load direct imported image Read more about building and testing Next.js in contributing.md.
Expand output● create-next-app --api (Headless App) › should create JavaScript project with --js flag ● create-next-app --api (Headless App) › should create TypeScript project with --ts flag ● create-next-app --api (Headless App) › should create project inside "src" directory with --src-dir flag ● create-next-app --api (Headless App) › should enable turbopack dev with --turbopack flag Read more about building and testing Next.js in contributing.md.
Expand output● Invalid hrefs › development mode › should not have a race condition with a click handler ● Invalid hrefs › development mode › should not show error for function component with forwardRef ● Invalid hrefs › development mode › should not show error for class component as child of next/link ● Invalid hrefs › development mode › should handle child ref with React.createRef ● Invalid hrefs › development mode › should handle child ref that is a function ● Invalid hrefs › development mode › should handle child ref that is a function that returns a cleanup function Read more about building and testing Next.js in contributing.md.
Expand output● Image Component from node_modules prod mode › production mode › should apply image config for node_modules ● Image Component from node_modules development mode › should apply image config for node_modules Read more about building and testing Next.js in contributing.md.
Expand output● app dir - with output export - dynamic page dev › development mode › should work in dev with dynamicPage undefined ● app dir - with output export - dynamic page dev › development mode › should work in dev with dynamicPage 'error' ● app dir - with output export - dynamic page dev › development mode › should work in dev with dynamicPage 'force-static' ● app dir - with output export - dynamic page dev › development mode › should work in dev with dynamicPage 'force-dynamic' Read more about building and testing Next.js in contributing.md. |
sokra
changed the title
sokra
force-pushed
the
sokra/smarter-production-chunking
branch
from
05242ad to
82b22dc
Compare
sokra
force-pushed
the
sokra/css-production-chunking
branch
from
65a7744 to
656dbc5
Compare
sokra
force-pushed
the
sokra/smarter-production-chunking
branch
from
192e36a to
e6b3f02
Compare
sokra
force-pushed
the
sokra/smarter-production-chunking
branch
from
e6b3f02 to
718dcfc
Compare
sokra
force-pushed
the
sokra/css-production-chunking
branch
from
656dbc5 to
524194d
Compare
mischnic
force-pushed
the
sokra/smarter-production-chunking
branch
from
c6cdfc7 to
682eef3
Compare
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?
Enable the ecmascript production chunking for CSS too. That is not fully correct, but a bit better than the current state.