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

Remove wc-settings from Mini Cart block dependencies #8703

Merged
merged 1 commit into from
Mar 10, 2023

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Mar 9, 2023

Part of #7176.

Until now, the Mini Cart block was using wcSettings to pass the scripts to lazy load from backend to frontend. That had the issue that we could not lazy-load wc-settings and all its dependencies. This PR changes the approach and instead of using wcSettings, we directly set a JS variable named wcBlocksMiniCartFrontendDependencies.

One side effect from not having wc-settings as a dependency is that wcSettings variable would be undefined in the frontend. That's because we are only printing it if wc-settings is enqueued (see this code). That was an issue, because we need wcSettings to exist when the user interacts with the Mini Cart! To solve it, I used a work-around to enqueue wc-settings before AssetDataRegistry:enqueue_asset_data() runs, and dequeue it afterwards.

Testing

User Facing Testing

This PR doesn't add any new feature, so testing mostly refers to smoke testing that there are no regressions.

  1. Add the Mini Cart block to the header of your store.
  2. In the frontend, verify you can open it, interact with its inner blocks (ie: change the quantity of a product, remove a product, etc.).
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

This PR reduces the number of scripts that the Mini Cart block depends on, so it should have a positive impact on stores using it.

Changelog

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

@Aljullu Aljullu added status: needs review skip-changelog PRs that you don't want to appear in the changelog. focus: performance The issue/PR is related to performance. block: mini-cart Issues related to the Mini-Cart block. labels Mar 9, 2023
@Aljullu Aljullu self-assigned this Mar 9, 2023
@Aljullu Aljullu removed the skip-changelog PRs that you don't want to appear in the changelog. label Mar 9, 2023
@woocommercebot woocommercebot requested review from a team and albarin and removed request for a team March 9, 2023 15:18
@Aljullu Aljullu added the type: enhancement The issue is a request for an enhancement. label Mar 9, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2023

The release ZIP for this PR is accessible via:

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

⚠️ ⚠️ This PR introduces new TS errors on 1 files:

assets/js/blocks/mini-cart/frontend.ts

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2023

Size Change: -30 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/mini-cart-frontend.js 2.02 kB -30 B (-1%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.97 kB
build/active-filters-wrapper-frontend.js 5.98 kB
build/active-filters.js 7.37 kB
build/all-products-frontend.js 11.7 kB
build/all-products.js 37.7 kB
build/all-reviews.js 7.66 kB
build/attribute-filter-frontend.js 22.5 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.36 kB
build/attribute-filter-wrapper-frontend.js 4.49 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 41.2 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.74 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 720 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.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 653 B
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/cart-frontend.js 28.9 kB
build/cart.js 47.6 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 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/fields-frontend.js 330 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 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 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/payment-frontend.js 8.43 kB
build/checkout-blocks/pickup-options-frontend.js 2.8 kB
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.27 kB
build/checkout-blocks/shipping-methods-frontend.js 4.58 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 311 B
build/checkout-frontend.js 30.4 kB
build/checkout.js 44.2 kB
build/customer-account.js 3.16 kB
build/featured-category.js 14 kB
build/featured-product.js 14.2 kB
build/filter-wrapper-frontend.js 14.1 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.91 kB
build/legacy-template.js 5.32 kB
build/mini-cart-component-frontend.js 28 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.87 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 573 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 16.6 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.99 kB
build/price-filter.js 8.38 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.69 kB
build/product-add-to-cart.js 8.61 kB
build/product-best-sellers.js 8.25 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
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-button.js 3.99 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.19 kB
build/product-category-list.js 502 B
build/product-category.js 9.24 kB
build/product-image-frontend.js 2.22 kB
build/product-image.js 4.1 kB
build/product-new.js 8.25 kB
build/product-on-sale.js 8.57 kB
build/product-price-frontend.js 2.38 kB
build/product-price.js 1.63 kB
build/product-query.js 10.8 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 919 B
build/product-results-count.js 1.65 kB
build/product-sale-badge-frontend.js 1.45 kB
build/product-sale-badge.js 819 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 707 B
build/product-sku.js 452 B
build/product-stock-indicator-frontend.js 1.32 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.58 kB
build/product-summary.js 919 B
build/product-tag-list-frontend.js 1.19 kB
build/product-tag-list.js 498 B
build/product-tag.js 8.73 kB
build/product-title-frontend.js 1.65 kB
build/product-title.js 3.46 kB
build/product-top-rated.js 8.49 kB
build/products-by-attribute.js 9.45 kB
build/rating-filter-frontend.js 20.9 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/rating-filter.js 7.41 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 7.13 kB
build/single-product-frontend.js 17.9 kB
build/single-product.js 10.6 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 3.15 kB
build/stock-filter.js 8.13 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.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--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/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.83 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.82 kB
build/wc-blocks-editor-style.css 5.82 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.9 kB
build/wc-blocks-style.css 26.8 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 64.4 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

Copy link
Contributor

@albarin albarin left a comment

Choose a reason for hiding this comment

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

👌

@Aljullu Aljullu force-pushed the fix/mini-cart-settings-dependency branch from 97d12ef to e44c54e Compare March 10, 2023 11:20
@Aljullu Aljullu merged commit 69b65af into trunk Mar 10, 2023
@Aljullu Aljullu deleted the fix/mini-cart-settings-dependency branch March 10, 2023 12:36
@Aljullu Aljullu added this to the 9.8.0 milestone Mar 13, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
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
Development

Successfully merging this pull request may close these issues.

2 participants