如何在Webpack项目中查找未使用的文件？

Question

我有一个用Webpack构建的JavaScript项目，我知道它有很多死代码文件。如何查找项目中未使用的源文件？

Answer 1

有一些插件，但是UnusedFilesWebpackPlugin似乎是最受欢迎的插件。

一个示例用法是：

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

这将检查components目录中未使用的JSX文件，Redux存储目录中未使用的JS文件和SCSS文件。它将忽略是否包含LocalVideoDemo.jsx文件。

Answer 2

尝试使用各种webpack插件，但是每个插件都遇到内存不足的问题。我认为对于create-react-app引导应用程序，最简单的解决方案是使用ESLint。

使用no-unused-modules的eslint-plugin-import。

设置eslint之后，安装eslint-plugin-import，将以下内容添加到规则中：

"rules: {
  ...otherRules,
  "import/no-unused-modules": [1, {"unusedExports": true}]
}