【工具】检测无用文件

在 webpack 编译后的阶段，通过检查编译过程中的依赖文件列表和所有文件列表，找出未被使用的文件，并将其输出到控制台。

相关文章

检测无用文件

功能清单

在 webpack 编译后的阶段注册一个钩子函数（afterEmit），用于在编译完成后执行自定义的操作。
通过getDependFiles方法获取 webpack 编译过程中产生的所有文件的依赖列表（即哪些文件被引用了）。
通过getAllFiles方法获取指定模式下的所有文件路径。
找出所有文件列表中未被使用的文件，即在依赖列表中没有被引用的文件。
输出未被使用的文件列表到控制台。

一、静态代码分析

使用静态代码分析工具来检测项目中未被引用的文件。这些工具可以扫描您的代码库，并识别出哪些文件没有被代码中的其他文件引用。一些常用的静态代码分析工具包括 ESLint、PMD、CodeQL 等。

二、webpack 打包分析

可以直接使用 useless-files-webpack-plugin 插件，也可以自定义一个插件来分析打包过程中未被使用的文件，过程如下。

1、获取项目目录所有的文件

// 获取项目目录所有的文件
getAllFiles (pattern) {
  return new Promise((resolve, reject) => {
    glob(pattern, {
      nodir: true
    }, (err, files) => {
      if (err) {
        throw err
      }
      const out = files.map(item => path.resolve(item))
      resolve(out)
    })
  })
}

2、获取依赖的文件

getDependFiles (compilation) {
  return new Promise((resolve, reject) => {
    const dependedFiles = [...compilation.fileDependencies].reduce(
      (acc, usedFilepath) => {
        if (!~usedFilepath.indexOf('node_modules')) {
          acc.push(usedFilepath)
        }
        return acc
      },
      []
    )
    resolve(dependedFiles)
  })
}

三、完整示例

const path = require('path'); // 导入 Node.js 内置模块 path，用于处理文件路径
const glob = require('glob'); // 导入 glob 模块，用于匹配文件路径

class UnusedFilesPlugin { // 定义一个名为 UnusedFilesPlugin 的类
  constructor(options) { // 构造函数，接收 options 参数
    this.options = options; // 将 options 参数保存到实例的 options 属性中
  }

  apply(compiler) { // 定义一个 apply 方法，用于将插件应用到 webpack 编译过程中
    compiler.hooks.afterEmit.tapAsync('UnusedFilesPlugin', async (compilation, callback) => { // 在 webpack 编译后的阶段注册一个异步钩子函数
      try { // 尝试执行以下代码块
        const dependedFiles = await this.getDependFiles(compilation); // 获取依赖文件列表
        const allFiles = await this.getAllFiles(this.options.root); // 获取所有文件列表

        const unusedFiles = allFiles.filter(file => !dependedFiles.includes(file)); // 找出未被使用的文件

        console.log('Unused files:', unusedFiles); // 输出未被使用的文件到控制台

        callback(); // 调用回调函数通知 webpack 插件已完成操作
      } catch (error) { // 捕获错误
        console.error('Error:', error); // 输出错误信息到控制台
        callback(error); // 调用回调函数通知 webpack 插件出现错误
      }
    });
  }

  getAllFiles(pattern) { // 定义一个名为 getAllFiles 的方法，用于获取指定模式的所有文件路径
    return new Promise((resolve, reject) => { // 返回一个 Promise 对象
      glob(pattern, { nodir: true }, (err, files) => { // 使用 glob 模块匹配文件路径
        if (err) { // 如果发生错误
          reject(err); // 拒绝 Promise 并传递错误信息
          return; // 结束函数执行
        }
        const resolvedFiles = files.map(file => path.resolve(file)); // 将匹配到的文件路径转换为绝对路径
        resolve(resolvedFiles); // 解析 Promise 并传递文件路径列表
      });
    });
  }

  getDependFiles(compilation) { // 定义一个名为 getDependFiles 的方法，用于获取 webpack 编译过程中的依赖文件列表
    return new Promise((resolve, reject) => { // 返回一个 Promise 对象
      const dependedFiles = Array.from(compilation.fileDependencies).filter(filepath => !filepath.includes('node_modules')); // 获取不包含 node_modules 的依赖文件列表
      resolve(dependedFiles); // 解析 Promise 并传递依赖文件列表
    });
  }
}

module.exports = UnusedFilesPlugin; // 导出 UnusedFilesPlugin 类