minify `helpers-generated.ts` by lightmare · Pull Request #13837 · babel/babel

lightmare · 2021-10-11T13:43:52Z

Q	A
Fixed Issues?	none
Patch: Bug Fix?	no
Major: Breaking Change?	hopefully not
Minor: New Feature?
Tests Added + Pass?	none added
Documentation PR Link
Any Dependency Changes?	babel-helpers devdeps: + `terser`; additionally yarn dedupe upgraded `terser` and `source-map-support`
License	MIT

I came across this comment in babel-helpers/scripts/generate-helpers.js:

// TODO: We can minify the helpers in production

and thought it should not be difficult to at least strip unnecessary whitespace, of which there is a lot in the output.

Given that the helpers don't (can't?) contain template strings, which would require properly parsing the source to avoid removing important whitespace, redundant whitespace outside string literals can quite easily be removed with a few regex replacements.

Another trick is to export a single object from helpers-generated.ts, instead of individual constants, which avoids the need to rename identifier-unfriendly helper like typeof to _typeof and back.

edit: Changed to properly minify helpers with terser. 🛩️

codesandbox-ci · 2021-10-11T13:47:00Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9be85ca:

Sandbox	Source
babel-repl-custom-plugin	Configuration
babel-plugin-multi-config	Configuration

babel-bot · 2021-10-11T13:50:02Z

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/49856/

JLHwung · 2021-10-12T14:33:55Z

I am conservative on a mini-minifier used in babel-helpers only for maintenance cost. Can we run terser on helper sources?

lightmare · 2021-10-12T16:53:26Z

I am conservative on a mini-minifier used in babel-helpers only for maintenance cost.

Agreed. I wasn't too confident about this to begin with, and have since encountered two potential issues -- one is that this cannot recognize a regex literal in the source, so could potentially destroy it; the other is with eating semicolons. I had to put two in a helper with an empty {while(stuff());;} loop, because one was being removed, and the most frustrating part about it was convincing both eslint and prettier that the two ;; must be there :D

Can we run terser on helper sources?

Looking into it now, and it seems pretty straightforward. With mangle: false, compress: false it produces slightly smaller output that this PR (but more importantly, always correct); and with compress: true, mangle: false it's even smaller, yet still kinda readable as identifiers are kept.

lightmare · 2021-10-12T17:21:14Z

I'm having trouble committing changed generate-helpers.js using terser.

✖ eslint --format=codeframe found some errors. Please fix them and try committing again.
error: 'dist' should be listed in the project's dependencies. Run 'npm i -S dist' to add it (import/no-extraneous-dependencies) at packages/babel-helpers/scripts/generate-helpers.js:4:1:
2 | import { join } from "path";
3 | import { URL, fileURLToPath } from "url";
> 4 | import { minify } from "terser";
  | ^

Said package dist is inside the installed terser package, but it's not a real dependency that's supposed to be tracked independently, so that npm -i -S dist suggestion doesn't help much.

Should I just eslint-disable the one import line, or is there a proper fix for this kind of issue?

nicolo-ribaudo · 2021-11-02T09:36:45Z

Whops sorry, I didn't notice your question. eslint-disable-next-line is fine.

lightmare · 2021-11-05T22:17:17Z

Rebased on main, and replaced the hacky fake-minify-by-regexp with calling terser.

JLHwung · 2021-11-18T15:29:46Z

-      // Remove multiple newlines
-      .replace(/\n{2,}/g, "\n");
+    const source = await minify(fileContents, {
+      compress: false,


Does the default compressor option break babel helper? May leave a note/todo here.

I think we disable mangle because babel helper does not ship with a source map.

compress: true works too, I disabled it only to keep the code as is (compress rewrites some expressions, moves declarations and conditionals into for loop initialization, etc.); if readability is not a concern here, it can be enabled.

As long as debuggability is not affected too much (I want to be able to understand stack traces in bug reports), that's ok.

Yeah the stack traces will be fine since we have disabled mangle, which renames identifiers to the shortest available.

nicolo-ribaudo

Thanks! I went ahead and enabled compression so that we can merge this. I had to tweak the custom plugin we use to handle module.exports because it was causing infinite loops when running on the compressed code.

This obviates the need to carefully handle helper names that cannot be directly used as identifiers, and also very slightly reduces the amount of boilerplate that ends up in babel-standalone.

lightmare · 2021-11-20T10:08:28Z

... it was causing infinite loops when running on the compressed code.

Interesting, haven't noticed that. It's quite likely I disabled compress right after seeing the output, without first running all tests with it. I thought it was purely cosmetic.

lightmare marked this pull request as draft October 12, 2021 17:15

lightmare force-pushed the shrink-helpers-generated branch from 1e711ac to 7410ea6 Compare November 5, 2021 21:37

lightmare changed the title ~~fake-minify helpers-generated.ts~~ minify helpers-generated.ts Nov 5, 2021

lightmare marked this pull request as ready for review November 5, 2021 22:17

JLHwung approved these changes Nov 18, 2021

View reviewed changes

JLHwung added area: helpers PR: Output optimization 🔬 A type of pull request used for our changelog categories labels Nov 18, 2021

nicolo-ribaudo approved these changes Nov 18, 2021

View reviewed changes

lightmare and others added 5 commits November 18, 2021 23:28

export only default object from helpers-generated.ts

c1f6122

This obviates the need to carefully handle helper names that cannot be directly used as identifiers, and also very slightly reduces the amount of boilerplate that ends up in babel-standalone.

minify helpers before lumping them into helpers-generated.ts

b843ea9

chore: gulp generate-runtime-helpers

31bffd7

chore: yarn dedupe

1a2b35f

Don't compress helpers

a0cac58

nicolo-ribaudo force-pushed the shrink-helpers-generated branch from 23983b8 to a0cac58 Compare November 18, 2021 22:35

nicolo-ribaudo merged commit cd77ad1 into babel:main Nov 18, 2021

github-actions Bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Feb 20, 2022

github-actions Bot locked as resolved and limited conversation to collaborators Feb 20, 2022

lightmare deleted the shrink-helpers-generated branch September 2, 2023 19:37

Uh oh!

Conversation

lightmare commented Oct 11, 2021 • edited by gitpod-io Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codesandbox-ci Bot commented Oct 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

babel-bot commented Oct 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JLHwung commented Oct 12, 2021

Uh oh!

lightmare commented Oct 12, 2021

Uh oh!

lightmare commented Oct 12, 2021

Uh oh!

nicolo-ribaudo commented Nov 2, 2021

Uh oh!

lightmare commented Nov 5, 2021

Uh oh!

JLHwung Nov 18, 2021

Choose a reason for hiding this comment

Uh oh!

lightmare Nov 18, 2021

Choose a reason for hiding this comment

Uh oh!

nicolo-ribaudo Nov 18, 2021

Choose a reason for hiding this comment

Uh oh!

JLHwung Nov 18, 2021

Choose a reason for hiding this comment

Uh oh!

nicolo-ribaudo left a comment

Choose a reason for hiding this comment

Uh oh!

lightmare commented Nov 20, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

lightmare commented Oct 11, 2021 •

edited by gitpod-io Bot

Loading

codesandbox-ci Bot commented Oct 11, 2021 •

edited

Loading

babel-bot commented Oct 11, 2021 •

edited

Loading