Integrate wasm-opt into the CLI (#2434)

* integrate wasm-opt

* include wasm opt configuration in the default dioxus.toml

packages/cli/src/assets/dioxus.toml

@@ -17,6 +17,10 @@ asset_dir = "public"
 # hot reload by default
 hot_reload = true
 
+[web.wasm_opt]
+# The level wasm-opt should target. z is the smallest. 4 is the fastest.
+level = "4"
+
 [web.app]
 
 # HTML title tag content

packages/cli/src/builder.rs

@@ -8,7 +8,7 @@ use crate::{
 };
 use anyhow::Context;
 use cargo_metadata::{diagnostic::Diagnostic, Message};
-use dioxus_cli_config::{crate_root, CrateConfig, ExecutableType};
+use dioxus_cli_config::{crate_root, CrateConfig, ExecutableType, WasmOptLevel};
 use indicatif::{ProgressBar, ProgressStyle};
 use lazy_static::lazy_static;
 use manganis_cli_support::{AssetManifest, ManganisSupportGuard};
@@ -174,15 +174,18 @@ pub fn build_web(
         // [3] Bindgen the final binary for use easy linking
         let mut bindgen_builder = Bindgen::new();
 
+        let keep_debug = dioxus_config.web.wasm_opt.debug || (!config.release);
+
         bindgen_builder
             .input_path(&input_path)
             .web(true)
             .unwrap()
-            .debug(true)
-            .demangle(true)
-            .keep_debug(true)
-            .remove_name_section(false)
-            .remove_producers_section(false)
+            .debug(keep_debug)
+            .demangle(keep_debug)
+            .keep_debug(keep_debug)
+            .reference_types(true)
+            .remove_name_section(!keep_debug)
+            .remove_producers_section(!keep_debug)
             .out_name(&dioxus_config.application.name)
             .generate(&bindgen_outdir)
             .unwrap();
@@ -197,43 +200,33 @@ pub fn build_web(
         run_wasm_bindgen();
     }
 
-    // check binaryen:wasm-opt tool
-    tracing::info!("Running optimization with wasm-opt...");
-    let dioxus_tools = dioxus_config.application.tools.clone();
-    if dioxus_tools.contains_key("binaryen") {
-        let info = dioxus_tools.get("binaryen").unwrap();
-        let binaryen = crate::tools::Tool::Binaryen;
-
-        if binaryen.is_installed() {
-            if let Some(sub) = info.as_table() {
-                if sub.contains_key("wasm_opt")
-                    && sub.get("wasm_opt").unwrap().as_bool().unwrap_or(false)
-                {
-                    tracing::info!("Optimizing WASM size with wasm-opt...");
-                    let target_file = out_dir
-                        .join("assets")
-                        .join("dioxus")
-                        .join(format!("{}_bg.wasm", dioxus_config.application.name));
-                    if target_file.is_file() {
-                        let mut args = vec![
-                            target_file.to_str().unwrap(),
-                            "-o",
-                            target_file.to_str().unwrap(),
-                        ];
-                        if config.release {
-                            args.push("-Oz");
-                        }
-                        binaryen.call("wasm-opt", args)?;
-                    }
-                }
-            }
-        } else {
-            tracing::warn!(
-                "Binaryen tool not found, you can use `dx tool add binaryen` to install it."
-            );
-        }
-    } else {
-        tracing::info!("Skipping optimization with wasm-opt, binaryen tool not found.");
+    // Run wasm-opt if this is a release build
+    if config.release {
+        tracing::info!("Running optimization with wasm-opt...");
+        let mut options = match dioxus_config.web.wasm_opt.level {
+            WasmOptLevel::Z => wasm_opt::OptimizationOptions::new_optimize_for_size_aggressively(),
+            WasmOptLevel::S => wasm_opt::OptimizationOptions::new_optimize_for_size(),
+            WasmOptLevel::Zero => wasm_opt::OptimizationOptions::new_opt_level_0(),
+            WasmOptLevel::One => wasm_opt::OptimizationOptions::new_opt_level_1(),
+            WasmOptLevel::Two => wasm_opt::OptimizationOptions::new_opt_level_2(),
+            WasmOptLevel::Three => wasm_opt::OptimizationOptions::new_opt_level_3(),
+            WasmOptLevel::Four => wasm_opt::OptimizationOptions::new_opt_level_4(),
+        };
+        let wasm_file = bindgen_outdir.join(format!("{}_bg.wasm", dioxus_config.application.name));
+        let old_size = wasm_file.metadata()?.len();
+        options
+            // WASM bindgen relies on reference types
+            .enable_feature(wasm_opt::Feature::ReferenceTypes)
+            .debug_info(dioxus_config.web.wasm_opt.debug)
+            .run(&wasm_file, &wasm_file)
+            .map_err(|err| Error::Other(anyhow::anyhow!(err)))?;
+        let new_size = wasm_file.metadata()?.len();
+        tracing::info!(
+            "wasm-opt reduced WASM size from {} to {} ({:2}%)",
+            old_size,
+            new_size,
+            (new_size as f64 - old_size as f64) / old_size as f64 * 100.0
+        );
     }
 
     // If pre-compressing is enabled, we can pre_compress the wasm-bindgen output
@@ -242,6 +235,7 @@ pub fn build_web(
     }
 
     // [5][OPTIONAL] If tailwind is enabled and installed we run it to generate the CSS
+    let dioxus_tools = dioxus_config.application.tools.clone();
     if dioxus_tools.contains_key("tailwindcss") {
         let info = dioxus_tools.get("tailwindcss").unwrap();
         let tailwind = crate::tools::Tool::Tailwind;

packages/cli/src/tools.rs

@@ -13,15 +13,10 @@ use tokio::io::AsyncWriteExt;
 
 #[derive(Debug, PartialEq, Eq)]
 pub enum Tool {
-    Binaryen,
     Sass,
     Tailwind,
 }
 
-// pub fn tool_list() -> Vec<&'static str> {
-//     vec!["binaryen", "sass", "tailwindcss"]
-// }
-
 pub fn app_path() -> PathBuf {
     let data_local = dirs::data_local_dir().unwrap();
     let dioxus_dir = data_local.join("dioxus");
@@ -70,7 +65,6 @@ impl Tool {
     /// from str to tool enum
     pub fn from_str(name: &str) -> Option<Self> {
         match name {
-            "binaryen" => Some(Self::Binaryen),
             "sass" => Some(Self::Sass),
             "tailwindcss" => Some(Self::Tailwind),
             _ => None,
@@ -80,7 +74,6 @@ impl Tool {
     /// get current tool name str
     pub fn name(&self) -> &str {
         match self {
-            Self::Binaryen => "binaryen",
             Self::Sass => "sass",
             Self::Tailwind => "tailwindcss",
         }
@@ -89,7 +82,6 @@ impl Tool {
     /// get tool bin dir path
     pub fn bin_path(&self) -> &str {
         match self {
-            Self::Binaryen => "bin",
             Self::Sass => ".",
             Self::Tailwind => ".",
         }
@@ -98,17 +90,6 @@ impl Tool {
     /// get target platform
     pub fn target_platform(&self) -> &str {
         match self {
-            Self::Binaryen => {
-                if cfg!(target_os = "windows") {
-                    "windows"
-                } else if cfg!(target_os = "macos") {
-                    "macos"
-                } else if cfg!(target_os = "linux") {
-                    "linux"
-                } else {
-                    panic!("unsupported platformm");
-                }
-            }
             Self::Sass => {
                 if cfg!(target_os = "windows") {
                     "windows"
@@ -137,7 +118,6 @@ impl Tool {
     /// get tool version
     pub fn tool_version(&self) -> &str {
         match self {
-            Self::Binaryen => "version_105",
             Self::Sass => "1.51.0",
             Self::Tailwind => "v3.1.6",
         }
@@ -146,13 +126,6 @@ impl Tool {
     /// get tool package download url
     pub fn download_url(&self) -> String {
         match self {
-            Self::Binaryen => {
-                format!(
-                    "https://github.com/WebAssembly/binaryen/releases/download/{version}/binaryen-{version}-x86_64-{target}.tar.gz",
-                    version = self.tool_version(),
-                    target = self.target_platform()
-                )
-            }
             Self::Sass => {
                 format!(
                     "https://github.com/sass/dart-sass/releases/download/{version}/dart-sass-{version}-{target}-x64.{extension}",
@@ -179,7 +152,6 @@ impl Tool {
     /// get package extension name
     pub fn extension(&self) -> &str {
         match self {
-            Self::Binaryen => "tar.gz",
             Self::Sass => {
                 if cfg!(target_os = "windows") {
                     "zip"
@@ -226,7 +198,6 @@ impl Tool {
         let tool_path = tools_path();
 
         let dir_name = match self {
-            Self::Binaryen => format!("binaryen-{}", self.tool_version()),
             Self::Sass => "dart-sass".to_string(),
             Self::Tailwind => self.name().to_string(),
         };
@@ -281,13 +252,6 @@ impl Tool {
         let bin_path = tools_path().join(self.name()).join(self.bin_path());
 
         let command_file = match self {
-            Tool::Binaryen => {
-                if cfg!(target_os = "windows") {
-                    format!("{}.exe", command)
-                } else {
-                    command.to_string()
-                }
-            }
             Tool::Sass => {
                 if cfg!(target_os = "windows") {
                     format!("{}.bat", command)