Skip to content

Refactor JavaScript to allow class-based progressive loading #43

@ao5357

Description

@ao5357

At the top level of the JavaScript, register a global (or similar) that contains a mapping of classes/selectors to JavaScript partials that should be loaded when that particular class is present in the DOM.

Then, write a partial that gets included in the main bundle that determines if the registered partials have been loaded, and if not, loads them. assets/js/partials/twitter-tweet.js does this for the Twitter embed API JS.

Determine whether the compress layout can be applied to individual partials as well as the main bundle. Similarly, determine if there's a viable way to apply terser to create optimized artifacts. If not to either or both that's okay (it's not an acceptance criteria), but we strive for performance.

Once the registry and the handler script have been added and included, port the following partials (as of this writing) to only load conditionally rather than being in the main bundle:

  • docblock.js
  • js--copy-above.js
  • js--share-to-native.js
  • js--youtube.js
  • twitter-tweet.js

We'll want to assess whether the youtube and tweet (especially tweet since it chains a third-party script) partials being conditional are too chained for perceived performance.

With any luck this will allow our main JavaScript bundle size to be smaller while not affecting request chaining performance in automated tests. Eventually we can also port the snipcart code to use the same API structure, though that's not explicitly in the scope of this ticket.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    Status

    Todo

    Status

    To do

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions