Скачать или смотреть Understanding React's Bundling: Are All require and dependencies Included?

Discover if all `require` and `dependencies` from React's `react-scripts` make it into the final bundle, and learn how bundling works in React projects.
---
This video is based on the question https://stackoverflow.com/q/67295090/ asked by the user 'AlbertFX91' ( https://stackoverflow.com/u/6414307/ ) and on the answer https://stackoverflow.com/a/67295156/ provided by the user 'rschristian' ( https://stackoverflow.com/u/15388164/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: react-scripts and bundle - Are all the 'require' and 'dependencies' added into the final bundle?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding React's Bundling: Are All require and dependencies Included?

When working in a modern React project, particularly one that utilizes react-scripts, it's common to question how dependencies are managed during the bundling process. Specifically, many developers find themselves wondering: Are all the require and dependencies added into the final bundle?

This concern is particularly significant as understanding what gets included in your final site build can help optimize your application's performance and maintainability. In this guide, we'll dive deep into this topic and clarify what actually gets bundled when you deploy a React application.

What is a Bundle?

A bundle is essentially a single file or group of files that contains all the code your application needs to run. This includes your application code as well as third-party libraries (dependencies). When using tools like Webpack, the goal is to compress everything into as few files as possible to reduce load times.

The Role of react-scripts

The react-scripts library is a powerful package that simplifies the process of creating a React application via Create React App. It internally manages the configuration of Webpack, Babel, ESLint, and various other tools.

You'll find numerous dependencies listed in your package-lock.json file, for example:

webpack-dev-server – The development server for serving your app.

dotenv – A module that loads environment variables from a .env file.

sass-loader – A loader for compiling SASS styles.

These are just a few examples of the many libraries that might be listed.

The Answer: Not Everything is Included

The short answer to whether all require and dependencies are included in the final bundle is no. Here's why:

Build Process and Tree Shaking:

Webpack employs a technique called tree shaking where it analyzes your code and eliminates pieces that are unnecessary for production. Many dependencies, especially those used only during development (like Jest or ESLint), won’t be included in the final bundle since they have no runtime impact.

Dev Dependencies vs. Prod Dependencies:

Not all dependencies in your package-lock.json are equal:

Development Dependencies: Libraries like Jest or ESLint are included only during development and not when you build your application for production.

Production Dependencies: On the other hand, libraries that are used in the app's runtime (like React or Redux) will be included.

Dynamic Imports:

If your app uses features like dynamic imports that break your code into chunks, you might find that not all dependencies are included upfront. Some libraries might be loaded only when needed, which can dramatically affect the size and composition of your final bundle.

Final Bundle Weight:

It's essential to acknowledge the cumulative weight of your dependencies. Each additional library you add can increase your bundle size, which ultimately impacts loading times and performance.

Conclusion

As a React developer, understanding how bundling works is crucial for optimizing your application. While many dependencies listed in react-scripts are essential for your development environment, not all of them will make it into your final production bundle.

By focusing on eliminating unnecessary dependencies and utilizing tools like Webpack's tree shaking, you can ensure a leaner, more efficient final product that delivers a better user experience. Keeping your bundle size manageable not only speeds up your application but also enhances overall maintainability.

To recap:

Not all require dependencies appear in the final bundle.

Development dependencies are excluded during production builds.

Use tree s