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

Remove babel from frontend-build (POC) #566

Closed

Conversation

bradenmacdonald
Copy link
Contributor

This PR demonstrates two things:

  1. Replace Babel with swc-loader
  2. Move anything related to tests and linting to devDependencies so that when we just want to build and deploy an MFE, we don't need to bother installing those. This should greatly speed up the build/deploy process.

I tested this with the example app and the course authoring MFE and it seems to be working but obviously a lot more testing would be required before something like this could be merged. So for now it's just a proof of concept.

Findings:

Based on running the command npx howfat . --sort size-

Surprisingly, removing babel does not have a huge effect on the number of dependencies (about 300 less), and SWC is actually larger in terms of disk space (because it's a rust binary). Moving the horribly bloated jest and eslint to devDependencies has a much bigger impact.

Before:

@openedx/[email protected] (2313 deps, 343.54mb, 71856 files, ©undefined)
├── [email protected] (63.75mb, 108 files, ©Apache-2.0)
├─┬ [email protected] (113 deps, 38.8mb, 3006 files, ©MIT)
├─┬ @svgr/[email protected] (341 deps, 35.2mb, 7749 files, ©MIT)
├─┬ [email protected] (90 deps, 31.49mb, 2611 files, ©MIT)
├─┬ [email protected] (538 deps, 29.68mb, 23824 files, ©MIT)
├─┬ @babel/[email protected] (252 deps, 23.91mb, 5739 files, ©MIT)
├─┬ [email protected] (344 deps, 23.09mb, 4676 files, ©MIT)
├─┬ [email protected] (296 deps, 20.4mb, 12877 files, ©MIT)
├─┬ [email protected] (88 deps, 18.5mb, 2737 files, ©MIT)
├─┬ [email protected] (287 deps, 16.25mb, 12203 files, ©MIT)
├─┬ [email protected] (162 deps, 16.05mb, 2694 files, ©MIT)
├─┬ [email protected] (120 deps, 14.26mb, 1944 files, ©MIT)
├─┬ [email protected] (232 deps, 13.5mb, 3444 files, ©MIT)
├─┬ @babel/[email protected] (59 deps, 10.98mb, 1894 files, ©MIT)
├─┬ [email protected] (108 deps, 10.26mb, 1368 files, ©MIT)
├─┬ [email protected] (70 deps, 10.25mb, 2593 files, ©MIT)
├── @formatjs/[email protected] (8.98mb, 4 files, ©MIT)
├─┬ [email protected] (160 deps, 8.82mb, 2676 files, ©MIT)
├─┬ @typescript-eslint/[email protected] (54 deps, 7.89mb, 2783 files, ©MIT)
... more

After removing babel:

@openedx/[email protected] (2038 deps, 385.88mb, 64975 files, ©undefined)
├── [email protected] (63.75mb, 108 files, ©Apache-2.0)
├─┬ @swc/[email protected] (3 deps, 36.07mb, 27 files, ©Apache-2.0)
├─┬ [email protected] (85 deps, 30.17mb, 2297 files, ©MIT)
├─┬ [email protected] (538 deps, 29.68mb, 23824 files, ©MIT)
├── @formatjs/[email protected] (27.84mb, 5 files, ©MIT)
├─┬ [email protected] (345 deps, 25.95mb, 4875 files, ©MIT)
├─┬ [email protected] (296 deps, 20.4mb, 12877 files, ©MIT)
├─┬ [email protected] (88 deps, 18.5mb, 2737 files, ©MIT)
├─┬ @svgr/[email protected] (87 deps, 17.08mb, 2403 files, ©MIT)
├─┬ [email protected] (287 deps, 16.25mb, 12203 files, ©MIT)
├─┬ @svgr/[email protected] (91 deps, 14.26mb, 2340 files, ©MIT)
├─┬ [email protected] (230 deps, 13.5mb, 3435 files, ©MIT)
├─┬ [email protected] (111 deps, 13.32mb, 1789 files, ©MIT)
├─┬ [email protected] (71 deps, 10.27mb, 2603 files, ©MIT)
├─┬ [email protected] (105 deps, 10.21mb, 1353 files, ©MIT)
├── @formatjs/[email protected] (8.98mb, 4 files, ©MIT)
├─┬ [email protected] (149 deps, 8.68mb, 2619 files, ©MIT)
├─┬ @typescript-eslint/[email protected] (54 deps, 7.89mb, 2783 files, ©MIT)
├─┬ @svgr/[email protected] (45 deps, 7.59mb, 1298 files, ©MIT)
├─┬ [email protected] (47 deps, 7.44mb, 1886 files, ©MIT)
├─┬ [email protected] (17 deps, 6.22mb, 143 files, ©MIT)
├─┬ @types/[email protected] (53 deps, 4.17mb, 524 files, ©MIT)
├─┬ @pmmmwh/[email protected] (20 deps, 3.87mb, 4392 files, ©MIT)
├─┬ [email protected] (27 deps, 3.7mb, 498 files, ©MIT)
├─┬ [email protected] (31 deps, 3.02mb, 597 files, ©MIT)
├─┬ [email protected] (59 deps, 3.01mb, 576 files, NATIVE, ©Apache-2.0)
├─┬ [email protected] (16 deps, 2.98mb, 1255 files, ©MIT)
├─┬ [email protected] (16 deps, 2.88mb, 344 files, ©MIT)
├─┬ [email protected] (27 deps, 2.87mb, 264 files, ©MIT)
├─┬ [email protected] (10 deps, 2.69mb, 994 files, ©MIT)
├─┬ @typescript-eslint/[email protected] (38 deps, 2.55mb, 1246 files, ©BSD-2-Clause)
├─┬ @edx/[email protected] (59 deps, 2.34mb, 636 files, ©AGPL-3.0)
├─┬ [email protected] (15 deps, 2.21mb, 305 files, ©MIT)
├─┬ [email protected] (16 deps, 2.18mb, 156 files, ©MIT)
├─┬ [email protected] (69 deps, 2.13mb, 568 files, ©MIT)
├─┬ [email protected] (13 deps, 2mb, 294 files, ©MIT)
├─┬ [email protected] (15 deps, 1.8mb, 261 files, ©MIT)
├─┬ [email protected] (40 deps, 1.05mb, 394 files, ©MIT)
... many smaller deps under 1mb

After removing babel and moving test+lint requirements to devDependencies:

@openedx/[email protected] (937 deps, 232.61mb, 21660 files, ©undefined)
├─┬ @swc/[email protected] (3 deps, 36.07mb, 27 files, ©Apache-2.0)
├── @formatjs/[email protected] (27.84mb, 5 files, ©MIT)
├─┬ [email protected] (245 deps, 22.41mb, 3898 files, ©MIT)
├─┬ [email protected] (92 deps, 19.87mb, 2902 files, ©MIT)
├─┬ @svgr/[email protected] (106 deps, 17.52mb, 2536 files, ©MIT)
├─┬ @svgr/[email protected] (75 deps, 13.92mb, 2224 files, ©MIT)
├─┬ [email protected] (73 deps, 10.3mb, 2611 files, ©MIT)
├── @formatjs/[email protected] (8.98mb, 4 files, ©MIT)
├─┬ [email protected] (153 deps, 8.89mb, 2636 files, ©MIT)
├─┬ @svgr/[email protected] (45 deps, 7.59mb, 1298 files, ©MIT)
├─┬ [email protected] (47 deps, 7.45mb, 1886 files, ©MIT)
├─┬ [email protected] (18 deps, 6.31mb, 153 files, ©MIT)
├─┬ @pmmmwh/[email protected] (20 deps, 3.87mb, 4392 files, ©MIT)
├─┬ [email protected] (18 deps, 3.46mb, 1306 files, ©MIT)
├─┬ [email protected] (31 deps, 3.02mb, 597 files, ©MIT)
├─┬ [email protected] (58 deps, 2.96mb, 552 files, NATIVE, ©Apache-2.0)
├─┬ [email protected] (16 deps, 2.88mb, 344 files, ©MIT)
├─┬ [email protected] (27 deps, 2.87mb, 264 files, ©MIT)
├─┬ [email protected] (10 deps, 2.69mb, 994 files, ©MIT)
├─┬ @edx/[email protected] (56 deps, 2.27mb, 601 files, ©AGPL-3.0)
├─┬ [email protected] (15 deps, 2.21mb, 305 files, ©MIT)
├─┬ [email protected] (16 deps, 2.18mb, 156 files, ©MIT)
├─┬ [email protected] (66 deps, 2.06mb, 533 files, ©MIT)
├─┬ [email protected] (16 deps, 2.03mb, 281 files, ©MIT)
├─┬ [email protected] (13 deps, 2mb, 294 files, ©MIT)
├─┬ [email protected] (40 deps, 1.05mb, 394 files, ©MIT)
... a few other dependencies under 1mb in size

@openedx-webhooks openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Jun 20, 2024
@openedx-webhooks
Copy link

Thanks for the pull request, @bradenmacdonald! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

  • supporting documentation
  • Open edX discussion forum threads
  • timeline information ("this must be merged by XX date", and why that is)
  • partner information ("this is a course on edx.org")
  • any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

Copy link
Contributor

@davidjoy davidjoy left a comment

Choose a reason for hiding this comment

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

This will break all libraries using babel-preserve-modules for their builds, which I believe is all of them. I don't think we can just unilaterally delete Babel without some preparation.

@bradenmacdonald
Copy link
Contributor Author

@davidjoy Well, first of all, this PR demonstrates that removing babel doesn't provide a very substantial improvement on its own, so even though I personally prefer to get rid of babel, I'm not even necessarily pushing for that after trying it out here. Part of this PR is just to gain information.

But secondly, I'm not sure what you mean. I checked frontend-lib-content-components and paragon, two libraries I had open at the time, and neither reference babel-preserve-modules. I checked frontend-build and it's referenced in babel.config.js, but that's irrelevant because nothing would be reading that file anyways.

@davidjoy
Copy link
Contributor

"All of them" is apparently an exaggeration, but here's an example: https://github.com/openedx/frontend-component-header/blob/master/babel.config.js

Paragon goes its own way, and I recall content components not following the established pattern when it was made. 😅

@bradenmacdonald
Copy link
Contributor Author

@davidjoy Right, but again, if we're not using babel, nothing is going to even try to read that babel.config.js file, so it doesn't matter if it references a config preset that has been deleted? Or am I missing something?

@openedx-webhooks
Copy link

@bradenmacdonald Even though your pull request wasn’t merged, please take a moment to answer a two question survey so we can improve your experience in the future.

@itsjeyd itsjeyd added the core contributor PR author is a Core Contributor (who may or may not have write access to this repo). label Jun 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core contributor PR author is a Core Contributor (who may or may not have write access to this repo). open-source-contribution PR author is not from Axim or 2U
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

4 participants