Inefficient code splitting with out of the box Nx configuration (vite + typescript)

[fsgreco]

Current Behavior

I have an NX package-based Monorepo.
Created two packages with Nx plugins (an App with React and TS and a UI components library).
Following the Nx paradigm I'm importing my UI components from the unique barrel export file.
(More details on the Additional Information bellow)

The problem: when building the project I notice that the code splitting is not working.
Specially if compared with a similar setup using only vite and typescript.

As you can see in this PoC image (Nx project is the right one).
The code splitting of the pages is useless because it only has 0.40kB of data:

You can try by yourself the two PoCs:

• Vanilla one: vite starter app with React and TS: https://github.com/fsgreco/poc-vite-ts-tree-shaking
• Nx Monorepo, a vite app with React and TS: https://github.com/fsgreco/poc-NX-vite-ts-tree-shaking

Both the PoCs have a React + Ts app with react-router-dom and React.lazy to split code into pages.

I also tried to modify the Nx default boilerplate accordingly to the vite starter app (first PoC) but no matter what option I pass to rollupOptions nor to compilerOptions inside tsconfig file it doesn't change anything: when compiling in an Nx monorepo the code splitting is not working fine.

Expected Behavior

It should code split better, having code splitting with 0.29kB are defeating the purpose of code splitting.

GitHub Repo

https://github.com/fsgreco/poc-NX-vite-ts-tree-shaking

Steps to Reproduce

1. clone the two repositories
2. launch the first one with npm build
3. launch the second one with npx nx build frontend
   (alternative you can re-create everthing by hand, I wrote the instructions on the"Additional information" bellow)

Nx Report

   Node   : 21.5.0
   OS     : darwin-x64
   npm    : 10.2.4
   
   nx                 : 17.2.8
   @nx/js             : 17.2.8
   @nx/linter         : 17.2.8
   @nx/eslint         : 17.2.8
   @nx/workspace      : 17.2.8
   @nx/devkit         : 17.2.8
   @nx/eslint-plugin  : 17.2.8
   @nx/react          : 17.2.8
   @nrwl/tao          : 17.2.8
   @nx/vite           : 17.2.8
   @nx/web            : 17.2.8
   typescript         : 5.2.2

Failure Logs

No response

Package Manager Version

10.2.4

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

This is a package-based Monorepo but uses Nx plugins to generate the boilerplate code.
You can inspect the git history of the poc to notice how I proceed, or launch this commands to replicate that PoC initial setup:

1. npx create-nx-workspace@latest test-nx-vite-tree-shaking --preset=npm
2. cd test-nx-vite-tree-shaking
3. npm install @nx/react -W
4. npx nx g @nx/react:app frontend --routing --style styled-components --bundler vite --e2eTestRunner none --directory=packages/frontend
5. npx nx g @nx/react:lib ui --directory=packages/ui --importPath=@myorg/ui --bundler=vite --skipTests=true

This will give you the main setup, you can then proceed to install a ui library and create your components (that will be exported by the barrel file ./ui/src/index.ts).
7. npm install antd -W
8. npx nx g @nx/react:component my-table --export --directory packages/ui/src/lib/my-table
9. From here you add the antd components inside your components and then use them inside the pages.
10. You will also need pages inside your app, setting up react-router-dom and use React.lazy to split the code.

[fsgreco]

I have an update: I sort manage to solve this (at the moment) is by avoinding using the main barrel file at ./packages/ui/src/index.ts and altering the default paths entry inside tsconfig.base.json with a glob pattern.

Instead of this:

      "@ui": ["packages/ui/src/index.ts"]

I changed it with this:

      "@ui/*": ["packages/ui/src/lib/*"]

and then adeguated the imports on respective pages:

// OLD: import { MyProgress } from "@ui";
import { MyProgress } from "@ui/my-progress/my-progress";
// OLD: import { MyButton } from "@ui";
import { MyButton } from "@ui/my-button/my-button";

This give me a more suitable result:

➜   npx nx build frontend --skip-nx-cache --emptyOutDir

> nx run frontend:build:production --emptyOutDir

vite v5.0.12 building for production...
✓ 1329 modules transformed.
../../dist/packages/frontend/index.html                                          0.40 kB │ gzip:  0.27 kB
../../dist/packages/frontend/assets/home-page-paNJ4F8o.js                       29.87 kB │ gzip: 10.17 kB
../../dist/packages/frontend/assets/styled-components.browser.esm-X5zCYjbQ.js   36.95 kB │ gzip: 14.71 kB
../../dist/packages/frontend/assets/about-page-H6EMGzLe.js                      70.64 kB │ gzip: 24.99 kB
../../dist/packages/frontend/assets/index-x42QfUpy.js                          262.16 kB │ gzip: 86.99 kB
✓ built in 7.59s

Clearly I don't consider this a real solution because one lost the ability to import from the barrel file and it also lost part of the auto suggestion made by Typescript.

[ivan-palatov]

@fsgreco Whats the part about "lost part of the auto suggestion made by Typescript"? What exactly is wrong with the suggestions? I wanted to try it on a project I'm working on.

[stephenwade]

Very interested in a fix to this - how can I get efficient code splitting without breaking up my @/components library into 100 different libs?

[Coly010]

Thanks for raising this!

Most bundlers have a method for stating if a file path has side effects. If this is set to false, then the bundler knows it can tree shake more aggressively.

The most generic way is to set sideEffects: false in your package.json.