question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support Tree Shaking / Modularized Imports (React)

See original GitHub issue

Currently, the React build produces a single index.cjs.js / index.esm.js file including all icons. This is fine for some use cases but can cause bundle bloat / dev server slowness. It would be awesome if each icon was additionally put in its own file so they can be tree shaken effectively by a bundler. This would also allow something like Next.js to use the modularizeImports feature to not bundle every single icon in both the development and production build.

Example:

"@tabler/icons": {
  "transform": "@tabler/icons/{{member}}"
}

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:4
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

8reactions
codecalmcommented, Nov 22, 2022

I’m working on it here: https://github.com/tabler/tabler-icons/pull/378 😃

Screenshot 2022-11-22 at 13 18 04
2reactions
AlonMizcommented, Nov 14, 2022

That’s pretty important

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tree-Shaking Basics for React Applications - Telerik
Tree -shaking is an important way to reduce the size of your bundle and improve performance. See how you can do it in...
Read more >
Minimizing Bundle Size - React Suite
Tree Shaking is a method of optimizing the volume by removing unused code in the final file. The components must be imported via...
Read more >
Tree shaking and code splitting in webpack - LogRocket Blog
To dynamically import a node module and tree shake it, we can first create a module that only exports what we want, then...
Read more >
Tree shaking - The newline Guide to Creating a React Hooks ...
Tree shaking is the process of removing unused code from your bundle. When you develop your modern web app, you usually use tools...
Read more >
What is Tree Shaking and Implementation in React - Folio3
Rollup statically analyzes the code you are importing, and will exclude anything that isn't actually used.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found