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?
How to find unused files in a Webpack project?
Asked Answered
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-plugin –
Rapid
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.
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 plugin –
Agrigento
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}]
}
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
© 2022 - 2025 — McMap. All rights reserved.