Repository navigation
[gui] Speed up the web UI build - #5179
Open
barnabasdomozi wants to merge 1 commit into
Open
barnabasdomozi wants to merge 1 commit into
barnabasdomozi wants to merge 1 commit into
Conversation
barnabasdomozi
requested review from
bruntib and
gulyasgergely902
as code owners
November 6, 2026 15:27
barnabasdomozi
force-pushed
the
webpack_build
branch
from
November 6, 2026 15:33
fc1cad7 to
87fadd2
Compare
A clean build of the web UI (`npm run build`, also run by `make package`) took about 76 seconds. It now takes about 8 seconds. Root causes ----------- 1. The whole Vuetify stylesheet was compiled again for every component. `src/variables.scss` started with `@use 'vuetify/styles'`. Webpack adds this file to the top of every SCSS/Sass `<style>` block, so the full Vuetify CSS (about 350 KB) was compiled and bundled once per component, about 56 times. This was most of the build time. It also made the output twice as big (32 MB instead of 15 MB) and `main.js` 7 MB instead of 1 MB. `main.js` already imports `vuetify/styles` once, so these copies were not needed. 2. The JavaScript minifier was slow. Webpack uses Terser by default, which runs in JavaScript and makes two passes over the code. 3. Babel did more work than needed. Without a browser target it converted all code down to old ES5 syntax, and it also processed the whole Vuetify library from node_modules. Fixes ----- - `variables.scss` now only contains Sass variables, so it no longer outputs any CSS. The `:root` color variables moved to a new `src/global.css` file, imported once from `main.js`. A comment in `variables.scss` explains why CSS must not be put there. - Minify with esbuild (through `minimizer-webpack-plugin`, which webpack already uses) instead of Terser. - Add a fixed "browserslist" target to package.json (Chrome and Edge 80+, Firefox 78+, Safari 14+), and stop running Babel on packages in node_modules. This is the same minimum that Vue, Vuetify and the other libraries already need, because they use ES2020 syntax. It also matches the esbuild target (es2020). - Let webpack clean the `dist` folder (`output.clean`) instead of running `rimraf` before the build. - Clear the webpack cache when any build config file, package.json or .babelrc changes, not only when `webpack.common.js` changes. - Makefile: do not run `npm install` twice when the UI has to be rebuilt. - Remove `vue.config.js`, a leftover from Vue CLI that nothing reads. - Fix `v-model` on a constant in `RunList.vue` and `ListReviewStatusRules.vue` (`itemsPerPageOptions`). esbuild warned that this assignment would throw. It is now a one-way `:items-per-page-options` binding. Results ------- Clean build with an empty cache, measured on the same machine. | | Before | After | | ----------------------- | ------ | ------ | | `npm run build` (total) | 76 s | 8 s | | webpack compile time | 72 s | 6.1 s | | `dist` size | 32 MB | 15 MB | This PR was mainly generated by AI.
barnabasdomozi
force-pushed
the
webpack_build
branch
from
November 6, 2026 16:13
87fadd2 to
d7f45a5
Compare
bruntib
approved these changes
Nov 9, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A clean build of the web UI (
npm run build, also run bymake package)took about 76 seconds. It now takes about 8 seconds.
Root causes
The whole Vuetify stylesheet was compiled again for every component.
src/variables.scssstarted with@use 'vuetify/styles'. Webpack addsthis file to the top of every SCSS/Sass
<style>block, so the fullVuetify CSS (about 350 KB) was compiled and bundled once per component,
about 56 times. This was most of the build time. It also made the output
twice as big (32 MB instead of 15 MB) and
main.js7 MB instead of 1 MB.main.jsalready importsvuetify/stylesonce, so these copies were notneeded.
The JavaScript minifier was slow. Webpack uses Terser by default, which
runs in JavaScript and makes two passes over the code.
Babel did more work than needed. Without a browser target it converted
all code down to old ES5 syntax, and it also processed the whole Vuetify
library from node_modules.
Fixes
variables.scssnow only contains Sass variables, so it no longer outputsany CSS. The
:rootcolor variables moved to a newsrc/global.cssfile,imported once from
main.js. A comment invariables.scssexplains whyCSS must not be put there.
minimizer-webpack-plugin, which webpackalready uses) instead of Terser.
Firefox 78+, Safari 14+), and stop running Babel on packages in
node_modules. This is the same minimum that Vue, Vuetify and the other
libraries already need, because they use ES2020 syntax. It also matches
the esbuild target (es2020).
distfolder (output.clean) instead of runningrimrafbefore the build..babelrc changes, not only when
webpack.common.jschanges.npm installtwice when the UI has to be rebuilt.vue.config.js, a leftover from Vue CLI that nothing reads.v-modelon a constant inRunList.vueandListReviewStatusRules.vue(itemsPerPageOptions). esbuild warned thatthis assignment would throw. It is now a one-way
:items-per-page-optionsbinding.
Results
Clean build with an empty cache, measured on the same machine.
npm run build(total)distsizeThis PR was mainly generated by AI.