Add minification step

lentil32 · Dec 7, 2023 · 00ec1af · 00ec1af
1 parent 8ec4b5b
commit 00ec1af
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 15 deletions.
diff --git a/method1_deepdive/elm-build.sh b/method1_deepdive/elm-build.sh
@@ -3,18 +3,35 @@
 project_root=$(pwd)
 elm_root=$project_root/src/lib/elm
 
+build_and_uglify() {
+	local js=$1
+	local min=$2
+
+	elm make src/* --output=$js --optimize
+	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
+}
+
 build_example1() {
+	local js="$project_root/static/elm/elm.js"
+	local min="$project_root/static/elm/elm.min.js"
+
 	cd $elm_root/examples1
-	elm make src/* --output=$project_root/static/elm/elm.js --optimize
+	build_and_uglify $js $min
 }
 
 build_example2() {
 	cd $elm_root/examples2
 
 	for elm_file in src/*.elm; do
 		base_name=$(basename "$elm_file" .elm)
-		js_out_path="${project_root}/static/elm/${base_name}.js"
-		elm make "$elm_file" --output="$js_out_path" --optimize
+		js="${project_root}/static/elm/${base_name}.js"
+		min="${project_root}/static/elm/${base_name}.min.js"
+		echo $js
+		echo $min
+		elm make $elm_file --output=$js --optimize
+		build_and_uglify $js $min
 	done
 }
 

diff --git a/method1_deepdive/package.json b/method1_deepdive/package.json
@@ -14,16 +14,16 @@
     "elm:build:examples2": "sh elm-build.sh 2"
   },
   "devDependencies": {
+    "@picocss/pico": "^1.5.10",
     "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/kit": "^1.27.4",
-    "@picocss/pico": "^1.5.10",
     "@types/elm": "^0.19.3",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
+    "uglify-js": "^3.17.4",
     "vite": "^4.4.2"
   },
-  "type": "module",
-  "dependencies": {}
+  "type": "module"
 }
diff --git a/method1_deepdive/pnpm-lock.yaml b/method1_deepdive/pnpm-lock.yaml
diff --git a/method1_deepdive/src/lib/elm/Elm.svelte b/method1_deepdive/src/lib/elm/Elm.svelte
@@ -42,11 +42,11 @@
   import { onMount } from "svelte";
   import { assets } from "$app/paths";
 
-  export let elmJsFilename: string;
-  export let moduleName: string = elmJsFilename;
+  export let elmJsFilename: `${string}.js`;
+  export let moduleName: string;
 
   const elmAssetsDirectory: string = `${assets}/elm`;
-  const elmJsPath: string = `${elmAssetsDirectory}/${elmJsFilename}.js`;
+  const elmJsFilePath: string = `${elmAssetsDirectory}/${elmJsFilename}`;
 
   let elmRoot: Node;
   const handleLoad: Callback = () => {
@@ -58,7 +58,7 @@
   };
 
   onMount(() => {
-    loadScript(elmJsPath, handleLoad);
+    loadScript(elmJsFilePath, handleLoad);
   });
 </script>
 

diff --git a/method1_deepdive/src/routes/js-per-module/+page.svelte b/method1_deepdive/src/routes/js-per-module/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Elm from "$lib/elm/Elm.svelte";
 
-  const elmJsFilenames = ["Hello", "Bye", "Welcome"] as const;
+  const moduleNames = ["Hello", "Bye", "Welcome"] as const;
 </script>
 
 <hgroup>
@@ -11,9 +11,9 @@
   </h5>
 </hgroup>
 <div>
-  {#each elmJsFilenames as elmJsFilename}
-    {#each Array(3) as _, index (`${elmJsFilename}-${index * 3}`)}
-      <Elm {elmJsFilename} />
+  {#each moduleNames as moduleName}
+    {#each Array(3) as _, index (`${moduleName}-${index * 3}`)}
+      <Elm elmJsFilename={`${moduleName}.min.js`} {moduleName} />
     {/each}
   {/each}
 </div>
diff --git a/method1_deepdive/src/routes/one-elm-js/+page.svelte b/method1_deepdive/src/routes/one-elm-js/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Elm from "$lib/elm/Elm.svelte";
 
-  const elmJsFilename = "elm";
+  const elmJsFilename = "elm.min.js";
   const moduleNames = ["Counter", "TextField"] as const;
 </script>