Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ngx-quicklink & guess-js

ngx-quicklink & guess-js

livestream video: https://www.facebook.com/wellwind/videos/10219795124334135/

A brief intro for the ngx-quicklink & guess-js, demonstrating the power of these tools and walking through some of their source code.

Avatar for Chad Zhuang

Chad Zhuang

July 31, 2019
Tweet

More Decks by Chad Zhuang

Other Decks in Technology

Transcript

  1. ngx-quicklink • Is the targeted links in the viewport? •

    Intersection Observer API
 • Is browser idle? • requestIdleCallback • 1/60 s - ( JS -> Style -> Layout -> Paint -> Composite )
 • Is connection slow? • navigator.connection.effectiveType • navigator.connection.saveData
 • Prefetches the lazy loaded modules 

  2. ngx-quicklink - implement Determine the logic for preloading and processing

    lazy-loaded Angular modules. • PreloadAllModules - provided by @angular/router • QuicklinkStrategy - provided by ngx-quicklink • NoPreloading - provided by @angular/router
  3. Problem • How much do we know about user?
 •

    Config Manually. • Reconfig

  4. guess-js guess-ga
 Fetch data from GA, learn user’s navigation pattern.

    guess-parser JavaScript framework parsing, implemented route parse. guess-webpack
 Consume guess-ga and guess-parser, provide the config
 of predictive fetching mechanism.
  5. guess-js guess-webpack / vendor.js vendor -> 0.2 about.js -> 0.8

    /about about.js example.js -> 0.8 about.js -> 0.2 ...