Skip to content

Commit

Permalink
Replace uglifyjs with terser
Browse files Browse the repository at this point in the history
Uglifyjs is abanoned. Additionally, terser does not require two passes and does everything with one call.
  • Loading branch information
j-maas committed Mar 20, 2020
1 parent 3867036 commit 8d04ed6
Showing 1 changed file with 5 additions and 7 deletions.
12 changes: 5 additions & 7 deletions hints/optimize.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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)"
Expand All @@ -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.

0 comments on commit 8d04ed6

Please sign in to comment.