Add Mini Cart block in experimental builds

[Aljullu]

Part of #4138 and #4245.

This PR adds to the experimental builds an initial version of a MiniCart block which has the following characteristics:

• Only a small JavaScript file is downloaded & parsed on each page where the Mini Cart block is present. That script is used to detect mouse hover/blur on the mini cart button and to preload + append the other scripts.
• Once the page is loaded, all other scripts are preloaded. That means they don’t block rendering the page and, instead, they are downloaded in the background after the page finishes loading.
• Once the user interacts with the Mini Cart, those scripts are appended to the page and, because of that, parsed and executed.

The benefits of this approach are:

• We don't block page rendering to download the scripts required to render the block: scripts are downloaded in the background.
• Files are only parsed and executed when necessary.
• Using the same components and hooks as in the Cart block, we can reuse all the logic. Extensibility points can be reused as well.

This approach was discussed in pca54o-1PL-p2 (conclusions can be found in #4245 (comment)).

How to test the changes in this Pull Request:

1. Create a post or page and add a Mini Cart block.
2. Visit that post or page in the frontend and verify the Mini Cart button appears and, when hovered, Cart contents are rendered.

This PR is an initial step, so don't expect the block to look or work perfectly. UI, interactions, etc. will be improved in subsequent PRs. This epic has some of the next steps we will be working on: #4138.

[github-actions]

Size Change: +40.6 kB (+4%)

Total Size: 1.19 MB

Filename	Size	Change
build/active-filters-frontend.js	8.38 kB	-8 B (0%)
build/all-products-frontend.js	23 kB	+11 B (0%)
build/all-products.js	37 kB	+4 B (0%)
build/all-reviews.js	9.58 kB	+1 B (0%)
build/atomic-block-components/add-to-cart-frontend.js	8.38 kB	-11 B (0%)
build/atomic-block-components/add-to-cart.js	7.74 kB	-1 B (0%)
build/atomic-block-components/button-frontend.js	1.74 kB	+4 B (0%)
build/atomic-block-components/button.js	876 B	+1 B (0%)
build/atomic-block-components/category-list-frontend.js	470 B	+1 B (0%)
build/atomic-block-components/category-list.js	476 B	+1 B (0%)
build/atomic-block-components/image-frontend.js	1.88 kB	+3 B (0%)
build/atomic-block-components/image.js	1.35 kB	-2 B (0%)
build/atomic-block-components/price-frontend.js	2.09 kB	-3 B (0%)
build/atomic-block-components/rating-frontend.js	562 B	-1 B (0%)
build/atomic-block-components/sale-badge.js	868 B	-1 B (0%)
build/atomic-block-components/sku-frontend.js	388 B	+1 B (0%)
build/atomic-block-components/sku.js	395 B	+2 B (+1%)
build/atomic-block-components/summary.js	911 B	-1 B (0%)
build/atomic-block-components/tag-list-frontend.js	466 B	-1 B (0%)
build/atomic-block-components/title-frontend.js	1.44 kB	+1 B (0%)
build/atomic-block-components/title.js	1.29 kB	+1 B (0%)
build/attribute-filter-frontend.js	18.2 kB	-5 B (0%)
build/attribute-filter.js	12.2 kB	+1 B (0%)
build/cart-frontend.js	91 kB	+362 B (0%)
build/cart.js	45.8 kB	-72 B (0%)
build/checkout-frontend.js	95.1 kB	+364 B (0%)
build/checkout-i2-frontend.js	51.7 kB	+102 B (0%)
build/checkout-i2.js	48.9 kB	+7 B (0%)
build/checkout.js	48.8 kB	+6 B (0%)
build/featured-product.js	9.51 kB	-1 B (0%)
build/handpicked-products.js	6.35 kB	+1 B (0%)
build/price-filter-frontend.js	14.5 kB	+14 B (0%)
build/price-filter.js	9.7 kB	-1 B (0%)
build/product-best-sellers.js	6.69 kB	-2 B (0%)
build/product-new.js	6.85 kB	+2 B (0%)
build/product-search.js	2.66 kB	-2 B (0%)
build/product-tag.js	6.67 kB	-2 B (0%)
build/product-top-rated.js	6.82 kB	-1 B (0%)
build/products-by-attribute.js	7.79 kB	+1 B (0%)
build/reviews-frontend.js	9.02 kB	+13 B (0%)
build/single-product-frontend.js	26 kB	+1 B (0%)
build/single-product.js	9.79 kB	-1 B (0%)
build/stock-filter-frontend.js	8.74 kB	-22 B (0%)
build/vendors--atomic-block-components/add-to-cart-frontend.js	20.3 kB	+88 B (0%)
build/vendors--atomic-block-components/price-frontend.js	5.71 kB	-1 B (0%)
build/wc-blocks-style-rtl.css	20.3 kB	+172 B (+1%)
build/wc-blocks-style.css	20.2 kB	+171 B (+1%)
build/wc-blocks-vendors.js	253 kB	-8 B (0%)
build/mini-cart-component-frontend.js	35.4 kB	+35.4 kB (new file)	🆕
build/mini-cart-frontend.js	1.67 kB	+1.67 kB (new file)	🆕
build/mini-cart.js	2.35 kB	+2.35 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size
build/active-filters.js	8.01 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js	2.65 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js	1.81 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js	334 B
build/atomic-block-components/price.js	2.11 kB
build/atomic-block-components/rating.js	566 B
build/atomic-block-components/sale-badge-frontend.js	859 B
build/atomic-block-components/stock-indicator-frontend.js	611 B
build/atomic-block-components/stock-indicator.js	612 B
build/atomic-block-components/summary-frontend.js	906 B
build/atomic-block-components/tag-list.js	472 B
build/blocks-checkout.js	21.2 kB
build/checkout-blocks/sample.js	174 B
build/featured-category.js	7.81 kB
build/price-format.js	1.37 kB
build/product-categories.js	3.38 kB
build/product-category.js	7.56 kB
build/product-on-sale.js	7.21 kB
build/reviews-by-category.js	11.6 kB
build/reviews-by-product.js	13 kB
build/stock-filter.js	7.73 kB
build/wc-blocks-data.js	11 kB
build/wc-blocks-editor-style-rtl.css	15.4 kB
build/wc-blocks-editor-style.css	15.5 kB
build/wc-blocks-google-analytics.js	1.98 kB
build/wc-blocks-middleware.js	1.47 kB
build/wc-blocks-registry.js	2.74 kB
build/wc-blocks-shared-context.js	1.54 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-vendors-style-rtl.css	1.37 kB
build/wc-blocks-vendors-style.css	1.37 kB
build/wc-blocks.js	3.5 kB
build/wc-payment-method-bacs.js	806 B
build/wc-payment-method-cheque.js	806 B
build/wc-payment-method-cod.js	898 B
build/wc-payment-method-paypal.js	839 B
build/wc-payment-method-stripe.js	12.2 kB
build/wc-settings.js	2.91 kB

_{compressed-size-action}

[nerrad]

Besides the non-blocking improvements this PR suggest is possible, would you be able to get some performance metrics using performance tab in Google Chrome (I think you can measure Web Vitals now there too) to get some idea of the impact between non-lazy and lazy loaded?

[Aljullu]

I quickly created a new branch that removes the lazy-loading (add/mini-cart-block-prototype-no-lazy-loading). Then, I loaded a page containing the Mini Cart block and measured three events: Largest Content Paint, DOMContentLoaded and Load. Results can be seen below (I repeated the test three times on each configuration to get more meaningful data):

With lazy loading:

Largest Contentful Paint	DOMContentLoaded	Load
0,856	0,823	0,891
0,820	0,776	0,845
0,829	0,838	0,899

Without lazy loading:

Largest Contentful Paint	DOMContentLoaded	Load
1,071	1,02	1,05
0,863	0,951	0,972
0,911	0,985	1,01

Then, I applied a Network throttling of Slow 3G to try to make the differences more apparent:

With lazy loading:

Largest Contentful Paint	DOMContentLoaded	Load
6,819	10.41	12.84
6,836	10.46	12.84
6,853	10,50	12,88

Without lazy loading:

Largest Contentful Paint	DOMContentLoaded	Load
6,873	17,57	18,22
6,840	17,53	18,16
6,824	17,54	18,16

What's interesting is that Largest Contentful Paint doesn't seem to change when lazy loading is enabled or not. However, differences in DOMContentLoaded and the load event look quite big.

[ralucaStan]

Hi Albert, really nice work in this commit. I left some comments, my focus was mostly on the FE part, so I recommend another 👀 for the PHP side.

[Aljullu]

Thanks for reviewing this @ralucaStan. I applied your feedback (except a couple of comments that I leave for #4608). Let me know how everything looks now.

[ralucaStan]

Thank you for updating the comments. Really nice work! 👏