ReactJS是否会重用导入的包？

Question

Does ReactJS reuse imported packages?

Let's say I have a file called DisplayItems.js and EditItem.js. They are both imported into App.js.

If I import a package (like axios) at the top of my DisplayItem.js file ( import axios from 'axios'; ), and I also import it in my EditItem.js file, does my Application grow by 13kb or 26kb (assuming axios is 13kb)?

Answer 1

This behavior is controlled not by React, but by whatever build tool compiles and bundles your import statements into a JavaScript file for the browser.

The Create React App template currently uses Webpack as its build tool. Webpack avoids duplicating code that is imported multiple times; it only writes the definitions once. If you are using a different project setup for your React app, your project may use a different build tool.

Answer 2

In response to jhpratt, I did think of testing it on my own, but I knew it would take some time (about 34 mins).

Here's the test results.

Importing jQuery

2742120 (the control) - with jquery imported once

2742353 - with jquery imported twice (233 byte difference, .2kb)

2741887 - with jquery not being imported (233 byte difference, .2kb)

Importing modal-vanilla

2742120 (the control) - with modal-vanilla being imported once

2742406 - with modal-vanilla being import twice (286 byte difference, .3kb)

2712501 - with modal-vanilla not being imported (29386 byte difference, 29.3kb)

I'm not sure what was going on with jQuery (maybe I added it somewhere else in my project?), but it does look like packages are reused (at least in this instance).

Just in case anyone's wondering, I am using Laravel's React setup.