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

misc(build): bundle with esbuild minification instead of terser #15283

Merged
merged 3 commits into from
Jul 20, 2023

Conversation

connorjclark
Copy link
Collaborator

This brings bundle sizes down to slightly below what they were before #15239 (though #15257 surely helped).

Below are bundle size/build times w/ this PR:


Summary (comparing building with Rollup, to building with esbuild):

  • yarn build-all went from 35.6s to 14.2s
  • yarn build-devtools went from 9.5s to 3s
  • yarn build-report went from 3.6s to 760ms
  • total size of all JS in dist/ went from 22.8 MB to 21.7 MB

Previous numbers found here: #15239

esbuild minifiy:

hyperfine 'yarn build-all'
# Benchmark 1: yarn build-all
#   Time (mean ± σ):     14.205 s ±  0.535 s    [User: 26.779 s, System: 2.923 s]
#   Range (min … max):   13.671 s … 15.080 s    10 runs

wc -c dist/**/*.js | grep total
#  21730853 total

hyperfine 'yarn build-devtools'
# Benchmark 1: yarn build-devtools
#   Time (mean ± σ):      3.033 s ±  0.077 s    [User: 4.915 s, System: 0.405 s]
#   Range (min … max):    2.990 s …  3.250 s    10 runs
hyperfine 'yarn build-lr'
# Benchmark 1: yarn build-lr
#   Time (mean ± σ):      3.181 s ±  0.015 s    [User: 5.283 s, System: 0.463 s]
#   Range (min … max):    3.156 s …  3.208 s    10 runs
hyperfine 'yarn build-report'
# Benchmark 1: yarn build-report
#   Time (mean ± σ):     767.7 ms ±   6.7 ms    [User: 843.4 ms, System: 152.6 ms]
#   Range (min … max):   759.0 ms … 777.4 ms    10 runs

wc -c dist/lighthouse-dt-bundle.js
# 1819992 dist/lighthouse-dt-bundle.js
wc -c dist/lightrider/*
#  16976425 dist/lightrider/lighthouse-lr-bundle.js
#   190904 dist/lightrider/report-generator-bundle.js
#    22935 dist/lightrider/static-server.js
#  17190264 total
wc -c dist/report/*
#   173427 dist/report/bundle.esm.js
#   392055 dist/report/bundle.umd.js
#   529684 dist/report/flow.js
#   175018 dist/report/standalone.js
#  1270184 total

if (!match) throw new Error(`could not find function name for: ${fn}`);
return match[1];
}
getRuntimeFunctionName(truncate);
Copy link
Member

Choose a reason for hiding this comment

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

What is the purpose of this?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Nothing, should be removed.

core/lib/page-functions.js Show resolved Hide resolved
getNodeLabel: getRuntimeFunctionName(getNodeLabel),
getOuterHTMLSnippet: getRuntimeFunctionName(getOuterHTMLSnippet),
getNodeDetails: getRuntimeFunctionName(getNodeDetails),
};
Copy link
Member

Choose a reason for hiding this comment

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

nit: my preference would be for these to be standalone variables (e.g. truncateName). Is there a a a reason these are attached to a record object. It's kind confusing since names only contains the name of some functions.

Copy link
Collaborator Author

@connorjclark connorjclark Jul 19, 2023

Choose a reason for hiding this comment

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

Is there a a a reason these are attached to a record object.

The reason is just organization.

core/gather/gatherers/trace-elements.js Outdated Show resolved Hide resolved
core/gather/driver/execution-context.js Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants