Add tree shaking support for woocommerce components #7034

louwie17 · 2021-05-20T18:54:37Z

This adds tree shaking support to the @woocommerce/components package, allowing you to only bundle in the used components.
The biggest changes are the sideEffects addition in package.json, and the update in extensions/build.js to also build the style for each individual component if used outside of WooCommerce.

For the rest none of the components really looked like they had sideEffects , and I only updated a couple components that where in the same file.

No changelog as it is in the package.

Detailed test instructions:

The easiest way of testing this is by making use of the extension examples, just have to update the webpack config for it a bit:
Update the extensions/examples.config.js by setting the mode to production (enabled tree shaking) adding components to the excludedExternals list for the extraction plugin:

new WooCommerceDependencyExtractionWebpackPlugin( {
	excludedExternals: [ 'components' ],
} )

And I also had to set loose to false for the babel-loader (I had some warnings show up), and disabled minification:

optimization: {
  minimize: false,
},

Then build one of the examples npm run example -- --ext=add-task adding a woocommerce/components component to it somewhere. (The Spinner for example).
Then check the dist/index.js file to see if only the imported component and it's dependencies are added, I used a grep command:
grep -r 'CONCATENATED MODULE: ./packages/components' docs/examples/extensions/add-task/dist
Enable the plugin, and see if the component renders correctly (styling will work automatically given we are within WooCommerce).
Now remove this line to remove the main styling: https://github.com/woocommerce/woocommerce-admin/blob/main/src/Loader.php#L420-L425
Add the specific component styling to the example index.scss (you might have to enqueue it as well, if it wasn't there before)
Going with the spinner example:
@import '../../../../../packages/components/build-style/spinner/style.css';
Check if the component you added is styled correctly now.

louwie17 · 2021-05-20T18:55:10Z

bin/packages/build.js

 async function buildPackageScss( packagePath ) {
 	const srcDir = path.resolve( packagePath, SRC_DIR );
-	const scssFiles = glob.sync( `${ srcDir }/*.scss` );
+	const scssFiles = glob.sync( `${ srcDir }/**/*.scss` );


This way we generate the css for the individual package components as well.

louwie17 · 2021-05-20T18:56:50Z

packages/components/package.json

+	"sideEffects": [
+		"build-style/**",
+		"src/**/*.scss"
+	],


I stole this from @wordpress/components, but it seemed to match our use case pretty well.

louwie17 · 2021-05-20T18:58:22Z

packages/dependency-extraction-webpack-plugin/src/index.js

 * @return {string} Camel-cased string.
 */
 function camelCaseDash( string ) {
 	return string.replace( /-([a-z])/g, ( _, letter ) => letter.toUpperCase() );


These changes allowed me to more easily exclude a package if needed by doing this:

new WooCommerceDependencyExtractionWebpackPlugin( { excludedExternals: [ 'components' ], } ),

louwie17 · 2021-05-20T19:00:38Z

webpack.config.js

 			{
 				test: /\.s?css$/,
-				exclude: /storybook\/wordpress/,
+				exclude: [ /storybook\/wordpress/, /build-style\/*\/*.css/ ],


I added this to not include all the individual component styles as well. Not sure how much of a difference it makes (or if I did it correctly).

louwie17 · 2021-05-20T19:04:24Z

packages/components/CHANGELOG.md

+# Unreleased
+
+-   Add tree shaking support to this package. #7034
+


If we go ahead with this we probably want to do a major release (7.0.0)

louwie17 · 2021-05-20T19:06:36Z

@samueljseay & @psealock I added both of you, given you guy's might be most interested in these changes, let me know what you think?

samueljseay · 2021-05-20T23:27:31Z

packages/components/src/section/header.js

+/**
+ * External dependencies
+ */
+import { useContext } from 'react';


I think we should be importing this from @wordpress/element

Updated here: e44d096

psealock

I decided to test this with a brand new plugin using npm run create-wc-extension. All of the @woocommerce/components get bundled unfortunately, but I may not be doing it right. Here are my steps, but I excluded changes to babel-loader because I didn't quite understand what was needed there.

npm run create-wc-extension to get a new extension
npm link the dependency extraction webpack plugin so that the new extension can get the version in this branch
In my extension, npm install
npm install --save @woocommerce/components
npm link @woocommerce/dependency-extraction-webpack-plugin
Add the new option to exclude externals excludedExternals: [ 'components' ],
npm run build Build a production version

My extension's js looks like:

import { Count } from '@woocommerce/components';

console.log( Count );

Then I check the build file, build/index.js and its pretty clear all the components got included. Can you advise what steps might be missing?

psealock · 2021-05-21T03:33:16Z

packages/dependency-extraction-webpack-plugin/src/index.js

 }

-const wooRequestToExternal = ( request ) => {
+const wooRequestToExternal = ( request, excludedExternals ) => {


excludedExternals is a new option value, so will need to be reflected in the README

https://github.com/woocommerce/woocommerce-admin/tree/1c16db605af1436647d990230bd146e74f582d88/packages/dependency-extraction-webpack-plugin

Now that I think about it, this should really be upstream in Gutenberg as well https://github.com/WordPress/gutenberg/tree/trunk/packages/dependency-extraction-webpack-plugin if you want to make a PR there.

Just to clarify: We should keep the changes in this PR (with README updates), but also support the excludedExternals param in the original plugin within Gutenberg?

Yup, thats right

I created a PR, I will just update this PR to follow the format I went with here: WordPress/gutenberg#32220

louwie17 · 2021-05-25T15:31:03Z

Then I check the build file, build/index.js and its pretty clear all the components got included. Can you advise what steps might be missing?

@psealock I just followed your steps, with the only additional step being npm link @woocommerce/components and it seem to tree shake correctly. Maybe you forgot the npm link @woocommerce/components step?
The most important addition is the sideEffects in package.json, so just see if that is there in node_modules/@woocommerce/components/package.json, if not, it didn't link correctly.

psealock

Maybe you forgot the npm link @woocommerce/components step?

Yup, that was the one. Thanks @louwie17 this is testing well for me and is a big improvement for @woocommerce/components

…ommerce-admin#7034) * Add woocommerce/components tree shaking support * Compile individual component styles for individual use * Update readme * Add changelog * Fix correct import * Update readme with dependency extraction updates * Update dependency extraction naming

probot-autolabeler bot added tool: monorepo infrastructure @woocommerce/components Packages labels May 20, 2021

github-actions bot added the needs changelog entry label May 20, 2021

louwie17 commented May 20, 2021

View reviewed changes

github-actions bot removed the needs changelog entry label May 20, 2021

louwie17 force-pushed the dev/7024_woocommerce_components_tree_shaking branch from 87ec791 to 1c16db6 Compare May 20, 2021 19:03

louwie17 commented May 20, 2021

View reviewed changes

louwie17 requested review from psealock and samueljseay May 20, 2021 19:04

louwie17 added the status: needs review label May 20, 2021

samueljseay reviewed May 20, 2021

View reviewed changes

psealock reviewed May 21, 2021

View reviewed changes

samueljseay added needs: author feedback The issue/PR needs a response from any of the parties involved in the issue. and removed status: needs review labels May 24, 2021

louwie17 force-pushed the dev/7024_woocommerce_components_tree_shaking branch 2 times, most recently from 50b649e to 221140c Compare May 25, 2021 19:31

psealock approved these changes May 26, 2021

View reviewed changes

psealock added status: ready to merge and removed needs: author feedback The issue/PR needs a response from any of the parties involved in the issue. labels May 26, 2021

louwie17 added 5 commits May 26, 2021 13:48

Add woocommerce/components tree shaking support

4102a64

Compile individual component styles for individual use

6d31f22

Update readme

ca58762

Add changelog

3e512a7

Fix correct import

85428ae

louwie17 added 2 commits May 26, 2021 13:48

Update readme with dependency extraction updates

be5aa9e

Update dependency extraction naming

23c2cd1

louwie17 force-pushed the dev/7024_woocommerce_components_tree_shaking branch from 221140c to 23c2cd1 Compare May 26, 2021 17:15

louwie17 merged commit 84dcfd7 into main May 26, 2021

louwie17 deleted the dev/7024_woocommerce_components_tree_shaking branch May 26, 2021 19:35

tomalec mentioned this pull request Nov 21, 2022

Add a public bundledPackages/excludedExternals option to DEWP WordPress/gutenberg#45948

Open

		# Unreleased

		- Add tree shaking support to this package. #7034

Add tree shaking support for woocommerce components #7034

Add tree shaking support for woocommerce components #7034

Uh oh!

Conversation

louwie17 commented May 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Detailed test instructions:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

louwie17 commented May 20, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

psealock left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

psealock May 21, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

louwie17 commented May 25, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

psealock left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

louwie17 commented May 20, 2021 •

edited

Loading

psealock left a comment •

edited

Loading

psealock May 21, 2021 •

edited

Loading

louwie17 commented May 25, 2021 •

edited

Loading