How to use Twiggy with wasm-pack?

[Storyyeller]

I am using wasm-pack to compile my project to a wasm file, and attempted to use Twiggy to profile the code size, following the online documentation. However, the output of Twiggy was completely useless.

Shallow Bytes │ Shallow % │ Item
───────────────┼───────────┼───────────────────────────────────────────────────────────────
        303544 ┊    35.90% ┊ data[664]
         39116 ┊     4.63% ┊ code[0]
         21903 ┊     2.59% ┊ data[663]
         21351 ┊     2.53% ┊ code[1]
         14714 ┊     1.74% ┊ code[2]
          9370 ┊     1.11% ┊ code[3]
          7535 ┊     0.89% ┊ code[4]
          7463 ┊     0.88% ┊ code[5]
          6627 ┊     0.78% ┊ code[6]
          5863 ┊     0.69% ┊ code[7]
          5408 ┊     0.64% ┊ code[8]
          4212 ┊     0.50% ┊ code[9]
          3697 ┊     0.44% ┊ code[10]

I'm guessing that Twiggy doesn't work on wasm files where the debug information was stripped, but I can't find any way to make wasm-pack output that information, and it seems counter productive to reducing binary size in any case. Is there any way to use Twiggy with wasm-pack? It seems like a strange oversight that the two tools recommended for working with wasm are completely incompatible.

[Storyyeller]

Apparently, I'm not the only one to run into this issue: #439

[bjorn3]

According to the manual if you pass --profiling to wasm-pack build it includes debuginfo, but still enables optimizations. https://rustwasm.github.io/wasm-pack/book/commands/build.html#profile

[Storyyeller]

Unfortunately, that doesn't actually work. The closest I could get it was specifying the wasm opt flags ['-g', '-O'] in the cargo.toml file.

[package.metadata.wasm-pack.profile.profiling]
wasm-opt = ['-g', '-O']

[maple-leaf]

I managed to get more info by using wasm-pack build --dev to build. Note: if you change target to web with -t web, twiggy will provide less info for some reason.

The analysis of using regex.

        531370 ┊    19.09% ┊ "function names" subsection
        336759 ┊    12.10% ┊ data[0]
         47796 ┊     1.72% ┊ regex::re_unicode::Regex::shortest_match_at::hdf4f857c649196e5
         21403 ┊     0.77% ┊ aho_corasick::ahocorasick::AhoCorasick<S>::find::h3d5a274851602351
         19576 ┊     0.70% ┊ regex_syntax::ast::parse::ParserI<P>::parse_with_comments::h21852c660fb8988a
         16352 ┊     0.59% ┊ <regex_syntax::hir::translate::TranslatorI as regex_syntax::ast::visitor::Visitor>::visit_post::ha2324369e0aa9a68
         15516 ┊     0.56% ┊ regex_syntax::ast::parse::ParserI<P>::parse_escape::h2e4ed5a1e73bcf5c
         13026 ┊     0.47% ┊ regex_syntax::ast::parse::ParserI<P>::parse_group::h956b6a2edfdf23cc
         12850 ┊     0.46% ┊ <regex_syntax::hir::translate::TranslatorI as regex_syntax::ast::visitor::Visitor>::visit_class_set_item_post::ha37f2a1d66223106
          9710 ┊     0.35% ┊ regex_syntax::ast::parse::ParserI<P>::parse_set_class_range::h27cb04737f232d85
          9493 ┊     0.34% ┊ regex_syntax::ast::parse::ParserI<P>::parse_counted_repetition::hd2429643d43f50df
          9482 ┊     0.34% ┊ regex_syntax::ast::parse::ParserI<P>::parse_set_class::h2577d543e78449b7
          8643 ┊     0.31% ┊ regex_syntax::ast::parse::ParserI<P>::parse_unicode_class::hfbd36248b3a50547
          8491 ┊     0.31% ┊ regex_syntax::ast::parse::ParserI<P>::pop_group::h5521da32267e76b3
          6574 ┊     0.24% ┊ regex::exec::ExecBuilder::build::h4ed57b2987c6e6ac
          6397 ┊     0.23% ┊ regex_syntax::ast::visitor::HeapVisitor::visit::hfe706dac1ff56a8c
          6380 ┊     0.23% ┊ regex_syntax::ast::parse::ParserI<P>::parse_set_class_open::h4045440fd957ac08
          6368 ┊     0.23% ┊ regex_syntax::ast::parse::ParserI<P>::parse_flags::ha69587f7cd7c2898
          6330 ┊     0.23% ┊ regex::compile::Compiler::c_alternate::h9a15831fea455dac
          5854 ┊     0.21% ┊ aho_corasick::automaton::Automaton::leftmost_find_at_no_state::h3648365e35bd44c0
          5854 ┊     0.21% ┊ aho_corasick::automaton::Automaton::leftmost_find_at_no_state::h462f687c50e7acfa
          5854 ┊     0.21% ┊ aho_corasick::automaton::Auto

And by the way, is there a way to reduce the size of the top two? Thanks.

[DaanA32]

Having the same issue as @maple-leaf but using seed-rs framework

Shallow Bytes │ Shallow % │ Item
───────────────┼───────────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────
       1367089 ┊    20.69% ┊ "function names" subsection
        662134 ┊    10.02% ┊ data[0]
        243414 ┊     3.68% ┊ <regex::exec::ExecNoSync as regex::re_trait::RegularExpression>::captures_read_at::h0e30d0922c9474d0
        103392 ┊     1.56% ┊ rand_chacha::guts::refill_wide::h38b33643ee6eb687
         47647 ┊     0.72% ┊ regex::re_unicode::Regex::shortest_match_at::h55ac3d111d71dfb6
         33968 ┊     0.51% ┊ <seed::dom_entity_names::attributes::attribute_names::At as core::convert::From<T>>::from::hcc7ccb6f1c7d1a0c
         21278 ┊     0.32% ┊ aho_corasick::ahocorasick::AhoCorasick<S>::find::h2ea4b9e334137f0a
         21141 ┊     0.32% ┊ seed::dom_entity_names::styles::style_names::St::as_str::h56cfb203770b6a0e
         19614 ┊     0.30% ┊ regex_syntax::ast::parse::ParserI<P>::parse_with_comments::h81c3ca5b3f8f2d7e
         18991 ┊     0.29% ┊ seed::dom_entity_names::attributes::attribute_names::At::as_str::hc1d7f096866231b4
         16398 ┊     0.25% ┊ <regex_syntax::hir::translate::TranslatorI as regex_syntax::ast::visitor::Visitor>::visit_post::hc54f8bad1d2fd2d9
         15591 ┊     0.24% ┊ regex_syntax::ast::parse::ParserI<P>::parse_escape::h0552b33eddd46ec1
         15347 ┊     0.23% ┊ <seed::dom_entity_names::tags::tag_names::Tag as core::convert::From<T>>::from::h3dbb5db97e568a1b
         14317 ┊     0.22% ┊ redacted::views::text_input::view_input::h8ff455042730afa1
         14317 ┊     0.22% ┊ redacted::views::text_input::view_input::haa798277c5e81ae2
       3993010 ┊    60.43% ┊ ... and 19600 more.
       6607648 ┊   100.00% ┊ Σ [19615 Total Rows]

[kdy1]

[package.metadata.wasm-pack.profile.release]
wasm-opt = ['-g', '-O']

worked for me.

[AlexEne]

I'll close this as I think the answer above solves it. If there are still issues, please reopen it and I'll try to reproduce it.

[mcclure]

Hi, this was closed but I do not think the problem is resolved.

The issue here (twiggy running in my default configuration with no symbols) was the first and largest problem I hit running Twiggy, but there was nothing I found in the documentation to guide me in building my app for Twiggy support and the answer turned out to be in a closed issue. Not easy to find.

After finding this issue I was able to get twiggy to work by using both --dev and the wasm-opt cargo stanza above.

My suggestion would be to add a section to the "Twiggy guide" explaining what kinds of things Twiggy needs to provide useful graphs with symbols. Mentioning the two wasm-pack specific issues as well as strip= would probably be appropriate.

Thanks