Tree Shaking?
See original GitHub issueIs this a bug report?
Maybe?
Can you also reproduce the problem with npm 4.x?
(Write your answer here.)
Which terms did you search for in User Guide?
(Write your answer here if relevant.)
Environment
node -v
: 6.9.5npm -v
: 5.0.3yarn --version
(if you use Yarn):npm ls react-scripts
(if you haven’t ejected): 1.0.10
Sorry about removing the template, I figure this will be a pretty quick yes or no answer.
"react-scripts": "^1.0.7"
So I’ve read around a lot that webpack 2 supports tree shaking out of the box. Cool! Also, I know that material-ui is written such that it SHOULD tree shake. I’m also assuming react-scripts v1.0.7 is built on webpack 2? Anyways:
import { AppBar } from 'material-ui';
When I run the analyzer you guys suggested adding my output is as follows:
Should this not be getting rid of unused components? I’ve googled around a lot trying to figure this one out.
Thanks! -Dan
Issue Analytics
- State:
- Created 6 years ago
- Reactions:11
- Comments:19 (6 by maintainers)
Top Results From Across the Web
Tree shaking - MDN Web Docs Glossary
Tree shaking is a term commonly used within a JavaScript context to describe the removal of dead code. It relies on the import...
Read more >Tree Shaking - webpack
Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module...
Read more >Tree shaking - Wikipedia
In computing, tree shaking is a dead code elimination technique that is applied when optimizing code. Often contrasted with traditional single-library dead ...
Read more >Tree-Shaking: A Reference Guide - Smashing Magazine
Simply put, tree-shaking means removing unreachable code (also known as dead code) from a bundle. As Webpack version 3's documentation states: “ ...
Read more >Reduce JavaScript payloads with tree shaking - web.dev
Tree shaking is a form of dead code elimination. The term was popularized by Rollup, but the concept of dead code elimination has...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I believe that part of the tree shaking issues with the current version of React Router is related to the re-exports that we use (
react-router-dom
re-exports everything fromreact-router
) https://github.com/ReactTraining/react-router/pull/5095.Another issue that appears to exist with tree shaking React components is the way that babel compiles
class <C> extends React.Component
. The current implementation cannot be (safely) tree shaken. I have opened up this issue https://github.com/babel/babel/issues/5983 in hopes of determining the correct steps to getting a side effect free way of compiling classes.@eluchsinger For Babel transforms, https://github.com/babel/babel/pull/6963 is the PR to watch. With that, class components will be transformed into pure functions that are easy to tree shake (at which point it will be up to library authors to release packages with pure components).