@nrwl/next build does not treeshake @nrwl/next library

astrodomas commented 1 year ago

Current Behavior

Currently I have 2 client components exported from my @mylib/next but if I import 1 client component via index to my app then my bundlesize increases if it is a direct import - then it decreases.

Can this be due to SWC?

// Increased bundle size
// apps/next-app/pages/carousel

import { MyCarousel } from '@mylib/next'

export const page = () => <MyCarousel />

export default page;

'use client'
// Reduced bundle size
// apps/next-app/pages/carousel
import { MyCarousel } from '@mylib/next/components/Carousel'

export const page = () => <MyCarousel />

export default page;

Root index:

'use client'
// libs/my-lib/src/index.ts
export * from './client'

Components index:

// libs/my-lib/src/components/index.ts
export * from './Carousel'

Component index:

// libs/my-lib/src/components/Carousel/index.ts
export * from './Carousel'
export {default as MyCarousel} from './Carousel'

Before direct import:

Expected Behavior (after direct import)

The bundlesize should be reduced:

GitHub Repo

No response

Steps to Reproduce

Create a @nx/next application
Create a @nx/next library
Create 2 heavy components inside the library
Export them to a single index.ts
Import a component into a next.js app page
After importing - run the build with bundle analyzer to see the bundlesize of each page
Change the import path to be a direct component path
After the change - run the build again and the bundlesize should be reduced

Nx Report

$ npx nx report
>  NX  Falling back to ts-node for local typescript execution. This may be a little slower.
  - To fix this, ensure @swc-node/register and @swc/core have been installed

 >  NX   Report complete - copy this into the issue template

   Node   : 18.16.0
   OS     : win32 x64
   npm    : 9.5.1
   Hasher : Native

   nx                 : 16.2.1
   @nx/js             : 16.2.1
   @nx/jest           : 16.2.1
   @nx/linter         : 16.2.1
   @nx/workspace      : 16.2.1
   @nx/cypress        : 16.2.1
   @nx/devkit         : 16.2.1
   @nx/eslint-plugin  : 16.2.1
   @nx/next           : 16.2.1
   @nx/react          : 16.2.1
   @nx/rollup         : 16.2.1
   @nx/storybook      : 16.2.1
   @nrwl/tao          : 16.2.1
   @nx/web            : 16.2.1
   @nx/webpack        : 16.2.1
   typescript         : 5.0.4
   ---------------------------------------
   Community plugins:
   @nxkit/style-dictionary : 3.0.1

Failure Logs

No response

Operating System

[ ] macOS
[ ] Linux
[X] Windows
[ ] Other (Please specify)

Additional Information

No response

astrodomas commented 11 months ago

Any news on this? @AgentEnder

astrodomas commented 8 months ago

Still persistent as of nx v17.2.0. By changing imports got a huge bundlesize improvement

victorcarvalhosp commented 8 months ago

Still persistent as of nx v17.2.0. By changing imports got a huge bundlesize improvement

@astrodomas Not related to the issue itself, but I was not able to send you a private message. How were you able to set this % of Budget that you're showing in the first screenshot?

astrodomas commented 8 months ago

Still persistent as of nx v17.2.0. By changing imports got a huge bundlesize improvement

@astrodomas Not related to the issue itself, but I was not able to send you a private message. How were you able to set this % of Budget that you're showing in the first screenshot?

This is a PR comment generated by the bot

By using https://github.com/hashicorp/nextjs-bundle-analysis , specifically the setup for app router described here: https://github.com/hashicorp/nextjs-bundle-analysis/issues/83 . But basically it takes nextjs app router build, inside the master branch it uploads an artifact to github and then compares the PR's bundlesize to the masters bundlesize and makes a PR comment on the bundlesize.

nrwl / nx