How to find unused files in a Webpack project?
Asked Answered
C

3

16

I have a JavaScript project that is built with Webpack which I know has a lot of dead code files. How can I find source files that aren't used in the project?

Chun answered 20/12, 2017 at 20:20 Comment(2)
There are numerous Webpack plugins that address this issue, have you tried any of them?Montero
Looks like this might be useful github.com/tomchentw/unused-files-webpack-pluginRapid
P
13

There are a few plugins, but the UnusedFilesWebpackPlugin appears to be the most popular.

An example use is:

new UnusedFilesWebpackPlugin({
    failOnUnused: environment !== 'development',
    patterns: ['src/components/**/*.jsx', 'src/store/**/*.js', 'sass/**/*.scss'],
    ignore: ['**/LocalVideoDemo.jsx'],
  })

This will check for unused JSX files in the components directory, unused JS files in the Redux store directory and unused SCSS files. It will ignore whether or not the LocalVideoDemo.jsx file is included.

Proponent answered 23/8, 2018 at 16:7 Comment(4)
Correct syntax for ignore is currently: globOptions: { ignore: ['**/LocalVideoDemo.jsx'], }Sassoon
Could you please elaborate, how to use this plugin?Roundtree
Perhaps, what kind of elaboration beyond this answer and the documentation of the plugin are you looking for?Proponent
egghead.io/lessons/… this video explains how to use pluginAgrigento
F
8

Tried using various webpack plugins, but ran into out of memory issues with each plugin. I think the easiest solution for a create-react-app bootstrapped application is to use ESLint.

Use the no-unused-modules which is now a part of eslint-plugin-import.

After setting up eslint, installing eslint-plugin-import, add the following to the rules:

"rules: {
  ...otherRules,
  "import/no-unused-modules": [1, {"unusedExports": true}]
}
Federation answered 1/5, 2019 at 22:2 Comment(6)
This only checks for unused imports in a file, not for files that are not imported anywhere.Fillin
@Fillin did you read the description on the module? It does 2 things, and I quote: "Reports: (1) modules without any exports (2) individual exports not being statically imported or required from other modules in the same project." Your comment of "Files that are not imported anywhere" will fall under second category. Admittedly, the plugin is not perfect, but it's attempting to do exactly what you stated.Federation
You are right @John Lee, sorry. I wasn't the one who downvoted you, though.Fillin
No problem @luislhl. 8-)Federation
I love eslint but gave up trying to configure this to do all the same module resolution as webpack (aliases, file name extensions, etc.). Doesn't a webpack plugin make more sense if you're using both?Motorcar
@DenisHowe as mentioned in my answer, Webpack was also my initial attempt as it seemed like the logical solution. However, I ran into memory issues. Perhaps due to different project sizes, it works well for you. I haven't tried this in over a year, so I should try to revisit the webpack solution.Federation
C
0

Use Knip to get the job done. Lists unused files, types, modules and prop-types.

Just run:

npx knip
Casern answered 21/8, 2024 at 21:45 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.