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

Conversation

@Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Apr 6, 2023

The Mini Cart block registers an object (scripts_to_lazy_load) where we store all scripts that we need to lazy load. This PR makes it a bit more clever, so if a script is already printed (ie: another block has enqueued it), it will not be added to the scripts to lazy load.

Testing

User Facing Testing

  1. Add the Mini Cart block to the header of your site (via Appearance > Editor).
  2. Create a post or page with the All Products block.
  3. Create another post or page without any WC Blocks.
  4. In the frontend, visit both pages and in the browser console (F12) print these values: Object.keys( wcBlocksMiniCartFrontendDependencies ).length and wcBlocksMiniCartFrontendDependencies['wp-i18n'].
  5. Verify in the page with no blocks: wcBlocksMiniCartFrontendDependencies['wp-i18n'] is defined.
  6. Verify in the All Products block page: wcBlocksMiniCartFrontendDependencies['wp-i18n'] is undefined and Object.keys( wcBlocksMiniCartFrontendDependencies ).length is smaller.
  7. Verify in both pages you can interact with the Mini Cart block: open the drawer, change the items quantity, remove items from the cart, etc.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Exclude already-printed scripts from scripts to lazy load in the Mini Cart block

@Aljullu Aljullu added status: needs review focus: performance The issue/PR is related to performance. type: technical debt This issue/PR represents/solves the technical debt of the project. labels Apr 6, 2023
@Aljullu Aljullu self-assigned this Apr 6, 2023
@woocommercebot woocommercebot requested review from a team and imanish003 and removed request for a team April 6, 2023 14:13
@github-actions
Copy link
Contributor

github-actions bot commented Apr 6, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8979.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: 452
  • Total errors: 2213

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Apr 6, 2023

Size Change: 0 B

Total Size: 1.11 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.99 kB
build/active-filters-wrapper-frontend.js 5.97 kB
build/active-filters.js 7.49 kB
build/all-products-frontend.js 11.8 kB
build/all-products.js 38.3 kB
build/all-reviews.js 7.66 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.07 kB
build/attribute-filter.js 13.2 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.05 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-frontend.js 9.81 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.4 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 656 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
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 455 B
build/cart-blocks/order-summary-shipping-frontend.js 11.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 431 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB
build/cart-frontend.js 29.3 kB
build/cart.js 48.7 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.84 kB
build/checkout-blocks/billing-address-frontend.js 4.19 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.71 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
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-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 11.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 431 B
build/checkout-blocks/payment-frontend.js 8.27 kB
build/checkout-blocks/pickup-options-frontend.js 4.14 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 5.83 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 30.9 kB
build/checkout.js 46.3 kB
build/customer-account.js 3.17 kB
build/featured-category.js 14.1 kB
build/featured-product.js 14.3 kB
build/filter-wrapper-frontend.js 14 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.92 kB
build/legacy-template.js 5.63 kB
build/mini-cart-component-frontend.js 29.2 kB
build/mini-cart-contents-block/cart-button-frontend.js 867 B
build/mini-cart-contents-block/checkout-button-frontend.js 870 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.2 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 588 B
build/mini-cart-contents-block/shopping-button-frontend.js 759 B
build/mini-cart-contents-block/title-frontend.js 1.09 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 732 B
build/mini-cart-contents-block/title-label-frontend.js 658 B
build/mini-cart-contents.js 17.8 kB
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 7.04 kB
build/price-filter.js 8.46 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.43 kB
build/product-add-to-cart.js 8.8 kB
build/product-best-sellers.js 8.26 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 464 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--product-title.js 262 B
build/product-button-frontend.js 1.92 kB
build/product-button.js 4.17 kB
build/product-categories.js 2.37 kB
build/product-category.js 9.25 kB
build/product-image-frontend.js 1.83 kB
build/product-image.js 4.29 kB
build/product-new.js 8.26 kB
build/product-on-sale.js 8.59 kB
build/product-price-frontend.js 2.12 kB
build/product-price.js 1.67 kB
build/product-query.js 11.3 kB
build/product-rating-frontend.js 1.33 kB
build/product-rating.js 920 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 974 B
build/product-sale-badge.js 797 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1 kB
build/product-sku.js 576 B
build/product-stock-indicator-frontend.js 1.01 kB
build/product-stock-indicator.js 647 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 923 B
build/product-tag.js 8.75 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 3.72 kB
build/product-top-rated.js 8.49 kB
build/products-by-attribute.js 9.59 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.59 kB
build/rating-filter.js 6.98 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 7.1 kB
build/single-product.js 11 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.83 kB
build/stock-filter.js 7.71 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 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-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 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/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.24 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.87 kB
build/wc-blocks-editor-style.css 5.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 27.6 kB
build/wc-blocks-style.css 27.6 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 63.8 kB
build/wc-blocks.js 2.63 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 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@Aljullu Aljullu force-pushed the fix/mini-cart-exclude-enqueued-files-from-lazy-load branch from 61326df to 8a5ee8d Compare April 6, 2023 15:56
@Aljullu Aljullu changed the title Mini Cart block: exclude already-enqueued scripts from scripts to lazy load Mini Cart block: exclude already-printed scripts from scripts to lazy load Apr 6, 2023
Copy link
Contributor

@imanish003 imanish003 left a comment

Choose a reason for hiding this comment

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

Hi @Aljullu,
The code changes look good to me, but while following testing instructions, I am seeing:

  • All Products block page: wcBlocksMiniCartFrontendDependencies['wp-i18n'] is undefined.
  • Page with no blocks: wcBlocksMiniCartFrontendDependencies['wp-i18n'] is defined

Maybe I am doing something wrong while testing on my local setup? 🤷🏻‍♂️

Screen.Recording.2023-04-07.at.11.48.21.AM.mov

@Aljullu
Copy link
Contributor Author

Aljullu commented Apr 13, 2023

Maybe I am doing something wrong while testing on my local setup? 🤷🏻‍♂️

My bad, that was me writing the testing steps incorrectly. 🤦‍♂️ What you can reproduce is the expected behavior:

  • wcBlocksMiniCartFrontendDependencies['wp-i18n'] is undefined in the All Products page because that script has already been loaded by the All Products block, thus, it doesn't need to be lazy-loaded.
  • wcBlocksMiniCartFrontendDependencies['wp-i18n'] is defined in the no-block page because that script hasn't been loaded, so it needs to be lazy-loaded for the Mini Cart block.

I updated the testing steps accordingly. Sorry for the confusion! 🙏

@imanish003
Copy link
Contributor

@Aljullu, no problem. Thanks for the clarification and updating the testing steps. I'm going to approve it now since I've already tested it 🙂

Copy link
Contributor

@imanish003 imanish003 left a comment

Choose a reason for hiding this comment

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

LGTM 🚀🙌🏻

@Aljullu Aljullu force-pushed the fix/mini-cart-exclude-enqueued-files-from-lazy-load branch from 8e7c188 to f98cb43 Compare April 17, 2023 10:37
@Aljullu Aljullu merged commit a45678c into trunk Apr 17, 2023
@Aljullu Aljullu deleted the fix/mini-cart-exclude-enqueued-files-from-lazy-load branch April 17, 2023 11:09
@thealexandrelara thealexandrelara added the skip-changelog PRs that you don't want to appear in the changelog. label Apr 24, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

focus: performance The issue/PR is related to performance. skip-changelog PRs that you don't want to appear in the changelog. type: technical debt This issue/PR represents/solves the technical debt of the project.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants