If we look at the browser, it's serving up this page that breaks down our bundle. It's giving us an address, and it's telling us to use Ctrl-C to close it. You'll notice that in our terminal that it tells us that the webpack-bundle-analyzer has started. With that in place, I'm going to drop into the terminal and I'm going to do a production build with npm run build. ![]() I'm going to pass in a new bundle-analyzer-plugin instance. With that imported, I'm going to drop down into my configuration and I'm going to add a plugins entry here. We're going to pull bundle-analyzer-plugin, require for the webpack-bundle-analyzer package. That's what's going to have to be parsed by the browser, and that's what's going to impact our performance in a production setting. Production is what's going to go to our customers. We want to analyze the bundles in our production builds, because webpack is going to optimize builds differently between dev and production. We'll run npm i, passing it the -d flag to save as a dev dependency, webpack-bundle-analyzer. We can use a webpack plugin to analyze our bundles. ![]() ![]() Instructor: With all the npm modules readily available to us, it's important to keep an eye on our JavaScript bundles, and make sure that we don't add too many things and end up with a bloated bundle that has to be shipped down to a browser.
0 Comments
Leave a Reply. |