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): replace rollup with esbuild #15239

Merged
merged 79 commits into from
Jul 14, 2023
Merged

misc(build): replace rollup with esbuild #15239

merged 79 commits into from
Jul 14, 2023

Conversation

connorjclark
Copy link
Collaborator

@connorjclark connorjclark commented Jul 10, 2023

Closes #13906

  • Removes rollup and replaces with esbuild
  • Introduces esbuild plugins to do the equivalent work of the previous build system - replacing modules, ignoring modules, etc
  • esbuild does not support UMD, but outputting a UMD bundle with a plugin was trivial
  • Continue to use terser for minification - using esbuild's minification will be done in a follow up PR, as it requires non-trivial changes to page functions.

Below is a before/after for build time and bundle sizes


main

hyperfine 'yarn build-all'
# Benchmark 1: yarn build-all
#   Time (mean ± σ):     35.647 s ±  0.623 s    [User: 75.333 s, System: 9.531 s]
#   Range (min … max):   34.846 s … 37.120 s    10 runs

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

hyperfine 'yarn build-devtools'
# Benchmark 1: yarn build-devtools
#   Time (mean ± σ):      9.581 s ±  0.071 s    [User: 15.693 s, System: 2.017 s]
#   Range (min … max):    9.522 s …  9.765 s    10 runs
hyperfine 'yarn build-lr'
# Benchmark 1: yarn build-lr
#   Time (mean ± σ):     11.455 s ±  0.217 s    [User: 16.871 s, System: 3.141 s]
#   Range (min … max):   11.064 s … 11.861 s    10 runs
hyperfine 'yarn build-report'
# Benchmark 1: yarn build-report
#   Time (mean ± σ):      3.616 s ±  0.036 s    [User: 9.840 s, System: 0.846 s]
#   Range (min … max):    3.524 s …  3.662 s    10 runs

wc -c dist/lighthouse-dt-bundle.js
# 1832699 dist/lighthouse-dt-bundle.js
wc -c dist/lightrider/*
#  17934732 dist/lightrider/lighthouse-lr-bundle.js
#   205032 dist/lightrider/report-generator-bundle.js
#    25883 dist/lightrider/static-server.js
#  18165647 total
wc -c dist/report/*
#   311082 dist/report/bundle.esm.js
#   280693 dist/report/bundle.umd.js
#   542253 dist/report/flow.js
#   187932 dist/report/standalone.js
#  1321960 total

esbuild

hyperfine 'yarn build-all'
# Benchmark 1: yarn build-all
#   Time (mean ± σ):     15.875 s ±  0.209 s    [User: 30.394 s, System: 3.066 s]
#   Range (min … max):   15.687 s … 16.436 s    10 runs

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

hyperfine 'yarn build-devtools'
# Benchmark 1: yarn build-devtools
#   Time (mean ± σ):      4.891 s ±  0.034 s    [User: 8.506 s, System: 0.514 s]
#   Range (min … max):    4.846 s …  4.966 s    10 runs
hyperfine 'yarn build-lr'
# Benchmark 1: yarn build-lr
#   Time (mean ± σ):      3.223 s ±  0.023 s    [User: 5.285 s, System: 0.479 s]
#   Range (min … max):    3.186 s …  3.262 s    10 runs
hyperfine 'yarn build-report'
# Benchmark 1: yarn build-report
#   Time (mean ± σ):     775.8 ms ±   5.8 ms    [User: 846.1 ms, System: 156.6 ms]
#   Range (min … max):   767.4 ms … 785.5 ms    10 runs

wc -c dist/lighthouse-dt-bundle.js
# 2383117 dist/lighthouse-dt-bundle.js
wc -c dist/lightrider/*
#  17085572 dist/lightrider/lighthouse-lr-bundle.js
#   190904 dist/lightrider/report-generator-bundle.js
#    22935 dist/lightrider/static-server.js
#  17299411 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

The bundle size increase is significant, but temporary. The next PR will remove terser and use esbuild for minification. Since it will have a number of subtle changes to page functions, I split the PR. As a preview: using esbuild minification for devtools bundle, it takes ~3s total and is currently just ~100K bigger (but may be able to bring this down some)

build/build-viewer.js Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
@connorjclark
Copy link
Collaborator Author

Smokerider, and all tests here, passing!

Copy link
Member

@adamraine adamraine left a comment

Choose a reason for hiding this comment

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

Pretty much LGTM save for the CI failures

entryPoints: ['report/clients/bundle.js'],
outfile: 'dist/report/bundle.umd.js',
bundle: true,
minify: false,
Copy link
Member

Choose a reason for hiding this comment

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

This had terser before, did it need to be this way?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It was on purpose, we only use this in google3 and it gets processed there anyhow.

@connorjclark
Copy link
Collaborator Author

for the CI failures

unrelated to this PR, yarn repo was 404ing

@connorjclark connorjclark merged commit f74b551 into main Jul 14, 2023
24 checks passed
@connorjclark connorjclark deleted the build-esbuild branch July 14, 2023 22:32
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.

Investigate switching to esbuild
5 participants