前端webpack项目如何删除文件中的无用文件

在开发过程中，总是会有一些无用的代码文件，这会影响开发小伙伴的开发效率，那么如何优化，删除这些无影=用代码呢。可以自己写一个插件。
一、新建dependencyAnalysisPlugin.js文件

const fs = require('fs');
const path = require('path')
 
class DependencyAnalysisPlugin {
    constructor(options = {}) {
        this.options = options
        this.entry = options.entry || 'src' // 入口 ！！！！这里可以更改文件夹，以便更细致地查找。
        this.include = options.include || '' // 包含哪些文件''
        this.exclude = options.exclude || '' // 排除哪些文件夹 ['src/assets', 'src/views']
        this.isDelete = options.isDelete || false // 是否主动删除文件
        this.originFile = [] // node读取的源文件目录 处理过include及exclude 后的数据 最全的数据
        this.dependenciesFile = [] // webpack依赖数据 处理过include及exclude 后的数据 依赖数据
        this.noUseFile = [] // 最全的数据 减去 依赖数据  可删除的数据
        this.init() // 初始化
    }
 
    apply(compiler) {
        compiler.hooks.done.tapAsync("DependencyAnalysisPlugin", (factory, cb) => {
            // 获取依赖资产
            let curFile = []
            factory.compilation.fileDependencies.forEach(item => {
                curFile.push(item)
            })
            // 排除node_modules 与 确认入口文件
            curFile = curFile.filter(item => {
                if (item.indexOf('node_modules') == -1 && item.indexOf(this.resolve(this.entry)) > -1) {
                    return item
                }
            })
            // 处理include规则
            const includeFile = this.includeHandle(curFile)
            // 处理exclude规则
            const excludeFile = this.excludeHandle(includeFile)
            this.dependenciesFile = excludeFile
            // 从 originFile 及 dependenciesFile 数据中分析出 未被使用的数据
            this.originFile.forEach(item => {
                if (this.dependenciesFile.findIndex(el => el == item) == -1) {
                    this.noUseFile.push(item)
                }
            })
            // 处理资源 写入文件
            this.writeDirPathHandle()
            // console.log('this.originFile-------', this.originFile)
            // console.log('this.dependenciesFile-------', this.dependenciesFile)
            // console.log('this.noUseFile-------', this.noUseFile)
            // console.log('this.originFile-------', this.originFile.length)
            // console.log('this.dependenciesFile-------', this.dependenciesFile.length)
            // console.log('this.noUseFile-------', this.noUseFile.length)
            cb()
        });
    }
 
    // 初始化
    init() {
        console.log('[dependency] ##启动依赖分析功能')
        console.log('[dependency] ##是否自动删除文件', this.isDelete)
        // 读取指定node文件
        this.readOriginFile()
    }
 
    // 转换路径
    resolve(pathname = '') {
        return path.join(path.resolve('./'), pathname)
    }
 
    // 读取源文件目录
    readOriginFile() {
        const files = this.readFiles(this.entry)
        // 处理include规则
        const includeFile = this.includeHandle(files)
        // 处理exclude规则
        const excludeFile = this.excludeHandle(includeFile)
        this.originFile = excludeFile
    }
 
    // 读取指定目录文件
    readFiles(path) {
        let allFile = []
        const curPath = this.resolve(path)
        const files = fs.readdirSync(curPath);
        for (const file of files) {
            const obj = fs.statSync(this.resolve(`${path}/${file}`));
            if (obj.isDirectory()) {
                allFile = [...allFile, ...this.readFiles(`${path}/${file}`)];
            } else {
                // 排除 .gitkeep 等隐藏文件
                const isHideFile = new RegExp(/^\./).test(file)
                // 排除 md文件
                const isMdFile = new RegExp(/\.md$/).test(file)
                if (!isHideFile && !isMdFile) {
                    allFile.push(this.resolve(`${path}/${file}`));
                }
            }
        }
        return allFile
    }
 
    // 处理规则
    includeHandle(list) {
        if (!this.include) {
            return list
        }
        // 指定类型的文件
        const includeArr = this.include.split('|')
        const filterFile = list.filter(item => {
            const index = includeArr.findIndex(el => item.indexOf(el) > -1)
            if (index > -1) {
                return item
            }
        })
        return filterFile
    }
 
    // 处理规则
    excludeHandle(list) {
        if (!this.exclude) {
            return list
        }
        // 过滤指定文件夹
        const excludeList = []
        this.exclude.forEach(item => {
            excludeList.push(this.resolve(item))
        })
        const filterFile = list.filter(item => {
            const index = excludeList.findIndex(el => item.indexOf(el) > -1)
            if (index == -1) {
                return item
            }
        })
        return filterFile
    }
 
    // 写入文件
    writeDirPathHandle() {
        let content = `所有文件-length[${this.originFile.length}]、依赖文件-length[${this.dependenciesFile.length}]、无用文件-length[${this.noUseFile.length}]`
        content += `\r\n##########所有文件-length[${this.originFile.length}]##########\r\n${this.originFile.join('\n')}\r\n`;
        content += `\r\n##########依赖文件-length[${this.dependenciesFile.length}]##########\r\n${this.dependenciesFile.join('\n')}\r\n`;
        content += `\r\n##########无用文件-length[${this.noUseFile.length}]##########\r\n${this.noUseFile.join('\n')}\r\n`;
        fs.writeFile('dependency.txt', content, (err) => {
            if (err) {
                console.error(err)
                return
            }
            console.log('[dependency] ## 文件已写入dependency.txt')
            // 判断是否执行删除
            if (this.isDelete) {
                this.deleteFileHandle()
            }
        })
    }
 
    // 删除文件
    deleteFileHandle() {
        this.noUseFile.forEach(item => {
            fs.unlink(item, (err) => {
                if (err) throw err
                console.log(`[dependency] ## 已删除文件：${item}`)
            })
        })
    }
}
module.exports = DependencyAnalysisPlugin;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

二、在webpack的配置文件中引入这个插件。若是umi的项目，就是在config/chainWebpack.ts文件中进行配置。

const dependencyAnalysisPlugin = require('../dependencyAnalysisPlugin')
...........其他配置
config.plugin('dependency-analysis').use(dependencyAnalysisPlugin, [
          {
            isDelete: false, // 根据需要设置 isDelete 选项
          },
        ]);
1
2
3
4
5
6
7

三、跑项目时，会在命令行界面输出如下信息

[dependency] ## 文件已写入dependency.txt
1

四、在和插件同目录下自动生成了一个.txt文件。文件中有全部文件、依赖文件。无用文件的信息。可参考检查后手动删除，也可以在chainWebpack文件中修改配置isDelete:ture。这样，在项目成功跑起来的同时，就会自动删除无用文件，并且在命令行页面有删除记录。