vue cli3 中检测项目中是否存在未使用的文件

插件一：webpack-deadcode-plugin

• 用于检测未使用的文件和已使用文件中的未使用导出

installation

// yarn
yarn add -D webpack-deadcode-plugin
// npm
npm install webpack-deadcode-plugin --save-dev

vue.config.js

const DeadCodePlugin = require("webpack-deadcode-plugin");

module.exports = {
  chainWebpack: (config) => {
    // 打包时检测
    config.when(process.env.NODE_ENV === "production", (productionConfig) => {
      productionConfig.plugin("unusedFile").use(DeadCodePlugin, [
        {
          patterns: ["src/**/*.*"], // 需要检测的范围
          exclude: ["node_modules/**/*"], // 排除检测的范围
        },
      ]);
    });
  },
};

执行结果

插件二：unused-files-webpack-plugin

// 使用方法和前面类似

区别

• webpack-deadcode-plugin：不会中止当前打包进程，支持webpack5;
• unused-files-webpack-plugin：只检测没有使用的文件，可以终止当前打包进程，不支持webpack5;

参考资料

webpack-deadcode-plugin

unused-files-webpack-plugin