Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Improve the performance of checking payment methods #7413

Merged

Conversation

alexflorisca
Copy link
Contributor

This PR aims to improve performance of the C & C blocks by reducing the number of times we check that each payment method can pay. After the data store migration, we call checkPaymentMethodsCanPay for each change to the cart store. This is a function that does a lot of heavy processing (calls the canPay method for each payment method registered on the store). It was being run 4 times for standard payment methods, and 4 for express payment methods just on loading the cart page.

I've done 2 things here:

  1. I've debounced the function that runs on each cart store change, similar to the pushChanges function.
  2. I've refactored and renamed the __internalInitializePaymentStore function to __internalUpdateAvailablePaymentMethods to better reflect what it's doing. It now checks if the payment methods have been initialised and only calls the action to initialize them if they haven't. This allows us to call this function from a .subscribe() function without worrying that the __internalSetPaymentMethodsInitialized and __internalSetExpressPaymentMethodsInitialized will be called multiple times.

Fixes #7031

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. @opr You know what to do. Try and break it :)
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

This should speed things up slightly on the front-end

@rubikuserbot rubikuserbot requested review from a team and tarhi-saad and removed request for a team October 17, 2022 14:15
@alexflorisca alexflorisca requested review from opr and removed request for tarhi-saad October 17, 2022 14:15
@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7413.zip

@github-actions
Copy link
Contributor

github-actions bot commented Oct 17, 2022

Size Change: -55 B (0%)

Total Size: 992 kB

Filename Size Change
build/wc-blocks-data.js 18.3 kB -54 B (0%)
build/wc-blocks-registry.js 2.93 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.73 kB
build/active-filters-wrapper-frontend.js 6 kB
build/active-filters.js 7.44 kB
build/all-products-frontend.js 26.5 kB
build/all-products.js 33.6 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.5 kB
build/attribute-filter-wrapper-frontend.js 7.04 kB
build/attribute-filter.js 12.4 kB
build/blocks-checkout.js 17.5 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.64 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.67 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.1 kB
build/cart-blocks/cart-express-payment-frontend.js 786 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.31 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 320 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 783 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.73 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.61 kB
build/cart-blocks/order-summary-shipping-frontend.js 428 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/cart-frontend.js 54.5 kB
build/cart.js 47.5 kB
build/checkout-blocks/actions-frontend.js 1.78 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.98 kB
build/checkout-blocks/billing-address-frontend.js 954 B
build/checkout-blocks/contact-information-frontend.js 3.02 kB
build/checkout-blocks/express-payment-frontend.js 1.17 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.89 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 7.86 kB
build/checkout-blocks/shipping-address-frontend.js 1.06 kB
build/checkout-blocks/shipping-methods-frontend.js 4.89 kB
build/checkout-blocks/terms-frontend.js 1.64 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout-frontend.js 56.6 kB
build/checkout.js 41.3 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/filter-wrapper-frontend.js 13.8 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.33 kB
build/legacy-template.js 2.83 kB
build/mini-cart-component-frontend.js 20.2 kB
build/mini-cart-contents-block/empty-cart-frontend.js 367 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer-frontend.js 2.98 kB
build/mini-cart-contents-block/items-frontend.js 236 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 16.8 kB
build/mini-cart-frontend.js 1.71 kB
build/mini-cart.js 4.57 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 6.95 kB
build/price-filter.js 8.47 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 227 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.67 kB
build/product-add-to-cart-frontend.js 1.25 kB
build/product-add-to-cart.js 6.48 kB
build/product-best-sellers.js 7.7 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 433 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 301 B
build/product-button-frontend.js 1.89 kB
build/product-button.js 1.58 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 881 B
build/product-category-list.js 502 B
build/product-category.js 8.69 kB
build/product-image-frontend.js 1.91 kB
build/product-image.js 1.62 kB
build/product-new.js 7.69 kB
build/product-on-sale.js 8.01 kB
build/product-price-frontend.js 1.92 kB
build/product-price.js 1.53 kB
build/product-query.js 2.46 kB
build/product-rating-frontend.js 1.18 kB
build/product-rating.js 773 B
build/product-sale-badge-frontend.js 1.15 kB
build/product-sale-badge.js 817 B
build/product-search.js 2.61 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 380 B
build/product-stock-indicator-frontend.js 997 B
build/product-stock-indicator.js 624 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 921 B
build/product-tag-list-frontend.js 877 B
build/product-tag-list.js 497 B
build/product-tag.js 8.05 kB
build/product-title-frontend.js 1.34 kB
build/product-title.js 937 B
build/product-top-rated.js 7.93 kB
build/products-by-attribute.js 8.61 kB
build/rating-filter-frontend.js 7.09 kB
build/rating-filter-wrapper-frontend.js 5.34 kB
build/rating-filter.js 6.26 kB
build/reviews-by-category.js 11.3 kB
build/reviews-by-product.js 12.4 kB
build/reviews-frontend.js 7.01 kB
build/single-product-frontend.js 32.3 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 7.73 kB
build/stock-filter-wrapper-frontend.js 5.99 kB
build/stock-filter.js 6.65 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper-frontend.js 8.21 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/wc-blocks-editor-style-rtl.css 5.24 kB
build/wc-blocks-editor-style.css 5.24 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 932 B
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-style-rtl.css 24.2 kB
build/wc-blocks-style.css 24.1 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 62.4 kB
build/wc-blocks.js 2.62 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB

compressed-size-action

Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will take over this since @alexflorisca is AFK.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 19, 2022

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

@ralucaStan
Copy link
Contributor

This branch has some conflicts

@ralucaStan
Copy link
Contributor

@alexflorisca does this close #7031? If so, let's add this info in the description

@alexflorisca
Copy link
Contributor Author

@alexflorisca does this close #7031? If so, let's add this info in the description

It's already in the description. I'll catch up with @opr about this today and wrap it up

@alexflorisca alexflorisca force-pushed the fix/too-many-calls-too-check-payment-methods-can-pay branch from cefcd67 to 45a1f25 Compare October 25, 2022 10:31
@alexflorisca alexflorisca requested a review from opr October 25, 2022 10:33
/**
* Internal dependencies
*/
import { STORE_KEY as PAYMENT_STORE_KEY } from '../payment/constants';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to import from constants here to avoid circular dependency

Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Alex, working well for me! Code changes look fine.

@github-actions github-actions bot added this to the 8.9.0 milestone Oct 25, 2022
@alexflorisca
Copy link
Contributor Author

Cool, E2E tests seem unrelated so merging

@alexflorisca alexflorisca merged commit cd33afe into trunk Oct 25, 2022
@alexflorisca alexflorisca deleted the fix/too-many-calls-too-check-payment-methods-can-pay branch October 25, 2022 13:21
@albarin albarin added the skip-changelog PRs that you don't want to appear in the changelog. label Nov 7, 2022
senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
* Improve the performance of checking payment methods

* Use the default names of imports from @wordpress/data

* Fix circular dependency

* Fix __internalUpdateAvailablePaymentMethods

Co-authored-by: Thomas Roberts <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
skip-changelog PRs that you don't want to appear in the changelog.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

checkPaymentMethodsCanPay executed too many times
4 participants