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

Remove wc-blocks-registry from Mini Cart block dependencies so more scripts can be lazy-loaded #8657

Merged
merged 2 commits into from
Mar 8, 2023
Merged

Remove wc-blocks-registry from Mini Cart block dependencies so more scripts can be lazy-loaded #8657

merged 2 commits into from
Mar 8, 2023

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Mar 7, 2023

Part of #7176.

This is an alternative solution to #7813. It has the benefit that we don't need to declare wc-blocks-registry as a dependency of the Mini Cart frontend script, so we don't need to load it (and all its dependencies) on page load.

@gigitux I would appreciate if you can take a look, as we worked on the original fix together. 🙂

Screenshots

The screenshots below show the scripts which are loaded on page load in a page without any other block than the Mini Cart:

Before After
imatge imatge

Keep in mind that the total of scripts loaded is the same. We are just deferring some of them after the page has already loaded.

Testing

User Facing Testing

  1. Install Page Optimize and Product Bundles.
  2. Enable a block theme, like TT3.
  3. Go to Appearance > Editor and add the Mini Cart block to the store header.
  4. Save the changes.
  5. In the frontend, click on the Mini Cart. The drawer should open and show the "empty cart" message.
  6. Go to the shop page and add a product to your cart.
  7. Click on the Mini Cart. The drawer should open and show the product you just added.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

This PR makes it so fewer scripts are blocking the page load, so they can be lazy loaded after the page has rendered.

Changelog

Reduce the number of scripts needed to render a page containing the Mini Cart block

@Aljullu Aljullu added status: needs review type: enhancement The issue is a request for an enhancement. focus: performance The issue/PR is related to performance. block: mini-cart Issues related to the Mini-Cart block. labels Mar 7, 2023
@Aljullu Aljullu self-assigned this Mar 7, 2023
@woocommercebot woocommercebot requested review from a team and nefeline and removed request for a team March 7, 2023 16:23
@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2023 •
edited
Loading

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
reviews-frontend.js wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js lodash, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
attribute-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
cart-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
checkout-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
filter-wrapper-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-frontend.js wc-settings, wp-polyfill ⚠️
price-filter-frontend.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
single-product-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
stock-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️

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

TypeScript Errors Report

  • Files with errors: 486
  • Total errors: 2310

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2023 •
edited
Loading

Size Change: -39 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/active-filters.js 7.31 kB -3 B (0%)
build/all-products-frontend.js 11.7 kB +2 B (0%)
build/all-products.js 36.8 kB +1 B (0%)
build/attribute-filter.js 12.4 kB +1 B (0%)
build/breadcrumbs.js 2.05 kB +2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.75 kB -1 B (0%)
build/cart-blocks/cart-items-frontend.js 301 B -1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.35 kB -3 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.07 kB +1 B (0%)
build/cart-blocks/cart-totals-frontend.js 307 B -1 B (0%)
build/cart-blocks/empty-cart-frontend.js 346 B +1 B (0%)
build/cart-blocks/filled-cart-frontend.js 653 B -2 B (0%)
build/cart-frontend.js 28.9 kB -4 B (0%)
build/cart.js 47.7 kB +8 B (0%)
build/catalog-sorting.js 1.7 kB +1 B (0%)
build/checkout-blocks/actions-frontend.js 1.85 kB +2 B (0%)
build/checkout-blocks/fields-frontend.js 330 B -1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB +1 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.78 kB -1 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB +1 B (0%)
build/checkout-blocks/payment-frontend.js 8.43 kB +1 B (0%)
build/checkout-blocks/pickup-options-frontend.js 2.8 kB +1 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.27 kB -3 B (0%)
build/checkout-blocks/terms-frontend.js 1.56 kB +1 B (0%)
build/checkout-blocks/totals-frontend.js 311 B +1 B (0%)
build/checkout-frontend.js 30.4 kB -5 B (0%)
build/checkout.js 44.2 kB +2 B (0%)
build/customer-account.js 3.17 kB -1 B (0%)
build/featured-category.js 13.3 kB -1 B (0%)
build/filter-wrapper-frontend.js 14.1 kB -1 B (0%)
build/legacy-template.js 5.28 kB -1 B (0%)
build/mini-cart-component-frontend.js 28 kB -5 B (0%)
build/mini-cart-contents.js 16.5 kB -84 B (-1%)
build/mini-cart-frontend.js 2.05 kB +50 B (+2%)
build/mini-cart.js 4.29 kB -1 B (0%)
build/price-filter.js 8.39 kB +2 B (0%)
build/product-add-to-cart.js 8.61 kB +1 B (0%)
build/product-best-sellers.js 7.6 kB -1 B (0%)
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 499 B -1 B (0%)
build/product-button.js 3.99 kB +1 B (0%)
build/product-categories.js 2.36 kB +1 B (0%)
build/product-category-list-frontend.js 1.19 kB -1 B (0%)
build/product-category.js 8.58 kB +1 B (0%)
build/product-image.js 4.1 kB +2 B (0%)
build/product-new.js 7.58 kB -1 B (0%)
build/product-on-sale.js 7.91 kB +1 B (0%)
build/product-price.js 1.64 kB -1 B (0%)
build/product-query.js 6.6 kB -1 B (0%)
build/product-results-count.js 1.66 kB +1 B (0%)
build/product-sale-badge.js 817 B -1 B (0%)
build/product-search.js 2.63 kB -1 B (0%)
build/product-sku.js 375 B -1 B (0%)
build/product-stock-indicator-frontend.js 1.32 kB +2 B (0%)
build/product-stock-indicator.js 644 B -1 B (0%)
build/product-summary.js 918 B -2 B (0%)
build/product-tag-list-frontend.js 1.19 kB +2 B (0%)
build/product-tag-list.js 498 B +1 B (0%)
build/product-top-rated.js 7.82 kB +1 B (0%)
build/products-by-attribute.js 8.53 kB +1 B (0%)
build/rating-filter.js 7.42 kB +4 B (0%)
build/reviews-by-category.js 11.2 kB -2 B (0%)
build/reviews-by-product.js 12.3 kB +3 B (0%)
build/single-product-frontend.js 17.9 kB +1 B (0%)
build/stock-filter-wrapper-frontend.js 3.15 kB +1 B (0%)
build/stock-filter.js 8.14 kB -1 B (0%)
build/store-notices.js 1.69 kB +1 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB -4 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.83 kB -1 B (0%)
build/wc-blocks-vendors.js 64.4 kB -4 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.97 kB
build/active-filters-wrapper-frontend.js 5.98 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.36 kB
build/attribute-filter-wrapper-frontend.js 4.46 kB
build/blocks-checkout.js 41.2 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-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 719 B
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 14.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/shipping-methods-frontend.js 4.58 kB
build/featured-product.js 13.6 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.24 kB
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 2.86 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 575 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.99 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 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.7 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 262 B
build/product-button-frontend.js 2.22 kB
build/product-category-list.js 501 B
build/product-image-frontend.js 2.23 kB
build/product-price-frontend.js 2.38 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 920 B
build/product-sale-badge-frontend.js 1.45 kB
build/product-sku-frontend.js 629 B
build/product-summary-frontend.js 1.58 kB
build/product-tag.js 8.07 kB
build/product-title-frontend.js 1.65 kB
build/product-title.js 3.46 kB
build/rating-filter-frontend.js 20.9 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/reviews-frontend.js 7.12 kB
build/single-product.js 9.97 kB
build/stock-filter-frontend.js 21.1 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 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--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--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 8.84 kB
build/wc-blocks-data.js 21.5 kB
build/wc-blocks-editor-style-rtl.css 5.68 kB
build/wc-blocks-editor-style.css 5.68 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 26.8 kB
build/wc-blocks-style.css 26.7 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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.7 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@Aljullu Aljullu mentioned this pull request Mar 8, 2023
Closed
gigitux
gigitux approved these changes Mar 8, 2023
View reviewed changes
Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

Nice work! LGTM!

@github-actions github-actions bot added this to the 9.8.0 milestone Mar 8, 2023
@Aljullu Aljullu merged commit cb8b1ed into trunk Mar 8, 2023
@Aljullu Aljullu deleted the fix/remove-mini-cart-registry-dependency branch March 8, 2023 16:15
@Aljullu Aljullu mentioned this pull request Mar 14, 2023
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@gigitux gigitux gigitux approved these changes

@nefeline nefeline Awaiting requested review from nefeline nefeline was automatically assigned from woocommerce/woo-fse

Assignees

@Aljullu Aljullu

Labels
block: mini-cart Issues related to the Mini-Cart block. focus: performance The issue/PR is related to performance. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Milestone
9.8.0
Development

Successfully merging this pull request may close these issues.
2 participants
@Aljullu @gigitux