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

Remove assets/js/settings/blocks from sideEffects list #4767

Merged
merged 1 commit into from
Sep 21, 2021

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Sep 16, 2021

Cherry-picks the third commit from #4463.

After some investigation, I noticed that having ./assets/js/settings/blocks/** listed as scripts with side effects caused several frontend scripts to include the wp-blocks dependency even if it was not directly used. Affected blocks are:

  • Active filters
  • Cart
  • Checkout
  • Mini Cart
  • Price filter
  • Reviews

wp-blocks has several other dependencies, so avoiding it helps in reducing the total downloaded size when rendering those blocks in the frontend.

For reference, ./assets/js/settings/blocks/** was added to sideEffects in #2042, but I tried to reproduce the issues mentioned there, and I couldn't. In addition, I took a look at the code under /assets/js/settings/blocks/ and I couldn't find anything that would require it being listed as having side effects.

Manual Testing

Note: Make sure to test it on a product build (running npm run build).

Unfortunately, it's difficult to predict the effect this change will have. In theory, any block that imports from block-settings might be affected, so I would suggest adding all blocks into a page and verifying they load correctly in the editor and the frontend.

Smoke testing the Checkout flow would also be great (validation, payment with some payment methods, etc.).

Performance Impact

A dependency has been removed from several frontend scripts, so it should cause a performance improvement on pages loading those blocks.

Changelog

Removed wp-blocks dependency from several frontend scripts.

@Aljullu Aljullu added status: needs review focus: performance The issue/PR is related to performance. block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. block-type: reviews Issues related to all of the reviews related blocks. block: filter by price Issues related to the Filter by Price block. block: active filters Issues related to the Active Filters block. block: mini-cart Issues related to the Mini-Cart block. labels Sep 16, 2021
@Aljullu Aljullu requested a review from a team as a code owner September 16, 2021 15:57
@Aljullu Aljullu self-assigned this Sep 16, 2021
@Aljullu Aljullu requested review from senadir and removed request for a team September 16, 2021 15:57
@github-actions
Copy link
Contributor

github-actions bot commented Sep 16, 2021

Size Change: -1.22 kB (0%)

Total Size: 1.25 MB

Filename Size Change
build/active-filters-frontend.js 8.34 kB -41 B (0%)
build/active-filters.js 8.01 kB -5 B (0%)
build/all-products-frontend.js 23.1 kB -2 B (0%)
build/all-products.js 37 kB -18 B (0%)
build/all-reviews.js 9.56 kB -75 B (-1%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.66 kB +1 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB -3 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 8.38 kB +6 B (0%)
build/atomic-block-components/add-to-cart.js 7.73 kB -2 B (0%)
build/atomic-block-components/button-frontend.js 1.74 kB +3 B (0%)
build/atomic-block-components/category-list-frontend.js 472 B +1 B (0%)
build/atomic-block-components/image-frontend.js 1.88 kB -4 B (0%)
build/atomic-block-components/image.js 1.35 kB -2 B (0%)
build/atomic-block-components/price-frontend.js 2.13 kB +39 B (+2%)
build/atomic-block-components/price.js 2.11 kB +7 B (0%)
build/atomic-block-components/rating-frontend.js 563 B +1 B (0%)
build/atomic-block-components/rating.js 565 B -2 B (0%)
build/atomic-block-components/sale-badge.js 869 B +1 B (0%)
build/atomic-block-components/sku.js 393 B +1 B (0%)
build/atomic-block-components/summary-frontend.js 906 B +1 B (0%)
build/atomic-block-components/tag-list-frontend.js 468 B -1 B (0%)
build/atomic-block-components/tag-list.js 471 B -2 B (0%)
build/atomic-block-components/title-frontend.js 1.47 kB +29 B (+2%)
build/attribute-filter-frontend.js 18.7 kB -34 B (0%)
build/attribute-filter.js 12.2 kB -3 B (0%)
build/cart-frontend.js 91.3 kB +10 B (0%)
build/cart-i2-frontend.js 91.1 kB +8 B (0%)
build/cart-i2.js 46.6 kB -29 B (0%)
build/cart.js 46.5 kB -39 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.09 kB +5 B (0%)
build/checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.83 kB +1 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.83 kB -5 B (0%)
build/checkout-blocks/fields-frontend.js 290 B -1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.56 kB +3 B (0%)
build/checkout-blocks/order-summary-frontend.js 12.7 kB +7 B (0%)
build/checkout-blocks/payment-frontend.js 4.51 kB -1 B (0%)
build/checkout-blocks/shipping-address-frontend.js 1.62 kB +1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 5.54 kB +3 B (0%)
build/checkout-blocks/terms-frontend.js 1.64 kB -4 B (0%)
build/checkout-blocks/totals-frontend.js 270 B -1 B (0%)
build/checkout-frontend.js 54.2 kB +15 B (0%)
build/checkout.js 52.5 kB -17 B (0%)
build/featured-category.js 7.73 kB -65 B (-1%)
build/featured-product.js 9.42 kB -85 B (-1%)
build/handpicked-products.js 6.26 kB -73 B (-1%)
build/mini-cart-component-frontend.js 36.6 kB +19 B (0%)
build/mini-cart-frontend.js 2.35 kB +2 B (0%)
build/mini-cart.js 2.34 kB -1 B (0%)
build/price-filter-frontend.js 14.4 kB -93 B (-1%)
build/price-filter.js 9.63 kB -76 B (-1%)
build/product-best-sellers.js 6.61 kB -68 B (-1%)
build/product-categories.js 3.38 kB +1 B (0%)
build/product-category.js 7.49 kB -66 B (-1%)
build/product-new.js 6.77 kB -72 B (-1%)
build/product-on-sale.js 7.13 kB -66 B (-1%)
build/product-search.js 2.66 kB -2 B (0%)
build/product-tag.js 6.58 kB -73 B (-1%)
build/product-top-rated.js 6.73 kB -73 B (-1%)
build/products-by-attribute.js 7.7 kB -73 B (-1%)
build/reviews-by-category.js 11.5 kB -80 B (-1%)
build/reviews-by-product.js 13 kB -71 B (-1%)
build/reviews-frontend.js 8.97 kB -26 B (0%)
build/single-product.js 9.77 kB -16 B (0%)
build/stock-filter-frontend.js 8.77 kB -34 B (0%)
build/stock-filter.js 7.8 kB -3 B (0%)
build/vendors--atomic-block-components/add-to-cart--checkout-blocks/billing-address--checkout-blocks/orde--63cde524-frontend.js 16.2 kB +1 B (0%)
build/vendors--atomic-block-components/add-to-cart-frontend.js 4.77 kB -1 B (0%)
build/vendors--checkout-blocks/billing-address--checkout-blocks/order-summary--checkout-blocks/shipping-address-frontend.js 5.02 kB +2 B (0%)
build/wc-blocks-vendors.js 254 kB +15 B (0%)
build/wc-blocks.js 3.5 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 333 B
build/atomic-block-components/button.js 875 B
build/atomic-block-components/category-list.js 476 B
build/atomic-block-components/sale-badge-frontend.js 862 B
build/atomic-block-components/sku-frontend.js 391 B
build/atomic-block-components/stock-indicator-frontend.js 613 B
build/atomic-block-components/stock-indicator.js 611 B
build/atomic-block-components/summary.js 911 B
build/atomic-block-components/title.js 1.29 kB
build/blocks-checkout.js 21 kB
build/checkout-blocks/actions-frontend.js 1.47 kB
build/checkout-blocks/billing-address-frontend.js 1.14 kB
build/checkout-blocks/contact-information-frontend.js 3.88 kB
build/checkout-blocks/sample-frontend.js 249 B
build/price-format.js 1.37 kB
build/single-product-frontend.js 26.2 kB
build/vendors--atomic-block-components/price--checkout-blocks/order-summary--checkout-blocks/shipping-methods-frontend.js 5.71 kB
build/vendors--checkout-blocks/order-summary-frontend.js 3.11 kB
build/wc-blocks-data.js 11.3 kB
build/wc-blocks-editor-style-rtl.css 15.6 kB
build/wc-blocks-editor-style.css 15.6 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.47 kB
build/wc-blocks-registry.js 3.73 kB
build/wc-blocks-shared-context.js 1.54 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 20.1 kB
build/wc-blocks-style.css 20.1 kB
build/wc-blocks-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 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
Copy link
Contributor

nerrad commented Sep 16, 2021

Since this involves a change to the side-effects config, testing will need to be done against a production build (npm run build) as that's when tree-shaking is applied and any issues would surface.

@Aljullu
Copy link
Contributor Author

Aljullu commented Sep 17, 2021

Since this involves a change to the side-effects config, testing will need to be done against a production build (npm run build) as that's when tree-shaking is applied and any issues would surface.

Right, I should have mentioned this. Added a note in the testing instructions.

@senadir senadir force-pushed the update/blocks-settings-side-effects branch from b4eb088 to f9d4493 Compare September 21, 2021 13:34
Copy link
Member

@senadir senadir left a comment

Choose a reason for hiding this comment

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

Rebased and tested again and everything working fine! Will merge after tests pass.

@senadir senadir force-pushed the update/blocks-settings-side-effects branch from f9d4493 to d62e37b Compare September 21, 2021 13:42
@Aljullu Aljullu merged commit 6cf22c2 into trunk Sep 21, 2021
@Aljullu Aljullu deleted the update/blocks-settings-side-effects branch September 21, 2021 15:46
@senadir senadir added the type: dependencies Pull requests that update a dependency file (used by renovate). label Sep 27, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: active filters Issues related to the Active Filters block. block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. block: filter by price Issues related to the Filter by Price block. block: mini-cart Issues related to the Mini-Cart block. block-type: reviews Issues related to all of the reviews related blocks. focus: performance The issue/PR is related to performance. type: dependencies Pull requests that update a dependency file (used by renovate).
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants