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

feat: use CssExtractRspackPlugin to extract CSS #1577

Merged
merged 35 commits into from
May 13, 2024

Conversation

9aoy
Copy link
Collaborator

@9aoy 9aoy commented Feb 18, 2024

Summary

Previously, when we turned on css extract (by default), we used rspack's experiments.css function.

but there are lots of difference between experiments.css and mini-css-extract-plugin which makes migrate old application hard and has some bugs.

Related Links

Checklist

  • Tests updated.
  • Documentation updated.

Copy link

netlify bot commented Feb 18, 2024

Deploy Preview for rsbuild ready!

Name Link
🔨 Latest commit 6e88d85
🔍 Latest deploy log https://app.netlify.com/sites/rsbuild/deploys/66421a4464ebf00008f45798
😎 Deploy Preview https://deploy-preview-1577--rsbuild.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 93 (🟢 up 7 from production)
Accessibility: 97 (no change from production)
Best Practices: 100 (no change from production)
SEO: 92 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@9aoy
Copy link
Collaborator Author

9aoy commented Feb 27, 2024

!canary

@9aoy
Copy link
Collaborator Author

9aoy commented Apr 11, 2024

!bench

@rspack-bot
Copy link

rspack-bot commented Apr 11, 2024

📝 Benchmark detail: Open

case: rsbuild-react
base: 24c5cc2
current: 9813973c

Metric Base Current %
coldInstallTime 25.21s 10.78s -57.25%
hotInstallTime 0.25s 0.25s -1.14%
dependenciesCount 56 56 0.00%
installSize 83.66MB 83.66MB +0.00%

case: rsbuild-arco-pro
base: 24c5cc2
current: 9813973c

Metric Base Current %
beforeDevTime 0.37s 0.46s +25.59%
devColdBootTime 2.21s 2.45s +10.64%
beforeBuildTime 0.59s 0.6s +0.36%
buildColdBootTime 3.01s 3.33s +10.70%
minifiedBundleSize 6601.71KB 6556.72KB -0.68%
gzippedBundleSize 1609.64KB 1611.31KB +0.10%

Threshold exceeded in rsbuild-arco-pro: ["devColdBootTime","buildColdBootTime"]

@web-infra-dev web-infra-dev deleted a comment from rspack-bot Apr 11, 2024
@web-infra-dev web-infra-dev deleted a comment from rspack-bot Apr 11, 2024
@web-infra-dev web-infra-dev deleted a comment from rspack-bot Apr 11, 2024
@9aoy
Copy link
Collaborator Author

9aoy commented Apr 30, 2024

!bench

@rspack-bot
Copy link

rspack-bot commented Apr 30, 2024

📝 Benchmark detail: Open

case: rsbuild-react
base: 7a9f0d1
current: 54df855d

Metric Base Current %
coldInstallTime 7.72s 18.35s +137.71%
hotInstallTime 0.24s 0.25s +2.59%
dependenciesCount 54 54 0.00%
installSize 81.71MB 81.71MB +0.00%

case: rsbuild-arco-pro
base: 22124f3
current: 54df855d

Metric Base Current %
beforeDevTime 0.46s 0.48s +3.29%
devColdBootTime 2.12s 2.22s +4.73%
beforeBuildTime 0.59s 0.61s +4.25%
buildColdBootTime 2.97s 3.07s +3.13%
minifiedBundleSize 6589.36KB 6538.29KB -0.78%
gzippedBundleSize 1608.5KB 1605.85KB -0.16%

@9aoy
Copy link
Collaborator Author

9aoy commented May 7, 2024

!bench

@rspack-bot
Copy link

rspack-bot commented May 7, 2024

📝 Benchmark detail: Open

case: rsbuild-react
base: 2b99d02
current: 38a40d9a

Metric Base Current %
coldInstallTime 7.93s 12.84s +62.01%
hotInstallTime 0.28s 0.31s +11.72%
dependenciesCount 55 55 0.00%
installSize 86.36MB 86.36MB 0.00%

case: rsbuild-arco-pro
base: 2b99d02
current: 38a40d9a

Metric Base Current %
beforeDevTime 0.54s 0.65s +19.76%
devColdBootTime 2.04s 2.72s +32.94%
beforeBuildTime 0.71s 0.72s +1.43%
buildColdBootTime 3.03s 3.24s +6.83%
minifiedBundleSize 6589.01KB 6538.46KB -0.77%
gzippedBundleSize 1603.34KB 1600.9KB -0.15%

Threshold exceeded in rsbuild-arco-pro: ["devColdBootTime"]

@9aoy
Copy link
Collaborator Author

9aoy commented May 9, 2024

!bench

@rspack-bot
Copy link

rspack-bot commented May 9, 2024

📝 Benchmark detail: Open

case: rsbuild-react
base: a9696c9
current: 38a40d9a

Metric Base Current %
coldInstallTime 13.18s 12.36s -6.20%
hotInstallTime 0.28s 0.28s +0.20%
dependenciesCount 40 55 +37.50%
installSize 86.22MB 86.36MB +0.17%

Threshold exceeded in rsbuild-react: ["dependenciesCount"]

case: rsbuild-arco-pro
base: a9696c9
current: 38a40d9a

Metric Base Current %
beforeDevTime 0.54s 0.54s -0.07%
devColdBootTime 2.17s 2.23s +2.40%
beforeBuildTime 0.71s 0.71s -0.52%
buildColdBootTime 3.17s 3.24s +2.43%
minifiedBundleSize 6583.48KB 6538.46KB -0.68%
gzippedBundleSize 1599.33KB 1600.9KB +0.10%

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we use a smaller asset, and all assets should be placed at e2e/assets (to be reused)

tools: {
cssLoader: {
modules: {
// TODO: css-loader need support named export when namedExports: false.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what do we need to do to support this

package.json Outdated Show resolved Hide resolved
@chenjiahan chenjiahan changed the title WIP: feat: use RspackCssExtractPlugin feat: use RspackCssExtractPlugin May 13, 2024
@chenjiahan chenjiahan changed the title feat: use RspackCssExtractPlugin feat: use CssExtractRspackPlugin May 13, 2024
@chenjiahan chenjiahan enabled auto-merge (squash) May 13, 2024 13:50
@chenjiahan chenjiahan changed the title feat: use CssExtractRspackPlugin feat: use CssExtractRspackPlugin to extract CSS May 13, 2024
@chenjiahan chenjiahan merged commit 658b81a into main May 13, 2024
11 checks passed
@chenjiahan chenjiahan deleted the feat/use-mini-css-extract branch May 13, 2024 13:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants