Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add plugin to avoid too many css requests #62530

Merged
merged 1 commit into from
Feb 26, 2024
Merged

Conversation

sokra
Copy link
Member

@sokra sokra commented Feb 26, 2024

What?

Reduces the number of css chunks per entrypoint by merging chunks.

Why?

In larger application the total CSS deduplication approach falls short in a sense of it's causing way too many separate chunks, which results in way to many requests. That affects page load performance.

Closes PACK-2598

@ijjk
Copy link
Member

ijjk commented Feb 26, 2024

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js sokra/css-merge-plugin Change
buildDuration 16.7s 16.9s ⚠️ +194ms
buildDurationCached 9.2s 7.9s N/A
nodeModulesSize 197 MB 197 MB ⚠️ +22.5 kB
nextStartRea..uration (ms) 482ms 493ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js sokra/css-merge-plugin Change
1068-HASH.js gzip 30.3 kB 30.3 kB N/A
3f784ff6-HASH.js gzip 53.7 kB 53.7 kB N/A
4944-HASH.js gzip 5.04 kB 5.03 kB N/A
8423.HASH.js gzip 181 B 181 B
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 241 B 240 B N/A
main-HASH.js gzip 32.2 kB 32.1 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB
Overall change 47.1 kB 47.1 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js sokra/css-merge-plugin Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js sokra/css-merge-plugin Change
_app-HASH.js gzip 196 B 196 B
_error-HASH.js gzip 184 B 183 B N/A
amp-HASH.js gzip 503 B 504 B N/A
css-HASH.js gzip 323 B 324 B N/A
dynamic-HASH.js gzip 2.5 kB 2.51 kB N/A
edge-ssr-HASH.js gzip 258 B 259 B N/A
head-HASH.js gzip 353 B 351 B N/A
hooks-HASH.js gzip 370 B 370 B
image-HASH.js gzip 4.21 kB 4.2 kB N/A
index-HASH.js gzip 259 B 259 B
link-HASH.js gzip 2.68 kB 2.67 kB N/A
routerDirect..HASH.js gzip 313 B 314 B N/A
script-HASH.js gzip 386 B 385 B N/A
withRouter-HASH.js gzip 309 B 311 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 931 B 931 B
Client Build Manifests
vercel/next.js canary vercel/next.js sokra/css-merge-plugin Change
_buildManifest.js gzip 485 B 484 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js sokra/css-merge-plugin Change
index.html gzip 528 B 528 B
link.html gzip 540 B 540 B
withRouter.html gzip 523 B 522 B N/A
Overall change 1.07 kB 1.07 kB
Edge SSR bundle Size
vercel/next.js canary vercel/next.js sokra/css-merge-plugin Change
edge-ssr.js gzip 94.9 kB 94.9 kB N/A
page.js gzip 3.06 kB 3.06 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js sokra/css-merge-plugin Change
middleware-b..fest.js gzip 626 B 627 B N/A
middleware-r..fest.js gzip 151 B 151 B
middleware.js gzip 25.4 kB 25.4 kB N/A
edge-runtime..pack.js gzip 839 B 839 B
Overall change 990 B 990 B
Next Runtimes
vercel/next.js canary vercel/next.js sokra/css-merge-plugin Change
app-page-exp...dev.js gzip 170 kB 170 kB
app-page-exp..prod.js gzip 96.5 kB 96.5 kB
app-page-tur..prod.js gzip 98.3 kB 98.3 kB
app-page-tur..prod.js gzip 92.8 kB 92.8 kB
app-page.run...dev.js gzip 151 kB 151 kB
app-page.run..prod.js gzip 91.3 kB 91.3 kB
app-route-ex...dev.js gzip 22 kB 22 kB
app-route-ex..prod.js gzip 15 kB 15 kB
app-route-tu..prod.js gzip 15 kB 15 kB
app-route-tu..prod.js gzip 14.7 kB 14.7 kB
app-route.ru...dev.js gzip 21.7 kB 21.7 kB
app-route.ru..prod.js gzip 14.7 kB 14.7 kB
pages-api-tu..prod.js gzip 9.5 kB 9.5 kB
pages-api.ru...dev.js gzip 9.78 kB 9.78 kB
pages-api.ru..prod.js gzip 9.5 kB 9.5 kB
pages-turbo...prod.js gzip 22.3 kB 22.3 kB
pages.runtim...dev.js gzip 23 kB 23 kB
pages.runtim..prod.js gzip 22.3 kB 22.3 kB
server.runti..prod.js gzip 50.5 kB 50.5 kB
Overall change 950 kB 950 kB
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js sokra/css-merge-plugin Change
0.pack gzip 1.56 MB 1.55 MB N/A
index.pack gzip 104 kB 105 kB ⚠️ +836 B
Overall change 104 kB 105 kB ⚠️ +836 B
Commit: 8888504

@ijjk
Copy link
Member

ijjk commented Feb 26, 2024

Tests Passed

@sokra sokra merged commit 110fc47 into canary Feb 26, 2024
69 checks passed
@sokra sokra deleted the sokra/css-merge-plugin branch February 26, 2024 10:36
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 14, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants