Inefficient code splitting with out of the box Nx configuration (vite + typescript) #23442
Replies: 4 comments
-
I have an update: I sort manage to solve this (at the moment) is by avoinding using the main barrel file at 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. |
Beta Was this translation helpful? Give feedback.
-
@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. |
Beta Was this translation helpful? Give feedback.
-
Very interested in a fix to this - how can I get efficient code splitting without breaking up my @/components library into 100 different libs? |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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:
Both the PoCs have a React + Ts app with
react-router-dom
andReact.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 tocompilerOptions
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
npm build
npx nx build frontend
(alternative you can re-create everthing by hand, I wrote the instructions on the"Additional information" bellow)
Nx Report
Failure Logs
No response
Package Manager Version
10.2.4
Operating System
Additional Information
This is a
package-based
Monorepo but usesNx
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:
npx create-nx-workspace@latest test-nx-vite-tree-shaking --preset=npm
cd test-nx-vite-tree-shaking
npm install @nx/react -W
npx nx g @nx/react:app frontend --routing --style styled-components --bundler vite --e2eTestRunner none --directory=packages/frontend
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 useReact.lazy
to split the code.Beta Was this translation helpful? Give feedback.
All reactions