When trying vitejs recently, I was impressed by the DX and the performances, except for one specific thing:

There is a known issue about TreeShaking not working when serving files in developer mode.
For large repositories with multiple yarn workspaces, it results in hundreds of unused files being served to the browser and dramatically slowing down the first render of the application.

A first plugin was developed by a member of the community to answer this problem: vite-plugin-entry-shaking.
Sadly, I was unable to make it work on my pet project and there was a critical lack of support for the re-export syntax: export * from 'module'.

I ended up creating and releasing a new plugin: vite-plugin-workspace-tree-shaking.

Package size and pnpm

The first draft was able to cover my usecase but was importing a lot of dependencies.
I refactored the plugin using pnpm to split the code in 2 packages.
If you don't know about pnpm, on top of other great features, it has a great DX for executing tasks on multiple javascript packages.
I can run pnpm -r build to recursively go into each package of my monorepo and build them all.

The code extracted in the second package of the plugin allows to optionnally extend its behavior by supporting .tsx files, with its dedicated dependencies.

Integration test for a vitejs plugin

... or we could also call that an End-To-End test.

To guarrantee that the behavior of the plugin is comform to my expectations, I created a project with vitejs+react+typescript.
The project includes a workspace with a lot of unused React components.
It has a few tests using cypress where the vitejs developer mode is launched and the served files are observed: If only the useful files are loaded, the test is green!

cy.intercept('@fs/**/colors/**', {log: false}).as('hmr');
cy.visit('http://localhost:5173');
cy.get('@hmr.all').then(requests => {
  const paths = requests.map(r => r.request.url.match(/\/colors\/(.*)/)[1]);

  expect(paths).to.contain('src/components/yellow/GoldMetallic.jsx');
  expect(paths).not.to.contain('src/components/yellow/Amber.jsx');
});

First release

You can find the source code of the plugin at https://github.com/tseho/vite-plugin-workspace-tree-shaking.