Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Insanely Huge Bundle Sizes on Next.JS #6

Closed
dukesx opened this issue Sep 26, 2021 · 2 comments
Closed

Insanely Huge Bundle Sizes on Next.JS #6

dukesx opened this issue Sep 26, 2021 · 2 comments

Comments

@dukesx
Copy link

dukesx commented Sep 26, 2021

Hello,

Love the work you guys are doing, i have been looking for this for a long time. Now just a little problem here, i am trying to use react based component so that i can utilize it in my Nextjs project but it seems that there is no tree shaking in it at all. I used 5 icons , and the project ended me with a bundle size of 1.5mb Gzipped with icons (React Components) , without icons, 238kb. Please check.

@maltejur
Copy link
Collaborator

This issue has to do with how webpack imports the packages. You probably import the icons something like this:

import { ReactOriginalIcon } from "react-devicons";

This will import the whole react-devicons package including all icons into your browser bundle, regardless of how many icons you actually use. To fix this, import the icon like this:

import ReactOriginalIcon from "react-devicons/react/original";

This will only import the ReactOriginalIcon.

@maltejur maltejur pinned this issue Sep 26, 2021
@dukesx
Copy link
Author

dukesx commented Sep 27, 2021

Thank you

@dukesx dukesx closed this as completed Sep 27, 2021
amacado added a commit that referenced this issue Nov 23, 2021
Update readme.md to warn about #6 better
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants