Reduce DOPP JavaScript size
in progress
Tobe Osakwe
We prioritize performance. In order to load and display discounted prices as quickly as possible on online stores, we will use techniques like code-splitting to minimize the size of the DOPP JavaScript.
Currently, the DOPP JavaScript is always in
async
script tags, so it won't block the loading of pages (so you don't need to worry).However, when it comes to performance, we believe that being proactive is the best approach.
We will track progress on this initiative in this thread.
Tobe Osakwe
in progress
We have several initiatives in progress that will reduce the DOPP size:
- Replace the TypeScript implementation of discount calculation with a WebAssembly binary (which contains the exact same code as what's in the Shopify Functions discounts): This has numerous benefits. Firstly, it will reduce bugs and increase the speed we can release new features by having one consistent implementation, rather than two. Though the WebAssembly binary will be larger than any individual JS file, this will also help reduce the overall size, as we can delete the duplicate copies of the discount calculation logic from all the app blocks' JS files. We have additional plans to cut down on the WASM binary size as well.
- Refactor "Collection Page Discount," "Recommendations Discount," and "Search Page Discount" blocks to use the public DOPP API. This will reduce JS size by allowing us to prevent having multiple units of code that do mostly the same thing. In addition, it lead to improvements to the DOPP API that make it easier to integrate our app into custom pages.
- Use tree-shaking in webpack. We use the webpacktool to produce the JS bundles for the DOPP. Currently, a lot of unused code is making it into these bundles, so we'll need to troubleshoot our setup to make sure only used code gets emitted.
Tobe Osakwe
Instead of code splitting, we will do the following:
- Tree-shaking
- Minification
And:
- Move discount calculation to an API hosted on our server (but run through a Shopify app proxy), instead including all the discount calculation logic in JS.
In addition to helping reduce the DOPP JavaScript, this will also help us ensure consistent discount calculations, as we will be able to remove our existing TypeScript implementation of the discount logic, and just use the same Rust code everywhere.
Tobe Osakwe
We decided not to move discount calculation to an API on our server. A more reliable, scalable solution was to publish a WebAssembly binary and include that as part of the app's assets.
Tobe Osakwe
planned