Repository navigation
Treeshaking is not implemented in metro, yet there is a tree shaking option in the plugin config. How does this work? #2922
Replies: 2 comments 5 replies
|
have you checked out https://microsoft.github.io/rnx-kit/docs/guides/bundling and https://microsoft.github.io/rnx-kit/docs/tools/metro-serializer-esbuild ? |
|
Yes, esbuild suppports treeshaking, however I'm interested in how the treeshaking flag in rnx bundler config works when it's using Metro. |
|
it's because of the second tool I linked: https://microsoft.github.io/rnx-kit/docs/tools/metro-serializer-esbuild We made it so that we can leverage esbuild to treeshake as a Metro step via a serializer. |
|
I see, just to be sure I understood correctly, if I opt for this tool, then Metro will no longer do the bundling, esbuild will? the only thing stopping me from considering this is the fact that it's experimental and multiple edge cases are mentioned in the documentation. Are you guys using it in production at Microsoft? That would be a big boost of confidence. Thanks! |
|
The Metro flow goes something like this: flowchart LR
Parse --> Transform --> Serialize --> Write
Our plugins are run inside the "Serialize" step. By this step, Metro is done transforming all source code and is ready to write to disk. We take all the transformed code and pass it to esbuild for yet another pass. The output of this pass is then written to disk. As you can probably see, it is a bit hacky. I wish there was a better way to implement tree shaking in Metro right now, but it's going to take a while to do it correctly. That said, we are using it in a number of products, including Office apps if I remember correctly. |
|
I understand 👍 , to further clarify, I don't need to setup esbuild plugin to do the bundling in order for tree shaking to work, it's included indirectly when I set treeshaking to true, yes? |
|
Yes. In order to use the esbuild plugin, you have to disable a bunch of things in Babel and Metro. None of which are compatible with debugging, which is what makes it hard to use and very confusing when things break. If you're using |
The Metro flow goes something like this:
flowchart LR Parse --> Transform --> Serialize --> WriteOur plugins are run inside the "Serialize" step. By this step, Metro is done transforming all source code and is ready to write to disk. We take all the transformed code and pass it to esbuild for yet another pass. The output of this pass is then written to disk.
As you can probably see, it is a bit hacky. I wish there was a better way to implement tree shaking in Metro right now, but it's going to take a while to do it correctly. That said, we are using it in a number of products, including Office apps if I remember correctly.