search

asciidoctor / asciidoctor.js

:scroll: A JavaScript port of Asciidoctor, a modern implementation of AsciiDoc
https://asciidoctor.org
MIT License
738 stars 135 forks source link

Document how to create an highly optimized version of Asciidoctor.js (browser) #655

Open ggrossetie opened 5 years ago

ggrossetie commented 5 years ago

https://github.com/asciidoctor/asciidoctor.js/issues/647#issuecomment-452270256

ggrossetie commented 5 years ago

Prerequisites

Initial size

$ ls -s build/asciidoctor-browser.js
1808 build/asciidoctor-browser.js

Minify withGoogle Clojure Compiler in ADVANCED mode

java -jar closure-compiler-v20190121.jar --jscomp_off=undefinedVars --js_output_file=build/asciidoctor-browser.min.js --compilation_level=ADVANCED build/asciidoctor-browser.js
$ ls -s build/asciidoctor-browser.min.js
636 build/asciidoctor-browser.min.js

Gzip with gzip -9

gzip -9 < build/asciidoctor-browser.min.js > build/asciidoctor-browser.min.js.gz
$ ls -s build/asciidoctor-browser.min.js.gz 
180 build/asciidoctor-browser.min.js.gz

Summary

The file size decreased by a factor of 10, from 1808 Kbytes to 180 Kbytes.

//cc @rmannibucau @mojavelinux

mojavelinux commented 5 years ago

That reduction in size is stunning! Fantastic work!

rmannibucau commented 5 years ago

Sounds awesome, thanks a lot!

ggrossetie commented 5 years ago

I'm now down to 168 Kbytes with https://github.com/asciidoctor/asciidoctor.js/pull/669

1704 build/asciidoctor-browser.js
596 build/asciidoctor-browser.min.js
168 build/asciidoctor-browser.min.js.gz
mojavelinux commented 5 years ago

:open_mouth: Aaaaamazing.

mojavelinux commented 5 years ago

@Mogztter are these numbers still accurate on master (using Asciidoctor 2)? I'm getting 633K after running the closure compiler and 180K after running gzip on that result.

mojavelinux commented 5 years ago

I see in the 2.0.0 RC2 release, the size of the minified file is 627K.

ggrossetie commented 5 years ago

Yes the minified+gzip should be around 180K.

mojavelinux commented 5 years ago

Gotcha. So we crept up a little bit from your last report, but not by too much.

I just realized we could probably get rid of the Float#truncate patch. Opal implements precision on truncate, so there's no reason to have that require pulled in. It won't save much, but it's something.

mojavelinux commented 5 years ago

@Mogztter I was thinking you might be able to find unless RUBY_ENGINE blocks and strip the empty block (though perhaps the optimizer already does that). (Though, perhaps Opal should leave these blocks behind in the first place).

For example:

unless RUBY_ENGINE == 'opal'
  puts 'not opal'
end

produces

(function(Opal) {
  var self = Opal.top, $nesting = [], nil = Opal.nil, $$$ = Opal.const_get_qualified, $$ = Opal.const_get_relative, $breaker = Opal.breaker, $slice = Opal.slice;

  Opal.add_stubs(['$==']);
  if ($$($nesting, 'RUBY_ENGINE')['$==']("opal")) {
    return nil
  } else {
    return nil
  }
})(Opal);