chore(wasm): 🤖 reduce WASM binary size (#187)

* chore(wasm): 🤖 binary size improvements * chore: 🤖 add changeset * chore: 🤖 use emmalloc for compact size * chore: 🤖 strip location details from wasm for smaller size * chore: 🤖 add optimize_for_size flag * chore: 🤖 check rust versions on ci * chore: 🤖 emsdk v3.1.57 * chore: 🤖 fix ci * chore: 🤖 update changelog
LottieFiles · Jun 26, 2024 · 1f46680 · 1f46680
1 parent 9c11212
commit 1f46680
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 6 deletions.
diff --git a/.changeset/chorewasm_reduce_wasm_binary_size.md b/.changeset/chorewasm_reduce_wasm_binary_size.md
@@ -0,0 +1,17 @@
+---
+default: minor
+---
+
+# chore(wasm): 🤖 reduce WASM binary size
+
+- **WASM Binary Optimization:**
+
+  - Applied the `-Oz` flag with `emcc` for size optimization.
+  - Used the compact `emmalloc` allocator.
+  - Used the rust nightly toolchain to remove location details and panic string formatting for a smaller binary size.
+  - Reduced binary size by ~142 KB (from 1,245,102 bytes to 1,099,243 bytes).
+
+- **JavaScript Glue Optimization:**
+
+  - Enabled the Closure compiler with the `--closure=1` flag.
+  - Reduced glue code size by ~36.88 KB (from 67,964 bytes to 30,197 bytes).
diff --git a/.mac-setup.sh b/.mac-setup.sh
@@ -66,6 +66,12 @@ rustup target add aarch64-linux-android \
   aarch64-apple-ios-sim \
   wasm32-unknown-emscripten
 
+
+echo "Installing nightly toolchain"
+rustup install nightly 
+rustup component add rust-src --toolchain nightly 
+rustup target add wasm32-unknown-emscripten --toolchain nightly
+
 echo
 echo "Install cargo dependencies"
 cargo install uniffi-bindgen-cpp \

diff --git a/Makefile b/Makefile
@@ -246,11 +246,12 @@ exe_suffix = 'js'
 [built-in options]
 cpp_args = ['-Wshift-negative-value', '-flto', '-Oz', '-ffunction-sections', '-fdata-sections']
 cpp_link_args = [
+	'-sMALLOC=emmalloc',
 	'-Wl,-u,htons',
 	'-Wl,-u,ntohs',
 	'-Wl,-u,htonl',
 	'-Wshift-negative-value',
-	'-flto', '-Os', '--bind', '-sWASM=1',
+	'-flto', '-Oz', '--bind', '-sWASM=1',
 	'-sALLOW_MEMORY_GROWTH=1',
 	'-sFORCE_FILESYSTEM=0',
 	'-sMODULARIZE=1',
@@ -263,7 +264,7 @@ cpp_link_args = [
 	'--no-entry',
 	'--strip-all',
 	'--emit-tsd=${WASM_MODULE}.d.ts',
-	'--minify=0']
+	'--closure=1']
 
 [host_machine]
 system = '$(SYSTEM)'
@@ -355,11 +356,20 @@ define CLEAN_LIBGJPEG
 endef
 
 define CARGO_BUILD
-	source $(EMSDK_DIR)/$(EMSDK)_env.sh && \
+	if [ "$(CARGO_TARGET)" = "wasm32-unknown-emscripten" ]; then \
+		source $(EMSDK_DIR)/$(EMSDK)_env.sh && \
+		RUSTFLAGS="-Zlocation-detail=none" cargo +nightly build \
+		-Z build-std=std,panic_abort \
+		-Z build-std-features="panic_immediate_abort,optimize_for_size" \
+		--manifest-path $(PROJECT_DIR)/Cargo.toml \
+		--target $(CARGO_TARGET) \
+		--release; \
+	else \
 		cargo build \
 		--manifest-path $(PROJECT_DIR)/Cargo.toml \
 		--target $(CARGO_TARGET) \
-		--release
+		--release; \
+	fi
 endef
 
 define UNIFFI_BINDINGS_BUILD

diff --git a/dotlottie-ffi/Cargo.wasm.toml b/dotlottie-ffi/Cargo.wasm.toml
@@ -6,7 +6,7 @@ build = "build.rs"
 
 [profile.release]
 lto = true
-opt-level = "s"
+opt-level = "z"
 strip = true 
 codegen-units = 1
 panic = "abort" 

diff --git a/web-example.html b/web-example.html
@@ -6,6 +6,7 @@
     <title>WASM test</title>
   </head>
   <body>
+    <h1>Test</h1>
     <div style="width: 800px">
       <label for="fit">Fit:</label>
       <select id="fit">
@@ -133,7 +134,7 @@
 
       const data = await fetch(
         // "https://lottie.host/5c89381e-0d1a-4422-8247-f5b7e4b3c4e2/mqs5juC4PW.lottie"
-        "./demo-player/src/theming_example.lottie"
+        "./examples/demo-player/src/theming_example.lottie"
         // "https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie",
         // "https://lottie.host/edff17eb-9a84-41f7-810a-22b94fbf9143/uYveqJ1Kqn.lottie"
       ).then((res) => res.arrayBuffer());