This is very rarely needed, but if you need it talk to you team lead or Dale.
Excessive component renders can make the app slow, so we need to avoid them. React will not update the DOM if none of the data changed so all renders, will not change the DOM. Finding the balance is the challenge.
Setting LOG_RENDER_EVENTS: true, in config.js logs a line like render ==== TopCommentByBallotItem ====
for every component rendered. The console file can then be grepped or searched, and
other logging lines will be interleaved.
Alternatively if all you are looking at is renders, and are interested in which prop or state change caused the render, the excellent "React Developer Tools" for Chrome for Chrome adds a great components tab that shows why the component rendered
The WebpackBundleAnalyzer
has been installed, and provides amazing insight into the bundle. To enable it, in webpack.config.js, set isProduction to false to enable the
BundleAnalyzerPlugin and the UnusedWebpackPlugin which scans for unused image and js files.
UnusedWebpackPlugin sends its output to the build output in the terminal window
// Set isProduction to false, to enable the interactive bundle analyser and the Unused component analyzer
const isProduction = true; // Developers can set this to be true, but in git it should always be false
` An interactive UI, as shown below, will start up in a server and will be displayed in your browser.
importing Button with decompostion from '@material-ui/core' adds the entire '@material-ui/core' library to the bundle, which bloats the size of the bundle and makes startup over slow internet connections very slow.
import { Button } from '@material-ui/core'; /DO NOT DO THIS!!!!!
instead, cherry-pick the component, and only that component will be added to the bundle.
import Button from '@material-ui/core/Button';
Making these changes for material-ui saved about 300 MB in bundle size!
Note that you can't load third level components this way, so you need to decompose second level components like this...
import { withStyles } from '@material-ui/core/styles';