From 1a8973dfc6f72def4962f84b6a9e5c4d19a4b481 Mon Sep 17 00:00:00 2001 From: Johannes Maas Date: Fri, 20 Mar 2020 23:14:52 +0100 Subject: [PATCH] Replace uglifyjs with terser terser does not require two passes and does everything with one call. --- hints/optimize.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/hints/optimize.md b/hints/optimize.md index 92c714b77..df3df297f 100644 --- a/hints/optimize.md +++ b/hints/optimize.md @@ -15,20 +15,18 @@ Okay, but how do we get those numbers? Step one is to compile with the `--optimize` flag. This does things like shortening record field names and unboxing values. -Step two is to call `uglifyjs` with a bunch of special flags. The flags unlock optimizations that are unreliable in normal JS code, but because Elm does not have side-effects, they work fine for us! +Step two is to call `terser` with a bunch of special flags. The flags unlock optimizations that are unreliable in normal JS code, but because Elm does not have side-effects, they work fine for us! Putting those together, here is how I would optimize `src/Main.elm` with two terminal commands: ```bash elm make src/Main.elm --optimize --output=elm.js -uglifyjs elm.js --compress "pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe" | uglifyjs --mangle --output=elm.min.js +terser elm.js --compress "pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe" --mangle --output=elm.min.js ``` After this you will have an `elm.js` and a significantly smaller `elm.min.js` file! -**Note 1:** `uglifyjs` is called twice there. First to `--compress` and second to `--mangle`. This is necessary! Otherwise `uglifyjs` will ignore our `pure_funcs` flag. - -**Note 2:** If the `uglifyjs` command is not available in your terminal, you can run the command `npm install uglify-js --global` to download it. You probably already have `npm` from getting `elm repl` working, but if not, it is bundled with [nodejs](https://nodejs.org/). +**Note:** If the `terser` command is not available in your terminal, you can run the command `npm install terser --global` to download it. You probably already have `npm` from getting `elm repl` working, but if not, it is bundled with [nodejs](https://nodejs.org/). ## Scripts @@ -46,7 +44,7 @@ min="elm.min.js" elm make --optimize --output=$js $@ -uglifyjs $js --compress "pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe" | uglifyjs --mangle --output=$min +terser $js --compress "pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe" --mangle --output=$min echo "Initial size: $(cat $js | wc -c) bytes ($js)" echo "Minified size:$(cat $min | wc -c) bytes ($min)" @@ -55,5 +53,5 @@ echo "Gzipped size: $(cat $min | gzip -c | wc -c) bytes" It also prints out all the asset sizes for you! Your server should be configured to gzip the assets it sends, so the last line is telling you how many bytes would _actually_ get sent to the user. -Again, the important commands are `elm` and `uglifyjs` which work on any platform, so it should not be too tough to do something similar on Windows. +Again, the important commands are `elm` and `terser` which work on any platform, so it should not be too tough to do something similar on Windows.