Tree-Shaking in React Output Target #359
Conversation
| @@ -19,7 +20,7 @@ export async function reactProxyOutput( | |||
| const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components); | |||
| const rootDir = config.rootDir as string; | |||
| const pkgData = await readPackageJson(rootDir); | |||
|
|
|||
| //here | |||
|
working on fixing/adding tests now. |
|
tests added. |
|
Would love some feedback from @JessicaSachs or @tanner-reits or @thetaPC :) |
There was a problem hiding this comment.
Hey @drakegens 👋
Sorry for the delay here! I've been poking at this as I've had time over the last few weeks. Haven't dived into the code changes too much, but am having some issues confirming the initial treeshaking issue. Testing some builds of the Ionic Framework with this implementation and the existing React output target isn't producing a difference in bundle sizes when analyzing with a tool like the Rollup bundle analyzer. Granted, the Ionic Framework does have some additional build/bundle steps that are influencing the final distributed code.
I tried to test using the Crayons repo in the Github issue, but there are quite a few issues with getting started in that project (probably me doing something wrong). If you have a better reproduction case (or we can reach out in the Github issue), I'm happy to check things out there.
Aside from that, I was seeing some errors when testing in the Ionic Framework after generating the React proxies and then trying to build the React package. It appears this was just an issue with import statements getting generated when export statements should have been created in the specified proxiesFile for the output target config. But, that's a small issue we can work through if/when we have a good reproduction.
Please let me know if you have questions or want clarification on anything! Hopefully we can get this squared away quickly!
|
Hey there @tanner-reits! Sorry for the delay. I was able to see a ~1mb decrease in our bundle size (an app that consumes web components built with Stencil and wrapped via React Output Target). Using webpack-bundle-analyzer. Unfortunately I can't share my employer's code. So we'll need to find another reproduction case. I could try and use the Crayons project too. |
|
@drakegens @tanner-reits any progress on this ? |
Pull request checklist
Please check if your PR fulfills the following requirements:
npm run build) was run locally for affected output targetsnpm test) were run locally and passednpm run prettier) was run locally and passedPull request type
Please check the type of change your PR introduces:
What is the current behavior?
Tree-Shaking is not working for react-output-target
Issue URL: #255
Web Components exports will be split into separate files, enabling tree-shaking
Does this introduce a breaking change?
Other information