After running a script that checks for unused imports such as import XYZ from 'dir/XYZ.jsx' where XYZ is never used, I've e across about 300 files that have this sort of issue. Most of these files are missing similar things such as Proptypes for React (import PropTypes from 'prop-types').

I heard that webpack/babel cache files after they are imported. If this is true, would it be worth it to remove these unused imports that occur many times, or should I just leave them alone?

Note that I'm doing this project for performance reasons and also for code cleanliness.

After running a script that checks for unused imports such as import XYZ from 'dir/XYZ.jsx' where XYZ is never used, I've e across about 300 files that have this sort of issue. Most of these files are missing similar things such as Proptypes for React (import PropTypes from 'prop-types').

I heard that webpack/babel cache files after they are imported. If this is true, would it be worth it to remove these unused imports that occur many times, or should I just leave them alone?

Note that I'm doing this project for performance reasons and also for code cleanliness.

• javascript
• node.js
• webpack
• babeljs

• 1 First thing I'll do is to look at piled files, see if Babel transformed import to require or if it just ignore the import – Orelsanpls Commented Jun 6, 2018 at 8:48

1 Answer 1

You already answered to your own questions:

Note that I'm doing this project for performance reasons and also for code cleanliness.

However, let's we break the answer, with an example scenario and some use-cases.

Scenario:

Lets say we have a Forecast app. When the user go to the daily forecast route, then he wants to get info only about the current day.

Use cases:

1. As an user of the app, is it performance cost if on the daily route, for some reason we load one or many libraries, never used? Having in mind these libraries:
   1. Have some type of execution time. Imagine in the imported module we instantiate a new object or perform some heavy processing.
   2. Added network overhead for the user.
2. As a developer point of view, is it clear enough on a first sight if I see a file with a bunch of imported libraries?
   1. What about if I imported weeklyForecast utility, in the DailyComponent? My point here is it's misleading and confusing, unless you review the whole DailyComponent. Maybe someone will say that we have Linters for that. But why do you use Linter, if you don't follow its rules and conventions?

Technically speaking, it's a performance loss (use-case 1) if you import something, that's never used, but served to the user. I'll remend you to check webpack optimization practices (Minimize, Deduplication, Chunks).

Also do you know about Webpack Code Splitting?

Code splitting is one of the most pelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.

Now imagine if you do code splitting in your app, but you still have many unused imports. Тhat will increase the initial app load time and will violate the code splitting idea.

Conclusion:

For new project, obviously there aren't any benefits to include unused imports.

According to your case, you can measure what's the load time of specific routes with and without the unused imports. Most of the IDEs offers this feature for removing unused imports, therefore you can calculate the impact.