Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor JavaScript to allow class-based progressive loading #43

Open
5 tasks
ao5357 opened this issue Oct 24, 2021 · 0 comments
Open
5 tasks

Refactor JavaScript to allow class-based progressive loading #43

ao5357 opened this issue Oct 24, 2021 · 0 comments
Labels
enhancement New feature or request
Milestone

Comments

@ao5357
Copy link
Member

ao5357 commented Oct 24, 2021

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.

@ao5357 ao5357 added the enhancement New feature or request label Oct 24, 2021
@ao5357 ao5357 added this to the 2.0.0 milestone Oct 24, 2021
@ao5357 ao5357 moved this to To do in development Apr 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Todo
Status: To do
Development

No branches or pull requests

1 participant