Reduction in Bundle Size/ Tree shaking problem?

[deevo-sage]

What problem does this feature solve?

The bundle size increases drastically when using tremor. but if I importing directly from the Dist folder, if you see the '/real-user-report' path

just importing from the dist path reduced the bundle size by 200 kb and I'm just using Card on that page

for the '/performance' path, I'm using a lot more components and the bundle size was 430KB and again just shifting to dist import for all the charts and elements the bundle size reduced around 200KB

What does the proposed API look like?

I Assume there is some issue with Tree Shaking.

[severinlandolt]

#493 #489

[motinados]

I tried a few things using Vite.

1. Vite as per tutorial

2. Vite + deep imports

3. Vite + '"sideEffects": false' added '"sideEffects": false' to './node_modules/@tremor/react/package.json' Please note that I haven't verified the functionality.

The Code is here

Many libraries have a sideEffect field, but tremor does not. Wouldn't this be a solution?

[mitrotasios]

yes indeed, that's most likely the solution. Thanks for trying that out! Feel free to open a PR and add the toggle to the package.json if you like :)

[motinados]

I also tried a few things with Nextjs.

• Nextjs13

• Nextjs13 + deep imports

• Nextjs13 + sideEffects: false
  

Just the sideEffects field is not enough for Nextjs.

[mitrotasios]

Thank you!

[DostalJ]

I am curious. Are changes to the tremor source code feasible and planned, such that the bundle size with normal imports can be as small as it is with deep import currently?

Thank you very much for providing us with a great dashboarding solution Tremor has become.

[motinados]

This code works for my nextjs app. Can someone please try it? Note that next@canary is required.

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        optimizePackageImports: [
          "@tremor/react"
        ]
    }
}
module.exports = nextConfig

package.json

"next": "^13.4.20-canary.12"

[DostalJ]

Results of optimizedPackegeImports on my app with the latest "next": "^13.4.20-canary.12" Thanks for help!

Before:

After:

[angelhodar]

@DostalJ In my case the optimizePackageImports doesnt make a big impact because I am only using the charts from tremor, the rest of the components are from headlessui and shadcn. In your case I suppose you just import the tremor button for example in one page, and in that cases is where the impact is much bigger.

[paullaros]

Looks like Next.js is optimizing @tremor/react by default: https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports