next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Bundle size discrepancies when app consumes a buildable package vs imports directly from third-party package

Open hubertkuoch opened this issue 3 years ago • 0 comments

Verify canary release

  • [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:22 PDT 2022; root:xnu-8020.140.41~1/RELEASE_ARM64_T6000 Binaries: Node: 16.17.0 npm: 8.15.0 Yarn: N/A pnpm: 7.11.0 Relevant packages: next: 12.3.0 eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Just scaffolded a monorepo with turbo + next and I noted that:

  1. Next.js app does not seem to recognise conditional exports mjs/cjs extensions from buildable package

    • Current workaround consists in using js extension for buildable package artifacts, but is there a way to make next build resolve mjs/cjs exports defined in package.json files?
  2. Inconsistent bundle size when an app imports third party package vs. when the app uses the same third party package via an internal buildable package:

    • For example, the buildable ui lib is built upon @emotion/cache and is only consumed by second-app while first-app does not depend on ui lib but on @emotion/cache directly via its dependencies. Fundamentally, the two apps are identical (based on Next.js/MUI template, the only difference being that some MUI-related code are outsources in ui lib for second-app.
    • Still the builds show 50kb difference because for second-app, next build command includes some code related to @emotion/cache dependencies (e.g. readable-stream, html-tokenize, string_decoder etc.). So I was wondering why third-party packages like @emotion/cache are not treated the same depending on whether they are called directly from app dependencies (see first-app) or indirectly from a library built upon them (see second-app) and if there is a way to fix this?

Expected Behavior

next build produces consistent bundle size for identical apps, no matter how their dependencies are defined (directly or indirectly via internal buildable lib)

Link to reproduction

https://github.com/hubertkuoch/next-monorepo

To Reproduce

The README.md contains the few commands to copy/paste if helpful for reproduction

hubertkuoch avatar Sep 14 '22 17:09 hubertkuoch