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

Optimise imports of Product Query variation #10340

Merged
merged 2 commits into from
Jul 26, 2023

Conversation

kmanijak
Copy link
Contributor

@kmanijak kmanijak commented Jul 25, 2023

When working on #10267 I encountered a problem that Product Query logic was initialized twice in Editor and that included the subscription to the store changes here.

In scope of #10267 I subscribe to the 'core/block-editor' store changes and it's important to have single unsubscribe function returned from it. Unexpectedly the module was loaded twice and importing the unsubscribe was undeterministic.

Product Query is marked with sideEffect hence tree shaking is not applied when importing VARIATION_NAME from Product Query variation file which happened within classic-template. So it actually included the whole module because of the sideEffects.

This PR overcomes the problem by moving the variable to constants which can be tree shaken when imported within classic-template and product-query modules.

Summarizing this PR, it:

  • reduces the size of legacy-template module
  • prevents running the product-query module twice.
image

Part of #9703

Testing

Automated Tests

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

User Facing Testing

  1. Add console.log( 'Subscribing' ) before the subscription happens in product-query here. (Adding breakpoint doesn't help here, as it's caught only once. I think it's because of the source maps that resolve to the single file anyway, hence the easiest is to actually use console.log).
  2. Enter the Editor and edit any template
  3. Open DevTools and console
  4. "Subscribing" is logged just once, not twice like on trunk
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

It reduces the size of legacy-template module

Changelog

Products: Improve performance by preventing running the Product Query logic twice in Editor.

@github-actions
Copy link
Contributor

github-actions bot commented Jul 25, 2023

The release ZIP for this PR is accessible via:

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

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.

TypeScript Errors Report

  • Files with errors: 470
  • Total errors: 2246

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jul 25, 2023

Size Change: -804 B (0%)

Total Size: 1.36 MB

Filename Size Change
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js 958 B +1 B (0%)
build/all-products.js 41.9 kB +73 B (0%)
build/all-reviews.js 7.86 kB -6 B (0%)
build/attribute-filter.js 13.3 kB +6 B (0%)
build/breadcrumbs.js 2.15 kB +3 B (0%)
build/cart-blocks/cart-items-style.js 227 B -2 B (-1%)
build/cart-blocks/order-summary-discount-style.js 137 B +1 B (+1%)
build/cart-blocks/order-summary-fee-style.js 136 B -1 B (-1%)
build/cart-blocks/order-summary-shipping-style.js 177 B -1 B (-1%)
build/cart-blocks/order-summary-subtotal-style.js 137 B +1 B (+1%)
build/cart.js 45.2 kB -29 B (0%)
build/checkout-blocks/billing-address-style.js 531 B -1 B (0%)
build/checkout-blocks/contact-information-style.js 610 B +2 B (0%)
build/checkout-blocks/order-summary-cart-items-style.js 137 B +1 B (+1%)
build/checkout-blocks/order-summary-discount-style.js 136 B -1 B (-1%)
build/checkout-blocks/order-summary-style.js 321 B +1 B (0%)
build/checkout-blocks/pickup-options-style.js 445 B +2 B (0%)
build/checkout-blocks/shipping-address-style.js 477 B +2 B (0%)
build/checkout-blocks/shipping-method-style.js 1.37 kB +1 B (0%)
build/checkout-blocks/shipping-methods-style.js 418 B +1 B (0%)
build/checkout.js 47.8 kB -1 B (0%)
build/customer-account.js 3.19 kB +2 B (0%)
build/featured-category.js 15.1 kB +4 B (0%)
build/featured-product.js 15.3 kB -2 B (0%)
build/filter-wrapper.js 2.4 kB -1 B (0%)
build/legacy-template.js 8.18 kB -746 B (-8%)
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js 294 B +1 B (0%)
build/mini-cart-contents-block/footer-style.js 2.4 kB +1 B (0%)
build/mini-cart-contents-block/products-table-style.js 5.45 kB +1 B (0%)
build/mini-cart-contents-block/shopping-button-style.js 404 B +1 B (0%)
build/mini-cart-contents-block/title-items-counter-style.js 301 B -1 B (0%)
build/mini-cart-contents-block/title-style.js 443 B -2 B (0%)
build/mini-cart-contents.js 17.9 kB -2 B (0%)
build/mini-cart.js 6.38 kB +3 B (0%)
build/price-filter.js 8.57 kB -4 B (0%)
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js 271 B -1 B (0%)
build/product-add-to-cart.js 8.71 kB -4 B (0%)
build/product-best-sellers.js 8.44 kB -9 B (0%)
build/product-button.js 3.95 kB +1 B (0%)
build/product-categories.js 2.71 kB +4 B (0%)
build/product-category.js 9.46 kB -7 B (0%)
build/product-collection.js 13.9 kB -1 B (0%)
build/product-gallery-large-image.js 2.01 kB -1 B (0%)
build/product-new.js 8.74 kB -6 B (0%)
build/product-on-sale.js 8.75 kB -9 B (0%)
build/product-price.js 1.67 kB -3 B (0%)
build/product-query.js 12.9 kB -62 B (0%)
build/product-results-count.js 1.66 kB -1 B (0%)
build/product-search.js 2.63 kB -3 B (0%)
build/product-stock-indicator.js 728 B -1 B (0%)
build/product-summary.js 1 kB -1 B (0%)
build/product-tag.js 8.94 kB -10 B (0%)
build/product-title.js 971 B -2 B (0%)
build/product-top-rated.js 9 kB -7 B (0%)
build/products-by-attribute.js 9.82 kB +11 B (0%)
build/rating-filter.js 6.94 kB +1 B (0%)
build/reviews-by-category.js 12.2 kB -8 B (0%)
build/reviews-by-product.js 13.4 kB -2 B (0%)
build/single-product.js 11.3 kB +2 B (0%)
build/stock-filter.js 7.65 kB +6 B (0%)
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js 604 B -2 B (0%)
build/vendors--checkout-blocks/shipping-method-style.js 11.7 kB +2 B (0%)
build/wc-blocks-vendors.js 65.5 kB +3 B (0%)
build/wc-blocks.js 3.75 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.7 kB
build/active-filters-rtl.css 2.02 kB
build/active-filters-wrapper-frontend.js 7.64 kB
build/active-filters-wrapper-rtl.css 1.88 kB
build/active-filters-wrapper.css 1.88 kB
build/active-filters.css 2.02 kB
build/active-filters.js 7.59 kB
build/add-to-cart-form-rtl.css 380 B
build/add-to-cart-form.css 378 B
build/all-products-frontend.js 10.1 kB
build/all-products-rtl.css 4.24 kB
build/all-products.css 4.24 kB
build/all-reviews-rtl.css 1.84 kB
build/all-reviews.css 1.84 kB
build/attribute-filter-frontend.js 23 kB
build/attribute-filter-rtl.css 4.19 kB
build/attribute-filter-wrapper-frontend.js 7.69 kB
build/attribute-filter-wrapper-rtl.css 4.06 kB
build/attribute-filter-wrapper.css 4.06 kB
build/attribute-filter.css 4.19 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs-rtl.css 253 B
build/breadcrumbs.css 253 B
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 137 B
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.91 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.83 kB
build/cart-blocks/cart-cross-sells-products-style.js 137 B
build/cart-blocks/cart-cross-sells-style.js 253 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 719 B
build/cart-blocks/cart-express-payment-style.js 136 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.47 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-line-items-style.js 137 B
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB
build/cart-blocks/cart-order-summary-style.js 322 B
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/cart-totals-style.js 238 B
build/cart-blocks/empty-cart-frontend.js 347 B
build/cart-blocks/empty-cart-style.js 339 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/filled-cart-style.js 313 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-coupon-form-style.js 137 B
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 333 B
build/cart-blocks/order-summary-heading-style.js 335 B
build/cart-blocks/order-summary-shipping-frontend.js 17 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/order-summary-taxes-style.js 177 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.43 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/cart-frontend.js 29.9 kB
build/cart-rtl.css 9.59 kB
build/cart.css 9.58 kB
build/catalog-sorting-rtl.css 277 B
build/catalog-sorting.css 276 B
build/catalog-sorting.js 1.71 kB
build/checkout-blocks/actions--checkout-blocks/terms-style.js 485 B
build/checkout-blocks/actions-frontend.js 1.88 kB
build/checkout-blocks/actions-style.js 685 B
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 318 B
build/checkout-blocks/fields-style.js 260 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.75 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-coupon-form-style.js 137 B
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-fee-style.js 137 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-shipping-style.js 137 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-subtotal-style.js 137 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/order-summary-taxes-style.js 177 B
build/checkout-blocks/payment-frontend.js 9.28 kB
build/checkout-blocks/payment-style.js 461 B
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/shipping-address-frontend.js 1.18 kB
build/checkout-blocks/shipping-method-frontend.js 2.62 kB
build/checkout-blocks/shipping-methods-frontend.js 6.41 kB
build/checkout-blocks/terms-frontend.js 1.55 kB
build/checkout-blocks/terms-style.js 677 B
build/checkout-blocks/totals-frontend.js 347 B
build/checkout-blocks/totals-style.js 285 B
build/checkout-frontend.js 31.8 kB
build/checkout-rtl.css 9.22 kB
build/checkout.css 9.21 kB
build/customer-account-rtl.css 406 B
build/customer-account.css 406 B
build/featured-category-rtl.css 986 B
build/featured-category.css 987 B
build/featured-product-rtl.css 1.03 kB
build/featured-product.css 1.03 kB
build/filter-wrapper-frontend.js 14.3 kB
build/filter-wrapper-rtl.css 399 B
build/filter-wrapper.css 397 B
build/handpicked-products.js 8.11 kB
build/legacy-template-rtl.css 258 B
build/legacy-template.css 257 B
build/mini-cart-component-frontend.js 30.9 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/cart-button-style.js 388 B
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB
build/mini-cart-contents-block/checkout-button-style.js 470 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/empty-cart-style.js 358 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/filled-cart-style.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.83 kB
build/mini-cart-contents-block/footer-rtl.css 419 B
build/mini-cart-contents-block/footer.css 418 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/items-style.js 237 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js 352 B
build/mini-cart-contents-block/products-table-frontend.js 582 B
build/mini-cart-contents-block/products-table-rtl.css 2.19 kB
build/mini-cart-contents-block/products-table.css 2.18 kB
build/mini-cart-contents-block/shopping-button-frontend.js 538 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB
build/mini-cart-contents-block/title-label-style.js 301 B
build/mini-cart-contents-rtl.css 2.73 kB
build/mini-cart-contents.css 2.73 kB
build/mini-cart-frontend.js 2.85 kB
build/mini-cart-rtl.css 2.61 kB
build/mini-cart.css 2.61 kB
build/packages-style-rtl.css 3.59 kB
build/packages-style.css 3.59 kB
build/price-filter-frontend.js 14.6 kB
build/price-filter-rtl.css 2.71 kB
build/price-filter-wrapper-frontend.js 6.75 kB
build/price-filter-wrapper-rtl.css 2.56 kB
build/price-filter-wrapper.css 2.56 kB
build/price-filter.css 2.7 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js 151 B
build/product-add-to-cart--product-image--product-title.js 351 B
build/product-add-to-cart-frontend.js 8.67 kB
build/product-add-to-cart-rtl.css 1.39 kB
build/product-add-to-cart.css 1.4 kB
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js 954 B
build/product-average-rating-frontend.js 1.72 kB
build/product-average-rating.js 397 B
build/product-button-frontend.js 4.96 kB
build/product-button-rtl.css 889 B
build/product-button.css 891 B
build/product-categories-rtl.css 671 B
build/product-categories.css 670 B
build/product-details-rtl.css 413 B
build/product-details.css 410 B
build/product-gallery-large-image-rtl.css 314 B
build/product-gallery-large-image.css 313 B
build/product-gallery.js 2.3 kB
build/product-image-frontend.js 2.72 kB
build/product-image-gallery-rtl.css 322 B
build/product-image-gallery.css 322 B
build/product-image-rtl.css 951 B
build/product-image.css 949 B
build/product-image.js 1.57 kB
build/product-price-frontend.js 248 B
build/product-price-rtl.css 696 B
build/product-price.css 695 B
build/product-query-rtl.css 367 B
build/product-query.css 365 B
build/product-rating-counter-frontend.js 2.03 kB
build/product-rating-counter.js 687 B
build/product-rating-frontend.js 2.37 kB
build/product-rating-rtl.css 262 B
build/product-rating-stars-frontend.js 2.27 kB
build/product-rating-stars-rtl.css 914 B
build/product-rating-stars.css 916 B
build/product-rating-stars.js 937 B
build/product-rating.css 262 B
build/product-rating.js 1.04 kB
build/product-results-count-rtl.css 248 B
build/product-results-count.css 247 B
build/product-reviews-rtl.css 474 B
build/product-reviews.css 473 B
build/product-sale-badge-frontend.js 1.81 kB
build/product-sale-badge-rtl.css 392 B
build/product-sale-badge.css 389 B
build/product-sale-badge.js 665 B
build/product-search-rtl.css 435 B
build/product-search.css 434 B
build/product-sku-frontend.js 1.87 kB
build/product-sku-rtl.css 258 B
build/product-sku.css 258 B
build/product-sku.js 535 B
build/product-stock-indicator-frontend.js 2.06 kB
build/product-stock-indicator-rtl.css 250 B
build/product-stock-indicator.css 250 B
build/product-summary-frontend.js 2.28 kB
build/product-summary-rtl.css 571 B
build/product-summary.css 572 B
build/product-template-rtl.css 439 B
build/product-template.css 437 B
build/product-template.js 3.35 kB
build/product-title-frontend.js 2.23 kB
build/product-title-rtl.css 718 B
build/product-title.css 719 B
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-rtl.css 4.25 kB
build/rating-filter-wrapper-frontend.js 6.23 kB
build/rating-filter-wrapper-rtl.css 4.11 kB
build/rating-filter-wrapper.css 4.11 kB
build/rating-filter.css 4.24 kB
build/reviews-by-category-rtl.css 1.84 kB
build/reviews-by-category.css 1.84 kB
build/reviews-by-product-rtl.css 1.84 kB
build/reviews-by-product.css 1.84 kB
build/reviews-frontend.js 7.18 kB
build/single-product-rtl.css 399 B
build/single-product.css 397 B
build/stock-filter-frontend.js 21.6 kB
build/stock-filter-rtl.css 4.06 kB
build/stock-filter-wrapper-frontend.js 6.45 kB
build/stock-filter-wrapper-rtl.css 3.93 kB
build/stock-filter-wrapper.css 3.93 kB
build/stock-filter.css 4.06 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.84 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB
build/vendors--attribute-filter-wrapper-frontend.js 5.11 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--cart-blocks/proceed-to-checkout-style.js 179 B
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js 5.27 kB
build/vendors--mini-cart-contents-block/products-table-style.js 3.16 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.4 kB
build/wc-blocks-editor-style-rtl.css 6.39 kB
build/wc-blocks-editor-style.css 6.4 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-rtl.css 2.54 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks.css 2.54 kB
build/wc-interactivity.js 10.4 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
build/wc-shipping-method-pickup-location.js 30.4 kB

compressed-size-action

@kmanijak kmanijak added focus: performance The issue/PR is related to performance. block-type: product-query Issues related to/affecting all product-query variations. type: bug The issue/PR concerns a confirmed bug. labels Jul 25, 2023
@kmanijak kmanijak marked this pull request as ready for review July 25, 2023 12:14
@woocommercebot woocommercebot requested review from a team and nefeline and removed request for a team July 25, 2023 12:14
Copy link
Contributor

@nefeline nefeline left a comment

Choose a reason for hiding this comment

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

🚀

Confirmed that:

  • On trunk, the subscription occurs both on legacy-template.js and product-query.js
  • On this branch subscription occurs on product-query.js exclusively

@github-actions github-actions bot added this to the 10.8.0 milestone Jul 26, 2023
@kmanijak kmanijak merged commit b4ba06a into trunk Jul 26, 2023
@kmanijak kmanijak deleted the fix/incorrect-product-query-imports branch July 26, 2023 09:08
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product-query Issues related to/affecting all product-query variations. focus: performance The issue/PR is related to performance. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants