You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
At present, when shipping to production with tabler icons react (nextjs13) over 10mb of bundle space is allocated to the icons. It appears every import is importing the entire js library so the library grows larger than expected (see img) and that has issues with compilation time and so ttfb.
As far as my research has pointed this comes down to the inability to allow direct imports for an icon, eg:
import {UserIcon} from "@tabler/icons-react
should be available instead as something like:
import UserIcon from "@tabler/icons-react/dist/cjs/icons/UserIcon
This is the way icons are handler in Material UI etc and having tested their library they have no issue in this build size (although issues with tree shaking still exist for compilation speed)
Is there any work to rectify this? I can see similar comments from Jan this year. If not, it may be a move to material icons our end, which would be a shame as it'll be a mess to migrate!
Bundle breakdown of node.js
Details of size/source from tabler
The text was updated successfully, but these errors were encountered:
At present, when shipping to production with tabler icons react (nextjs13) over 10mb of bundle space is allocated to the icons. It appears every import is importing the entire js library so the library grows larger than expected (see img) and that has issues with compilation time and so ttfb.
From my understand this comes down to issues with tree-shaking as outlined more extensive in other icon libraries:
React Icons: react-icons/react-icons#727
Mui icons: mui/material-ui#35840
As far as my research has pointed this comes down to the inability to allow direct imports for an icon, eg:
should be available instead as something like:
This is the way icons are handler in Material UI etc and having tested their library they have no issue in this build size (although issues with tree shaking still exist for compilation speed)
Is there any work to rectify this? I can see similar comments from Jan this year. If not, it may be a move to material icons our end, which would be a shame as it'll be a mess to migrate!
Bundle breakdown of node.js
![IMG_1861](https://private-user-images.githubusercontent.com/124500411/261699040-8f40cdaf-476a-4510-bc72-4aff3ff92011.JPG?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkyNDUyMTEsIm5iZiI6MTcxOTI0NDkxMSwicGF0aCI6Ii8xMjQ1MDA0MTEvMjYxNjk5MDQwLThmNDBjZGFmLTQ3NmEtNDUxMC1iYzcyLTRhZmYzZmY5MjAxMS5KUEc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYyNFQxNjAxNTFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yN2ZkNWJjYzkyNGZjYzhlMDMzOTcyZmQ0ODIxZGY3MmFjYzczYjFhM2U5NGUxZTc4NTIyNDk1ZTRiYzlhZTRiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.dMpePb6EiikeQ_DykfE7VslKLYuv5l04H_j4Z4_SXYU)
Details of size/source from tabler
![Screenshot 2023-08-18 at 20 46 14](https://private-user-images.githubusercontent.com/124500411/261700382-8d744209-f829-4aa8-aec7-4de08d63f680.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkyNDUyMTEsIm5iZiI6MTcxOTI0NDkxMSwicGF0aCI6Ii8xMjQ1MDA0MTEvMjYxNzAwMzgyLThkNzQ0MjA5LWY4MjktNGFhOC1hZWM3LTRkZTA4ZDYzZjY4MC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYyNFQxNjAxNTFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lMzRjMDM3NDY4YWYwZDUwMDEyMDExMjYxODEyMzY3YWMwMjdiNjM3NDg2NGMwNTIwN2I1NTkzZjFmNTZiODIwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.H5C6pD9NxV0viwlRNr6GDlHZXLxU1fegmO6FiitbUto)
The text was updated successfully, but these errors were encountered: