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

Enable transpiling node_modules #7399

Merged
merged 7 commits into from
Jan 4, 2022
Merged

Enable transpiling node_modules #7399

merged 7 commits into from
Jan 4, 2022

Conversation

devongovett
Copy link
Member

@devongovett devongovett commented Dec 3, 2021

Fixes #1655. Fixes #6749.

This enables transpiling node_modules using SWC's version of preset-env. Therefore, only standard JS syntax is allowed (no JSX, TypeScript, etc.). However, this is important as more modules on npm start publishing modern syntax rather than ES5. And now that we are using SWC and not Babel, the performance hit should be minimal.

Needs testing on real world projects (please help!), and perf testing as well.

@height
Copy link

height bot commented Dec 3, 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.

@parcel-benchmark
Copy link

parcel-benchmark commented Dec 3, 2021

Benchmark Results

Kitchen Sink ✅

Timings

Description Time Difference
Cold 2.11s -23.00ms
Cached 354.00ms -23.00ms 🚀

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

React HackerNews ✅

Timings

Description Time Difference
Cold 10.52s +19.00ms
Cached 491.00ms +5.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

AtlasKit Editor ✅

Timings

Description Time Difference
Cold 1.17m +450.00ms
Cached 1.59s -6.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

Bundle Size Difference Time Difference
dist/editorView.af442747.js 594.92kb +0.00b 52.41s +14.13s ⚠️
dist/popup.64bc9a82.js 209.67kb +0.00b 52.41s +14.13s ⚠️
dist/EmojiPickerComponent.922af3e4.js 147.13kb +0.00b 21.39s -10.74s 🚀
dist/Toolbar.1af0e801.js 107.23kb +0.00b 52.41s +14.13s ⚠️
dist/Modal.cd71eaf3.js 45.33kb +0.00b 52.41s +14.13s ⚠️
dist/esm.f1a592e5.js 33.15kb +0.00b 21.39s -10.74s 🚀
dist/DatePicker.f2994e45.js 22.98kb +0.00b 21.39s -10.74s 🚀
dist/js.660b75db.js 17.25kb +0.00b 39.28s -13.42s 🚀
dist/ui.5d3f7adc.js 14.94kb +0.00b 52.41s +14.13s ⚠️
dist/smartMediaEditor.48c8cf63.js 13.25kb +0.00b 52.41s +14.13s ⚠️
dist/dropzone.39132d0c.js 12.16kb +0.00b 52.41s +14.13s ⚠️
dist/EmojiPickerComponent.0482d6c0.js 3.73kb +0.00b 52.42s +14.15s ⚠️
dist/png-chunks-extract.5c9c0fb9.js 3.58kb +0.00b 39.28s -13.42s 🚀
dist/dropzone.55bef257.js 3.29kb +0.00b 52.41s +14.13s ⚠️
dist/clipboard.df70240c.js 2.93kb +0.00b 52.41s +14.13s ⚠️
dist/ResourcedEmojiComponent.667554b4.js 2.12kb +0.00b 52.41s +14.13s ⚠️
dist/feedback.c7e69064.js 1.77kb +0.00b 21.39s -10.74s 🚀
dist/browser.4e039ed7.js 1.69kb +0.00b 52.41s +14.13s ⚠️
dist/workerHasher.3639b1f9.js 1.63kb +0.00b 21.39s -10.74s 🚀
dist/heading6.a693146e.js 1.51kb +0.00b 21.39s -10.74s 🚀
dist/heading5.8bfafe21.js 1.38kb +0.00b 21.39s -10.74s 🚀
dist/expand.a44d10fe.js 1.29kb +0.00b 21.39s -10.74s 🚀
dist/media-card-analytics-error-boundary.c718a9a7.js 1.12kb +0.00b 52.41s +14.13s ⚠️
dist/media-picker-analytics-error-boundary.8b2547e5.js 966.00b +0.00b 52.41s +14.13s ⚠️
dist/simpleHasher.fc0d6100.js 643.00b +0.00b 52.42s +14.15s ⚠️

Three.js ✅

Timings

Description Time Difference
Cold 7.37s -1.00ms
Cached 406.00ms -20.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

Click here to view a detailed benchmark overview.

@devongovett
Copy link
Member Author

Some benchmark data for comparison. All done with the Atlaskit Editor benchmark in the parcel-benchmark-action repo, with --no-optimize.

Before (v2): 5.24s
After: 9.46s (browserslist: ">= 0.25%")
After: 6.04s (browserslist: "supports es6-module")
After: 5.44s (browserslist: "last 2 Chrome versions")

With >= 0.25%, the build becomes ~2x slower because we compile 2x more code to produce the nomodule version. But with the supports es6-module query, the build is only a small amount slower.

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.

Build breaks with browserslist configuration "supports es6-module" babel transpile node_module dependencies
2 participants