Navigation Menu

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 optimizer plugin for new CSS compiler #7340

Merged
merged 2 commits into from Nov 24, 2021
Merged

Add optimizer plugin for new CSS compiler #7340

merged 2 commits into from Nov 24, 2021

Conversation

devongovett
Copy link
Member

This adds a @parcel/optimizer-css plugin, which uses @parcel/css, our new CSS minifier written in Rust. It's significantly faster than cssnano (see readme linked above for benchmarks). For now, it's experimental, so not included in the default config.

I'm actually not sure if we want this to eventually be a transformer rather than an optimizer. Eventually it will also perform the work of the current CSS transformer, e.g. extracting dependencies, and there aren't many CSS minification opportunities that will be effective cross file, so probably ok to perform minification in the transformer as well. For now, I put it in an optimizer because minification is the first target.

@height
Copy link

height bot commented Nov 21, 2021

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

let map;
if (result.map != null) {
map = new SourceMap(options.projectRoot);
map.addVLQMap(JSON.parse(result.map));
Copy link
Member Author

Choose a reason for hiding this comment

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

Ideally we'd return a parcel source map directly from @parcel/css. I think we can only return a buffer though, not an actual node source map object (they could be using different versions). But still should be faster than returning and re-parsing VLQ/JSON.

Copy link
Member

Choose a reason for hiding this comment

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

Does the buffer have a stable format/"ABI"?

@parcel-benchmark
Copy link

parcel-benchmark commented Nov 21, 2021

Benchmark Results

Kitchen Sink ✅

Timings

Description Time Difference
Cold 1.75s +80.00ms
Cached 252.00ms -46.00ms 🚀

Cold Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.7cdb0fad.webp 102.94kb +0.00b 540.00ms +461.00ms ⚠️
dist/legacy/parcel.7cdb0fad.webp 102.94kb +0.00b 541.00ms +61.00ms ⚠️
dist/modern/parcel.7cdb0fad.webp 102.94kb +0.00b 540.00ms +60.00ms ⚠️
dist/legacy/index.c1bc86aa.css 94.00b +0.00b 987.00ms +55.00ms ⚠️
dist/modern/index.57a95cbe.css 94.00b +0.00b 986.00ms +54.00ms ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.7cdb0fad.webp 102.94kb +0.00b 472.00ms -32.00ms 🚀
dist/modern/parcel.7cdb0fad.webp 102.94kb +0.00b 472.00ms -36.00ms 🚀

React HackerNews ✅

Timings

Description Time Difference
Cold 8.26s -536.00ms 🚀
Cached 381.00ms -32.00ms 🚀

Cold Bundles

Bundle Size Difference Time Difference
dist/index.js 487.84kb -109.00b 🚀 4.46s -300.00ms 🚀
dist/PermalinkedComment.73f689ea.js 4.21kb +0.00b 4.46s -298.00ms 🚀
dist/UserProfile.1b7befb5.js 1.57kb +0.00b 4.46s -299.00ms 🚀
dist/NotFound.e6c89571.js 429.00b +0.00b 4.46s -299.00ms 🚀
dist/logo.c5bb83f1.png 246.00b +0.00b 4.41s -323.00ms 🚀

Cached Bundles

Bundle Size Difference Time Difference
dist/index.js 487.84kb -109.00b 🚀 4.34s -421.00ms 🚀
dist/PermalinkedComment.73f689ea.js 4.21kb +0.00b 4.34s -421.00ms 🚀
dist/UserProfile.1b7befb5.js 1.57kb +0.00b 4.34s -421.00ms 🚀
dist/NotFound.e6c89571.js 429.00b +0.00b 4.34s -421.00ms 🚀
dist/logo.c5bb83f1.png 246.00b +0.00b 4.30s -419.00ms 🚀

AtlasKit Editor ✅

Timings

Description Time Difference
Cold 56.18s +830.00ms
Cached 1.30s -55.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

Bundle Size Difference Time Difference
dist/editorView.124f5fc0.js 594.92kb +0.00b 43.05s +10.19s ⚠️
dist/popup.64bc9a82.js 209.67kb +0.00b 43.05s +10.19s ⚠️
dist/Toolbar.1af0e801.js 107.23kb +0.00b 43.05s +10.19s ⚠️
dist/Modal.cd71eaf3.js 45.33kb +0.00b 43.05s +10.19s ⚠️
dist/js.660b75db.js 17.25kb +0.00b 43.05s +10.19s ⚠️
dist/ui.5d3f7adc.js 14.94kb +0.00b 43.05s +10.19s ⚠️
dist/smartMediaEditor.48c8cf63.js 13.25kb +0.00b 43.05s +10.19s ⚠️
dist/dropzone.39132d0c.js 12.16kb +0.00b 43.05s +10.19s ⚠️
dist/EmojiPickerComponent.0482d6c0.js 3.73kb +0.00b 43.05s +10.19s ⚠️
dist/png-chunks-extract.5c9c0fb9.js 3.58kb +0.00b 43.05s +10.19s ⚠️
dist/dropzone.55bef257.js 3.29kb +0.00b 43.05s +10.19s ⚠️
dist/clipboard.df70240c.js 2.93kb +0.00b 43.05s +10.19s ⚠️
dist/ResourcedEmojiComponent.667554b4.js 2.12kb +0.00b 43.05s +10.19s ⚠️
dist/browser.4e039ed7.js 1.69kb +0.00b 43.05s +10.19s ⚠️
dist/media-card-analytics-error-boundary.c718a9a7.js 1.12kb +0.00b 43.05s +10.19s ⚠️
dist/media-picker-analytics-error-boundary.8b2547e5.js 966.00b +0.00b 43.05s +10.19s ⚠️
dist/simpleHasher.fc0d6100.js 643.00b +0.00b 43.05s +10.19s ⚠️

Three.js ✅

Timings

Description Time Difference
Cold 6.17s +531.00ms ⚠️
Cached 296.00ms -51.00ms 🚀

Cold Bundles

Bundle Size Difference Time Difference
dist/Three.js 579.68kb +0.00b 4.56s +395.00ms ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/Three.js 579.68kb +0.00b 4.55s +259.00ms ⚠️

Click here to view a detailed benchmark overview.

@devongovett devongovett merged commit b9426b8 into v2 Nov 24, 2021
@devongovett devongovett deleted the css-optimizer branch November 24, 2021 17:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants