Enhancement: Use alternate Minify options to save upto ~2KB #34

Closed
opened 7 months ago by trholding · 7 comments

I've hacked the build system to only outpout javascript. Then I used Google Closure Compiler, Terser and Uglify on the JS.

I found that there is a size reduction of upto ~2KB. I also transformed all to FeatherWiki variants to test - all worked except that Uglify generated trash display & non functional wikis.

Here is a size list of usable variants:

Size in bytes: 53,511 GoogleClosureCompiler_Hummingbird.js
Size in bytes: 54,242 Terser_Hummingbird.js
Size in bytes: 54,877 GoogleClosureCompiler_Chickadee.js
Size in bytes: 55,129 GoogleClosureCompiler_Sparrow.js
Size in bytes: 55,303 Hummingbird.js
Size in bytes: 55,534 Terser_Chickadee.js
Size in bytes: 55,700 Terser_Sparrow.js
Size in bytes: 55,825 GoogleClosureCompiler_Bluethroat.js*
Size in bytes: 56,471 Terser_Bluethroat.js
Size in bytes: 56,521 GoogleClosureCompiler_Finch.js
Size in bytes: 56,681 Chickadee.js
Size in bytes: 56,764 Sparrow.js
Size in bytes: 57,008 Terser_Finch.js
Size in bytes: 57,468 GoogleClosureCompiler_Swallow.js
Size in bytes: 57,598 Bluethroat.js
Size in bytes: 57,946 Terser_Swallow.js
Size in bytes: 58,166 Finch.js
Size in bytes: 58,975 GoogleClosureCompiler_Robin.js
Size in bytes: 59,084 Swallow.js
Size in bytes: 59,556 Terser_Robin.js
Size in bytes: 60,378 GoogleClosureCompiler_Dove.js
Size in bytes: 60,615 Robin.js
Size in bytes: 60,883 Terser_Dove.js
Size in bytes: 61,325 GoogleClosureCompiler_Tern.js
Size in bytes: 61,819 Terser_Tern.js
Size in bytes: 62,035 Dove.js
Size in bytes: 62,951 Tern.js

Bold ones are the default esbuild generated ones. Bold Italics are smallest ones.

Example Cli:

terser --compress --mangle -- Dove.js > Terser_Dove.js
google-closure-compiler --js Dove.js > GoogleClosureCompiler_Dove.js

I also found that Terser Generated ones are smaller when gz compressed.

Maybe in the long run using terser or closure compiler would be beneficial as project size grows or we could fit in more code in same size.

I've hacked the build system to only outpout javascript. Then I used Google Closure Compiler, Terser and Uglify on the JS. I found that there is a size reduction of upto ~2KB. I also transformed all to FeatherWiki variants to test - all worked except that Uglify generated trash display & non functional wikis. Here is a size list of usable variants: ***Size in bytes: 53,511 GoogleClosureCompiler_Hummingbird.js*** Size in bytes: 54,242 Terser_Hummingbird.js ***Size in bytes: 54,877 GoogleClosureCompiler_Chickadee.js*** ***Size in bytes: 55,129 GoogleClosureCompiler_Sparrow.js*** **Size in bytes: 55,303 Hummingbird.js** Size in bytes: 55,534 Terser_Chickadee.js Size in bytes: 55,700 Terser_Sparrow.js **Size in bytes: 55,825 GoogleClosureCompiler_Bluethroat.js*** Size in bytes: 56,471 Terser_Bluethroat.js ***Size in bytes: 56,521 GoogleClosureCompiler_Finch.js*** **Size in bytes: 56,681 Chickadee.js** **Size in bytes: 56,764 Sparrow.js** Size in bytes: 57,008 Terser_Finch.js ***Size in bytes: 57,468 GoogleClosureCompiler_Swallow.js*** **Size in bytes: 57,598 Bluethroat.js** Size in bytes: 57,946 Terser_Swallow.js **Size in bytes: 58,166 Finch.js** ***Size in bytes: 58,975 GoogleClosureCompiler_Robin.js*** **Size in bytes: 59,084 Swallow.js** Size in bytes: 59,556 Terser_Robin.js ***Size in bytes: 60,378 GoogleClosureCompiler_Dove.js*** **Size in bytes: 60,615 Robin.js** Size in bytes: 60,883 Terser_Dove.js ***Size in bytes: 61,325 GoogleClosureCompiler_Tern.js*** Size in bytes: 61,819 Terser_Tern.js **Size in bytes: 62,035 Dove.js** **Size in bytes: 62,951 Tern.js** Bold ones are the default esbuild generated ones. Bold Italics are smallest ones. Example Cli: terser --compress --mangle -- Dove.js > Terser_Dove.js google-closure-compiler --js Dove.js > GoogleClosureCompiler_Dove.js I also found that Terser Generated ones are smaller when gz compressed. Maybe in the long run using terser or closure compiler would be beneficial as project size grows or we could fit in more code in same size.
Alamantus added the
enhancement
label 7 months ago
Owner

That's very interesting! I'll have to look at what the output looks like to make sure it'll be usable with upcoming extension features.

Could you share a copy of the modified build script so I can see what changes you made?

That's very interesting! I'll have to look at what the output looks like to make sure it'll be usable with upcoming extension features. Could you share a copy of the modified build script so I can see what changes you made?
Poster

Was only one or two tiny changes. I haven't added anything significant to build script. Just changed it so that it only outputs js. That js is then processed via bash script calling minifiers...

Requirements: Terser and Closure Compiler installed.

  1. Edit FeatherWiki/index.html, keep only: {{jsOutput}} or copy small index.html
  2. Change / copu build script FeatherWiki/scripts/build.js like attached one
  3. Copy HEAD, TAIL,experiment.sh, larger index.html to /FeatherWiki/builds
  4. In root dir run: npm run build -- all
  5. Change to builds and run: experiment.sh
  6. Run ls -l *.js and ls -l *.html lsto see size
  7. Run: python3 -m http.server 8000
  8. Visit localhost:8000 in browser and click each version to test.

Edit experiment.sh to add different cli args to closure compiler and terser - brute/ manual. If optimal cli options found for each variant, then incorp to build script in elegant way.

I'll add it to my git tomo if you need it. I've attached files here.

Was only one or two tiny changes. I haven't added anything significant to build script. Just changed it so that it only outputs js. That js is then processed via bash script calling minifiers... Requirements: Terser and Closure Compiler installed. 1. Edit FeatherWiki/index.html, keep only: {{jsOutput}} or copy small index.html 2. Change / copu build script FeatherWiki/scripts/build.js like attached one 3. Copy HEAD, TAIL,experiment.sh, larger index.html to /FeatherWiki/builds 4. In root dir run: npm run build -- all 5. Change to builds and run: experiment.sh 6. Run ls -l \*.js and ls -l \*.html lsto see size 7. Run: python3 -m http.server 8000 8. Visit localhost:8000 in browser and click each version to test. Edit experiment.sh to add different cli args to closure compiler and terser - brute/ manual. If optimal cli options found for each variant, then incorp to build script in elegant way. I'll add it to my git tomo if you need it. I've attached files here.
Owner

There appears to be a Google Closure Compiler npm package that installs the appropriate binary for the current OS! That will make modifying the build script to use it nearly trivial, which is great news!

Thanks again! I'll use your bash script as reference for the configuration 👍👍

EDIT: Ah shoot, the NPM package JavaScript version isn't maintained anymore since 2020. Maybe that's not a bad thing, but I do prefer up-to-date software wherever I can use it. I'll keep looking into it and see what I can do!

There appears to be a Google Closure Compiler [npm package](https://www.npmjs.com/package/google-closure-compiler) that installs the appropriate binary for the current OS! That will make modifying the build script to use it nearly trivial, which is great news! Thanks again! I'll use your bash script as reference for the configuration 👍👍 EDIT: Ah shoot, the ~~NPM package~~ JavaScript version [isn't maintained anymore since 2020](https://github.com/google/closure-compiler-npm/blob/master/packages/google-closure-compiler-js/readme.md). Maybe that's not a bad thing, but I do prefer up-to-date software wherever I can use it. I'll keep looking into it and see what I can do!
Poster
https://github.com/google/closure-compiler https://github.com/terser/terser
Owner

I got it working! Google Closure Compiler will be used in the next version of Feather Wiki 😄

I got it working! Google Closure Compiler will be used in the next version of Feather Wiki 😄
Poster

Congrats and thanks! Terser is also a good choice. Slightly larger maybe 100-200 bytes for uncompressed wiki, on a compressed wiki, the gain is 1kb-1.5kb. 🥇 :)

Congrats and thanks! Terser is also a good choice. Slightly larger maybe 100-200 bytes for uncompressed wiki, on a compressed wiki, the gain is 1kb-1.5kb. 🥇 :)
Alamantus added this to the 1.3.0: Extension Update milestone 6 months ago
Owner

Thanks again for this! This is being used in version 1.3.0 now

Thanks again for this! This is being used in version 1.3.0 now
Alamantus closed this issue 6 months ago
Sign in to join this conversation.
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Reference: Alamantus/FeatherWiki#34
Loading…
There is no content yet.