3 posts tagged with "Webpack"

Webpack Bundle Analyzer is a tool to visualize and analyze the size of JavaScript application bundles. You can use it to identify any large and redundant modules contributing to the overall bundle size.

As your app grows in complexity and accumulates more packages, your bundle can quickly become too large. This impacts your app's overall performance, especially during the initial load when the bundles need to be downloaded and parsed.

The bundle analyzer provides a detailed breakdown of your application's bundle size and composition, including the size of individual modules and their dependencies.

In this guide, we'll create a simple React application that has some performance issues. We'll then use Webpack Bundle Analyzer to analyze the application bundle and identify the areas that require optimization.

Older browsers don’t support many of the modern features that have been added to JavaScript, such as the array spread operator and the Object.entries method. To support older browsers while still taking advantage of these modern features, you need a compilation step that transforms the cutting edge JavaScript in your codebase to production code that works in all browsers.

Babel is the most popular tool used to do this transformation. The env preset allows you to transpile JavaScript to be compatible with a list of browsers you wish to support. This article will discuss the effects on compiled JavaScript file size when changing which browsers you support in Babel.

Bundle splitting allows you to delay loading resources until they are actually needed. And Webpack and React make it surprisingly easy!

In this article we'll take a React component that's not needed on every page and move it from the main bundle into a separate bundle that can be lazy loaded.