Add minification for elm.js

.devcontainer/Dockerfile

@@ -19,6 +19,7 @@ RUN export DEBIAN_FRONTEND=noninteractive \
     elm-test@${ELM_TEST_VERSION} \
     elm-format@${ELM_FORMAT_VERSION} \
     elm-live@${ELM_LIVE_VERSION} \
+    [email protected] \
     #
     # [Optional] Update UID/GID if needed
     && if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \

.github/workflows/main.yml

@@ -27,9 +27,9 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: "18"
-      - run: npm install -g elm
+      - run: npm install -g elm@latest-0.19.1 [email protected]
       - name: make
-        run: elm make src/Main.elm --output=public/main.js
+        run: ./optimize.sh src/Main.elm
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

.gitignore

@@ -1,3 +1,4 @@
 elm-stuff
 elm.js
+elm.min.js
 main.js

.vscode/tasks.json

@@ -6,7 +6,7 @@
     {
       "label": "start dev server",
       "type": "shell",
-      "command": "elm-live src/Main.elm --dir=./public -- --output=public/main.js",
+      "command": "elm-live src/Main.elm --dir=./public -- --output=public/elm.js",
       "problemMatcher": [],
       "group": {
         "kind": "build",

optimize.sh

@@ -0,0 +1,16 @@
+#!/bin/sh
+
+set -e
+
+js="public/elm.js"
+min="public/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
+
+echo "Compiled size:$(wc $js -c) bytes  ($js)"
+echo "Minified size:$(wc $min -c) bytes  ($min)"
+echo "Gzipped size: $(gzip $min -c | wc -c) bytes"
+
+cp $min $js

public/index.html

@@ -6,7 +6,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="main.css">
   <link rel="preload" href="CascadiaMono.woff2" as="font" type="font/woff2" crossorigin>
-  <script src="main.js"></script>
+  <script src="elm.js"></script>
   <script src="https://unpkg.com/@panzoom/[email protected]/dist/panzoom.min.js"></script>
   <meta name="viewport" content="width=device-width, height=100vh, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
   <meta name="og:url" content="https://scrobburl.com" />