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.

Sign up for GitHub

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

Jump to bottom

feat(plugin-lightningcss): integrated rsbuild with lightningcss #1741

Merged
merged 25 commits into from
Mar 13, 2024
Merged

feat(plugin-lightningcss): integrated rsbuild with lightningcss #1741

merged 25 commits into from
Mar 13, 2024

Conversation

SoonIter
Copy link
Member

@SoonIter SoonIter commented Mar 5, 2024 •
edited

Summary

This PR is mainly implemented based on the lightningcss-loader and is divided into two parts
lightningcss-loader (transform) and lightningCssMinifyWebpackPlugin (minify).

By default, plugin-lightningcss will replace postcss-loader with lightningcss-loader , and will replace the default rsbuild CSS minify tool (currently SwcCssMinify) with lightningCssMinifyPlugin.

If the relevant configuration is set to false, the corresponding feature will be turned off such as transform: false or minify: false

In most cases, there will be a huge performance improvement in CSS compilation.

total

lightningcss-loader 114ms 6x faster
image
postcss-loader 708ms
image

bootstrap-5.css

lightningcss-loader 24ms 3.5x faster
postcss-loader 83ms

tailwind.css

lightningcss-loader 86ms 3.5x faster
postcss-loader 296ms

Related Links

#1702

Checklist

  • plugin Tests updated.
  • loader e2e updated.
  • minify e2e updated.
  • Documentation updated.

@netlify Netlify
Copy link

netlify bot commented Mar 5, 2024 •
edited

✅ Deploy Preview for rsbuild ready!

Name Link
🔨 Latest commit 7dee444
🔍 Latest deploy log https://app.netlify.com/sites/rsbuild/deploys/65f066b2c82652000996538f
😎 Deploy Preview https://deploy-preview-1741--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: 74 (🔴 down 1 from production)
Accessibility: 97 (no change from production)
Best Practices: 92 (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.

@SoonIter SoonIter force-pushed the feat/lightningcss-plugin branch 8 times, most recently from 90d869a to 3e0cab9 Compare March 12, 2024 05:53
@SoonIter SoonIter marked this pull request as ready for review March 12, 2024 05:57
chenjiahan
chenjiahan reviewed Mar 12, 2024
View reviewed changes
packages/plugin-lightningcss/package.json Outdated Show resolved Hide resolved
packages/plugin-lightningcss/src/loader.ts Outdated Show resolved Hide resolved
packages/plugin-lightningcss/src/types.ts Show resolved Hide resolved
packages/plugin-lightningcss/src/types.ts Outdated Show resolved Hide resolved
@SoonIter SoonIter force-pushed the feat/lightningcss-plugin branch 2 times, most recently from 3cf9ac1 to 3b8c171 Compare March 12, 2024 13:34
@chenjiahan chenjiahan merged commit 1176d53 into web-infra-dev:main Mar 13, 2024
10 checks passed
@chenjiahan
Copy link
Member

Awesome! We will release Rsbuild v0.5.0 in next week.

This was referenced Mar 13, 2024
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chenjiahan chenjiahan chenjiahan approved these changes

Assignees
No one assigned
Labels
change: feat
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@SoonIter @chenjiahan