Skip to content

Commit

Permalink
Improves tgui build speed (#79916) (Monkestation#2452)
Browse files Browse the repository at this point in the history 
Swaps out our minimizer, Terser, with esbuildplugin. This is the engine
behind vite. This is a pretty straight forward replacement, let's let
the numbers do the talking:

<details>
<summary>Test environment / My specs</summary>

intel i7-13700kf
32GB RAM
windows 11
intel 660p m.2 SSD
asus 4080 TUF series

</details>

<details>
<summary>Fresh build</summary>

Test steps:

1. Delete `tgui/.yarn/webpack` folder
2. `CTRL SHIFT B`

Results:

![fresh](https://github.com/tgstation/tgstation/assets/42397676/f337366f-2260-41b7-9ad6-f81f6f78e9e7)

terser averages `25.16s`
esbuild averages `19.37s` - 23% faster

</details>

<details>
<summary>Cached build</summary>

(assuming files are already there, CTRL SHIFT B if not)

1. add a comment to an interface file
2. `CTRL SHIFT B`

Results:

![cached](https://github.com/tgstation/tgstation/assets/42397676/89dc1c4b-a5b4-436d-a7e2-86683b6168f4)

terser averages `9s`
esbuild averages `3.52s` - 60.91% faster

</details>

Faster dev environment
N/A nothing player facing

Co-authored-by: Jeremiah <42397676+jlsnow301@users.noreply.github.com>
  • Loading branch information
@Absolucy @jlsnow301
Absolucy and jlsnow301 authored Jun 29, 2024
1 parent 1642176 commit 4de06e1
Show file tree
Hide file tree
Showing 3 changed files with 290 additions and 14 deletions.
2 changes: 1 addition & 1 deletion tgui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"babel-plugin-transform-remove-console": "^6.9.4",
"common": "workspace:*",
"css-loader": "^5.2.7",
"esbuild-loader": "^4.0.2",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-radar": "^0.2.1",
Expand All @@ -53,7 +54,6 @@
"sass": "^1.37.5",
"sass-loader": "^11.1.1",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.4",
"typescript": "^4.9.4",
"url-loader": "^4.1.1",
"webpack": "^5.75.0",
Expand Down
14 changes: 4 additions & 10 deletions tgui/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,17 +144,11 @@ module.exports = (env = {}, argv) => {

// Production build specific options
if (mode === 'production') {
const TerserPlugin = require('terser-webpack-plugin');
const { EsbuildPlugin } = require('esbuild-loader');
config.optimization.minimizer = [
new TerserPlugin({
extractComments: false,
terserOptions: {
ie8: true,
output: {
ascii_only: true,
comments: false,
},
},
new EsbuildPlugin({
target: 'ie8',
css: true,
}),
];
}
Expand Down
288 changes: 285 additions & 3 deletions tgui/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1323,6 +1323,167 @@ __metadata:
languageName: node
linkType: hard

"@esbuild/aix-ppc64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/aix-ppc64@npm:0.21.5"
conditions: os=aix & cpu=ppc64
languageName: node
linkType: hard

"@esbuild/android-arm64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/android-arm64@npm:0.21.5"
conditions: os=android & cpu=arm64
languageName: node
linkType: hard

"@esbuild/android-arm@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/android-arm@npm:0.21.5"
conditions: os=android & cpu=arm
languageName: node
linkType: hard

"@esbuild/android-x64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/android-x64@npm:0.21.5"
conditions: os=android & cpu=x64
languageName: node
linkType: hard

"@esbuild/darwin-arm64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/darwin-arm64@npm:0.21.5"
conditions: os=darwin & cpu=arm64
languageName: node
linkType: hard

"@esbuild/darwin-x64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/darwin-x64@npm:0.21.5"
conditions: os=darwin & cpu=x64
languageName: node
linkType: hard

"@esbuild/freebsd-arm64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/freebsd-arm64@npm:0.21.5"
conditions: os=freebsd & cpu=arm64
languageName: node
linkType: hard

"@esbuild/freebsd-x64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/freebsd-x64@npm:0.21.5"
conditions: os=freebsd & cpu=x64
languageName: node
linkType: hard

"@esbuild/linux-arm64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/linux-arm64@npm:0.21.5"
conditions: os=linux & cpu=arm64
languageName: node
linkType: hard

"@esbuild/linux-arm@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/linux-arm@npm:0.21.5"
conditions: os=linux & cpu=arm
languageName: node
linkType: hard

"@esbuild/linux-ia32@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/linux-ia32@npm:0.21.5"
conditions: os=linux & cpu=ia32
languageName: node
linkType: hard

"@esbuild/linux-loong64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/linux-loong64@npm:0.21.5"
conditions: os=linux & cpu=loong64
languageName: node
linkType: hard

"@esbuild/linux-mips64el@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/linux-mips64el@npm:0.21.5"
conditions: os=linux & cpu=mips64el
languageName: node
linkType: hard

"@esbuild/linux-ppc64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/linux-ppc64@npm:0.21.5"
conditions: os=linux & cpu=ppc64
languageName: node
linkType: hard

"@esbuild/linux-riscv64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/linux-riscv64@npm:0.21.5"
conditions: os=linux & cpu=riscv64
languageName: node
linkType: hard

"@esbuild/linux-s390x@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/linux-s390x@npm:0.21.5"
conditions: os=linux & cpu=s390x
languageName: node
linkType: hard

"@esbuild/linux-x64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/linux-x64@npm:0.21.5"
conditions: os=linux & cpu=x64
languageName: node
linkType: hard

"@esbuild/netbsd-x64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/netbsd-x64@npm:0.21.5"
conditions: os=netbsd & cpu=x64
languageName: node
linkType: hard

"@esbuild/openbsd-x64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/openbsd-x64@npm:0.21.5"
conditions: os=openbsd & cpu=x64
languageName: node
linkType: hard

"@esbuild/sunos-x64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/sunos-x64@npm:0.21.5"
conditions: os=sunos & cpu=x64
languageName: node
linkType: hard

"@esbuild/win32-arm64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/win32-arm64@npm:0.21.5"
conditions: os=win32 & cpu=arm64
languageName: node
linkType: hard

"@esbuild/win32-ia32@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/win32-ia32@npm:0.21.5"
conditions: os=win32 & cpu=ia32
languageName: node
linkType: hard

"@esbuild/win32-x64@npm:0.21.5":
version: 0.21.5
resolution: "@esbuild/win32-x64@npm:0.21.5"
conditions: os=win32 & cpu=x64
languageName: node
linkType: hard

"@eslint/eslintrc@npm:^0.4.3":
version: 0.4.3
resolution: "@eslint/eslintrc@npm:0.4.3"
Expand Down Expand Up @@ -3761,6 +3922,100 @@ __metadata:
languageName: node
linkType: hard

"esbuild-loader@npm:^4.0.2":
version: 4.2.0
resolution: "esbuild-loader@npm:4.2.0"
dependencies:
esbuild: ^0.21.0
get-tsconfig: ^4.7.0
loader-utils: ^2.0.4
webpack-sources: ^1.4.3
peerDependencies:
webpack: ^4.40.0 || ^5.0.0
checksum: feab2c1936e480b7c5108b5f16dae03c70abe8a4ea0f3268df3ff95295012dfefb0dac35780ee530ee788e9e2dcc4243e2cbb14537e2404c552e12e89653ea56
languageName: node
linkType: hard

"esbuild@npm:^0.21.0":
version: 0.21.5
resolution: "esbuild@npm:0.21.5"
dependencies:
"@esbuild/aix-ppc64": 0.21.5
"@esbuild/android-arm": 0.21.5
"@esbuild/android-arm64": 0.21.5
"@esbuild/android-x64": 0.21.5
"@esbuild/darwin-arm64": 0.21.5
"@esbuild/darwin-x64": 0.21.5
"@esbuild/freebsd-arm64": 0.21.5
"@esbuild/freebsd-x64": 0.21.5
"@esbuild/linux-arm": 0.21.5
"@esbuild/linux-arm64": 0.21.5
"@esbuild/linux-ia32": 0.21.5
"@esbuild/linux-loong64": 0.21.5
"@esbuild/linux-mips64el": 0.21.5
"@esbuild/linux-ppc64": 0.21.5
"@esbuild/linux-riscv64": 0.21.5
"@esbuild/linux-s390x": 0.21.5
"@esbuild/linux-x64": 0.21.5
"@esbuild/netbsd-x64": 0.21.5
"@esbuild/openbsd-x64": 0.21.5
"@esbuild/sunos-x64": 0.21.5
"@esbuild/win32-arm64": 0.21.5
"@esbuild/win32-ia32": 0.21.5
"@esbuild/win32-x64": 0.21.5
dependenciesMeta:
"@esbuild/aix-ppc64":
optional: true
"@esbuild/android-arm":
optional: true
"@esbuild/android-arm64":
optional: true
"@esbuild/android-x64":
optional: true
"@esbuild/darwin-arm64":
optional: true
"@esbuild/darwin-x64":
optional: true
"@esbuild/freebsd-arm64":
optional: true
"@esbuild/freebsd-x64":
optional: true
"@esbuild/linux-arm":
optional: true
"@esbuild/linux-arm64":
optional: true
"@esbuild/linux-ia32":
optional: true
"@esbuild/linux-loong64":
optional: true
"@esbuild/linux-mips64el":
optional: true
"@esbuild/linux-ppc64":
optional: true
"@esbuild/linux-riscv64":
optional: true
"@esbuild/linux-s390x":
optional: true
"@esbuild/linux-x64":
optional: true
"@esbuild/netbsd-x64":
optional: true
"@esbuild/openbsd-x64":
optional: true
"@esbuild/sunos-x64":
optional: true
"@esbuild/win32-arm64":
optional: true
"@esbuild/win32-ia32":
optional: true
"@esbuild/win32-x64":
optional: true
bin:
esbuild: bin/esbuild
checksum: 2911c7b50b23a9df59a7d6d4cdd3a4f85855787f374dce751148dbb13305e0ce7e880dde1608c2ab7a927fc6cec3587b80995f7fc87a64b455f8b70b55fd8ec1
languageName: node
linkType: hard

"escalade@npm:^3.1.1":
version: 3.1.1
resolution: "escalade@npm:3.1.1"
Expand Down Expand Up @@ -4568,6 +4823,15 @@ __metadata:
languageName: node
linkType: hard

"get-tsconfig@npm:^4.7.0":
version: 4.7.5
resolution: "get-tsconfig@npm:4.7.5"
dependencies:
resolve-pkg-maps: ^1.0.0
checksum: e5b271fae2b4cd1869bbfc58db56983026cc4a08fdba988725a6edd55d04101507de154722503a22ee35920898ff9bdcba71f99d93b17df35dddb8e8a2ad91be
languageName: node
linkType: hard

"getpass@npm:^0.1.1":
version: 0.1.7
resolution: "getpass@npm:0.1.7"
Expand Down Expand Up @@ -6136,6 +6400,17 @@ __metadata:
languageName: node
linkType: hard

"loader-utils@npm:^2.0.4":
version: 2.0.4
resolution: "loader-utils@npm:2.0.4"
dependencies:
big.js: ^5.2.2
emojis-list: ^3.0.0
json5: ^2.1.2
checksum: a5281f5fff1eaa310ad5e1164095689443630f3411e927f95031ab4fb83b4a98f388185bb1fe949e8ab8d4247004336a625e9255c22122b815bb9a4c5d8fc3b7
languageName: node
linkType: hard

"locate-path@npm:^5.0.0":
version: 5.0.0
resolution: "locate-path@npm:5.0.0"
Expand Down Expand Up @@ -7514,6 +7789,13 @@ __metadata:
languageName: node
linkType: hard

"resolve-pkg-maps@npm:^1.0.0":
version: 1.0.0
resolution: "resolve-pkg-maps@npm:1.0.0"
checksum: 1012afc566b3fdb190a6309cc37ef3b2dcc35dff5fa6683a9d00cd25c3247edfbc4691b91078c97adc82a29b77a2660c30d791d65dab4fc78bfc473f60289977
languageName: node
linkType: hard

"resolve@^1.14.2, resolve@^1.20.0, resolve@^1.9.0":
version: 1.20.0
resolution: "resolve@npm:1.20.0"
Expand Down Expand Up @@ -8379,7 +8661,7 @@ resolve@^2.0.0-next.3:
languageName: node
linkType: hard

"terser-webpack-plugin@npm:^5.1.3, terser-webpack-plugin@npm:^5.1.4":
"terser-webpack-plugin@npm:^5.1.3":
version: 5.1.4
resolution: "terser-webpack-plugin@npm:5.1.4"
dependencies:
Expand Down Expand Up @@ -8519,6 +8801,7 @@ resolve@^2.0.0-next.3:
babel-plugin-transform-remove-console: ^6.9.4
common: "workspace:*"
css-loader: ^5.2.7
esbuild-loader: ^4.0.2
eslint: ^7.32.0
eslint-config-prettier: ^8.5.0
eslint-plugin-radar: ^0.2.1
Expand All @@ -8534,7 +8817,6 @@ resolve@^2.0.0-next.3:
sass: ^1.37.5
sass-loader: ^11.1.1
style-loader: ^2.0.0
terser-webpack-plugin: ^5.1.4
typescript: ^4.9.4
url-loader: ^4.1.1
webpack: ^5.75.0
Expand Down Expand Up @@ -9136,7 +9418,7 @@ resolve@^2.0.0-next.3:
languageName: node
linkType: hard

"webpack-sources@npm:^1.1.0":
"webpack-sources@npm:^1.1.0, webpack-sources@npm:^1.4.3":
version: 1.4.3
resolution: "webpack-sources@npm:1.4.3"
dependencies:
Expand Down

0 comments on commit 4de06e1

Please # to comment.