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 Jul 14, 2021

Part of #4245.

This PR adds a new Webpack config that generates frontend scripts using Preact instead of React and updates the Reviews blocks to use it.

Currently, Preact is bundled into the built file, but if in the future we use Preact in more blocks, we can consider externalizing it so it's only downloaded once. Jetpack also uses Preact for the Jetpack Search, so the win of externalizing would be even greater for sites using Jetpack and WC.

I did a quick test on the amount of scripts required to render a page only containing the All Reviews blocks in trunk and in this branch with Storefront:

Branch Requests Size
trunk 43 696,06 KB
This branch 25 320,96 KB

Excluding all scripts unrelated to the block (jQuery, WC core scripts, etc.), it looks like this:

Branch Requests Size
trunk 30 554,79 KB
This branch 12 179,69 KB
Scripts required in `trunk` to render the All Reviews block in the frontend

List of dependencies

Scripts required in this branch to render the All Reviews block in the frontend

List of dependencies

How to test the changes in this Pull Request:

For devs (no need to include this in the release testing steps)

  1. Add a Reviews block to a post or page and in the frontend verify these scripts are not loaded:
  • /wp-content/plugins/gutenberg/build/element/index.min.js
  • react
  • react-dom
  1. This PR removes "./assets/js/settings/blocks/**" from the list of sideEffects. That was introduced in this PR: Fix build issues for production builds #2042. I wasn't able to reproduce the issues mentioned in that PR, but would be good to double-check. cc @nerrad

For users (include this in the release testing steps)

  1. Smoke test All reviews, Reviews by product and Reviews by Category blocks in the editor and the frontend: try with different attributes, changing the order of reviews, clicking on Load more, etc. and verify there are no regressions.
  2. Smoke test other blocks with frontend scripts: All Products & filters, Cart and Checkout. Verify there are no regressions.

Changelog

Reduced the amount of JavaScript code required to render Reviews blocks, that will speed up page loads when a Reviews block is rendered.

@Aljullu Aljullu added focus: performance The issue/PR is related to performance. block-type: reviews Issues related to all of the reviews related blocks. labels Jul 14, 2021
@Aljullu Aljullu self-assigned this Jul 14, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Jul 14, 2021

Size Change: +2.75 kB (0%)

Total Size: 1.07 MB

Filename Size Change
build/active-filters-frontend.js 8.19 kB -77 B (-1%)
build/active-filters.js 7.83 kB -9 B (0%)
build/all-products-frontend.js 22.9 kB -107 B (0%)
build/all-products.js 37.2 kB -94 B (0%)
build/all-reviews.js 9.53 kB -73 B (-1%)
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.82 kB +4 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 8.65 kB -3 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 +1 B (0%)
build/atomic-block-components/button.js 874 B -1 B (0%)
build/atomic-block-components/category-list-frontend.js 471 B +3 B (+1%)
build/atomic-block-components/image.js 1.35 kB -1 B (0%)
build/atomic-block-components/price-frontend.js 2.13 kB +40 B (+2%)
build/atomic-block-components/price.js 2.11 kB +5 B (0%)
build/atomic-block-components/rating.js 567 B -1 B (0%)
build/atomic-block-components/sale-badge-frontend.js 860 B +3 B (0%)
build/atomic-block-components/sale-badge.js 869 B +2 B (0%)
build/atomic-block-components/sku-frontend.js 389 B +1 B (0%)
build/atomic-block-components/sku.js 393 B +1 B (0%)
build/atomic-block-components/stock-indicator-frontend.js 611 B +2 B (0%)
build/atomic-block-components/stock-indicator.js 611 B -1 B (0%)
build/atomic-block-components/summary-frontend.js 904 B -3 B (0%)
build/atomic-block-components/summary.js 911 B -1 B (0%)
build/atomic-block-components/tag-list-frontend.js 467 B +1 B (0%)
build/atomic-block-components/tag-list.js 471 B +1 B (0%)
build/atomic-block-components/title-frontend.js 1.46 kB +23 B (+2%)
build/attribute-filter-frontend.js 17.9 kB -46 B (0%)
build/attribute-filter.js 11.9 kB -15 B (0%)
build/blocks-checkout.js 21.2 kB -21 B (0%)
build/cart-frontend.js 77.7 kB -166 B (0%)
build/cart.js 45.5 kB -70 B (0%)
build/checkout-frontend.js 81.8 kB -157 B (0%)
build/checkout-i2-frontend.js 51.6 kB -104 B (0%)
build/checkout-i2.js 48.3 kB -107 B (0%)
build/checkout.js 48.5 kB -45 B (0%)
build/featured-category.js 7.31 kB -83 B (-1%)
build/featured-product.js 9.45 kB -107 B (-1%)
build/handpicked-products.js 6.45 kB -105 B (-2%)
build/price-filter-frontend.js 14.3 kB -16 B (0%)
build/price-filter.js 9.51 kB -79 B (-1%)
build/price-format.js 1.37 kB -5 B (0%)
build/product-best-sellers.js 6.64 kB -89 B (-1%)
build/product-categories.js 3.38 kB +2 B (0%)
build/product-category.js 7.51 kB -83 B (-1%)
build/product-new.js 6.79 kB -96 B (-1%)
build/product-on-sale.js 7.15 kB -77 B (-1%)
build/product-search.js 2.67 kB -10 B (0%)
build/product-tag.js 6.6 kB -95 B (-1%)
build/product-top-rated.js 6.76 kB -92 B (-1%)
build/products-by-attribute.js 7.72 kB -97 B (-1%)
build/reviews-by-category.js 11.5 kB -90 B (-1%)
build/reviews-by-product.js 13 kB -123 B (-1%)
build/reviews-frontend.js 14.4 kB +5.2 kB (+56%) 🆘
build/single-product-frontend.js 25.7 kB -60 B (0%)
build/single-product.js 9.82 kB -20 B (0%)
build/vendors--atomic-block-components/price-frontend.js 5.71 kB -1 B (0%)
build/wc-blocks-data.js 10.8 kB -24 B (0%)
build/wc-blocks-google-analytics.js 1.98 kB -10 B (-1%)
build/wc-blocks-middleware.js 1.47 kB -9 B (-1%)
build/wc-blocks-registry.js 2.74 kB -4 B (0%)
build/wc-blocks-shared-context.js 1.54 kB -1 B (0%)
build/wc-blocks-shared-hocs.js 1.75 kB -2 B (0%)
build/wc-blocks-vendors.js 235 kB -1 B (0%)
build/wc-blocks.js 3.5 kB -6 B (0%)
build/wc-payment-method-bacs.js 806 B -6 B (-1%)
build/wc-payment-method-cheque.js 806 B -1 B (0%)
build/wc-payment-method-cod.js 898 B -5 B (-1%)
build/wc-payment-method-paypal.js 839 B -5 B (-1%)
build/wc-payment-method-stripe.js 12.2 kB -18 B (0%)
build/wc-settings.js 2.91 kB -9 B (0%)
ℹ️ View Unchanged
Filename Size
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.57 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 334 B
build/atomic-block-components/category-list.js 476 B
build/atomic-block-components/image-frontend.js 1.88 kB
build/atomic-block-components/rating-frontend.js 561 B
build/atomic-block-components/title.js 1.29 kB
build/checkout-blocks/sample.js 174 B
build/wc-blocks-editor-style-rtl.css 15.4 kB
build/wc-blocks-editor-style.css 15.4 kB
build/wc-blocks-style-rtl.css 19.8 kB
build/wc-blocks-style.css 19.8 kB
build/wc-blocks-vendors-style-rtl.css 1.05 kB
build/wc-blocks-vendors-style.css 1.05 kB

compressed-size-action

@Aljullu Aljullu mentioned this pull request Jul 16, 2021
@Aljullu Aljullu force-pushed the add/reviews-preact branch from 24e976d to 47eafd5 Compare July 27, 2021 15:01
@Aljullu
Copy link
Contributor Author

Aljullu commented Aug 16, 2021

Closing this PR because we decided not to add Preact to any of our blocks and instead continue relying on @wordpress/element with the hope performance improvements will come at the framework level in the future. More info here: pca54o-20m-p2.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

block-type: reviews Issues related to all of the reviews related blocks. focus: performance The issue/PR is related to performance.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants