![]() ![]() One final thing - unused imports and tree-shaking Now when we open the bundle analyzer we can see that we have two separate bundles:Īnd to be doubly sure that these bundles are being downloaded separately, we can go back to our network tab, and see that the bundle containing the chart (on the third row) only gets downloaded after you click the button. In this example, we have a chart that is only shown when you click the “Generate chart” button: Finding functionality that isn’t immediately needed when a user loads the page (and is expensive to load) may be a good place to start. If you have a fairly complex page that takes a long time to load, you may need to code-split on the one page. ![]() When they navigate to the settings page, it will load the code for the settings page, and so on. So when the user is on the home page, the bundle that is loaded only contains the code for the home page. If your app has multiple pages, an easy candidate for code-splitting is to split up the code by each page. Instead of keeping all your code in the one bundle, you can split it up into multiple bundles to be loaded separately. The gzipped size of the bundle will be the same as the transferred size that you saw in the network tab Reduce your bundle size by code-splitting Inside of that you can see that react-dom takes up the majority of the bundle size and then react takes up a much smaller amount on the right. This is what the webpack-bundle-analyzer will create for a fresh create-react-app:įrom top to bottom - we can see the name of the bundle (which will match what you see in the network tab), and then the node_modules folder. However I think that the webpack-bundle-analyzer is the better tool for analyzing bundles, and if you're interested there's currently a workaround to get it working with create-react-app. If you’re using create-react-app, it only officially supports using source-map-explorer, which you can set up using their guide. If you're not sure why your bundle is so big, there are a couple of tools that can help you to visualise what libraries make up your bundle. The bundle size in development mode will be much larger than in production mode, so don’t get too scared if it looks huge! Analyzing your bundle The transferred value is the amount the user has downloaded, while the size value is the true value after it has been unzipped. The much smaller one contains actual code that we've written, while the larger one (which I've highlighted) contains the code for all the libraries living in our node_modules folder. You should see two JavaScript files being loaded: The easiest way to see your app’s bundle size is to open the network tab in your browser devtools, and load your app. If this gets too slow, it can lead to frustration for your users, especially those with slower internet connections. The bigger the bundle size is, the longer it will take before a user can view your app. As your React app gets larger, you may have to start worrying about its bundle size.Īn app’s bundle size is the amount of JavaScript a user will have to download to load your app.
0 Comments
Leave a Reply. |