如何自定義刪除無依賴文件的webpack插件
插件原理
通過自定義webpack插件,利用執(zhí)行完成編譯的封存階段后,產生的產物module.fileDependencies,生成依賴的文件組。通過讀文件的方式,將待掃描的文件組和有依賴關系的文件進行對比。最終暴露出項目中,不存在依賴關系的文件,并可配置將其全部刪除。
代碼實現
1、自定義webpack插件,配置options。遍歷stats.compilation.fileDependencies,存儲依賴文件。
const fs = require('fs');
const path = require('path');
class UnDependencClearPlugin {
constructor(options = {}) {
this.options = options;
this.entry = options.entry || 'src'; // 入口
this.include = options.include || ''; // 包含哪些文件'.vue|.js'
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('UnDependencClearPlugin', (stats, cb) => {
// 獲取依賴
let curFile = [];
stats.compilation.fileDependencies.forEach((item) => {
curFile.push(item);
});
// 排除node_modules和entry
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();
cb();
});
}
// 初始化
init() {
}
// 處理規(guī)則
includeHandle(list) {
return filterFile;
}
// 處理規(guī)則
excludeHandle(list) {
return filterFile;
}
// 寫入文件
writeDirPathHandle() {
}
// 刪除文件
deleteFileHandle() {
}
}
module.exports = UnDependencClearPlugin;2、通過配置的include文件類型,使用includeHandle方法進行文件類型篩選,
// 處理規(guī)則
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;
}3、配置過濾規(guī)則
// 處理規(guī)則
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;
}4、將產物寫入文件,用戶可清晰看見被掃描的所有文件、存在依賴的文件、無用文件
// 寫入文件
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;
}
// 判斷是否執(zhí)行刪除
if (this.isDelete) {
this.deleteFileHandle();
}
});
}5、使用時,配置開關isDelete,開啟后可自動刪除無用文件
// 刪除文件
deleteFileHandle() {
this.noUseFile.forEach((item) => {
fs.unlink(item, (err) => {
if (err) throw err;
});
});
}使用方法
1、在項目中添加undependencClearPlugin.js文件
2、在webpack.config.js文件中配置plugin
const undependencClearPlugin = require('./undependencClearPlugin');
isEnvDevelopment &&
new undependencClearPlugin({
entry: '/src',
include: '.js|.vue|.jpg',
exclude: ['./node_modules'],
isDelete: false,
}),3、對于想主動清理代碼這個場景,只需在菜單中刪除或注釋菜單的引用文件
//路由
component: () => import('@/xxx/xxx/xxx.vue')
//或者
require(['./xxx/xxx.vue'], resolve)
// 或者引入的文件
import xxx from './xxx/xxx/xxx'到此這篇關于自定義刪除無依賴文件的webpack插件的文章就介紹到這了,更多相關自定義刪除webpack插件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax實現無刷新
這篇文章主要介紹了js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax無刷新的具體實現,需要的朋友可以參考下2014-02-02
zeroclipboard 單個復制按鈕和多個復制按鈕的實現方法
最近網站改版想讓復制代碼功能在多個瀏覽器上都可以實現,最近看網上不少說我們的代碼復制功能不好用的,我們最近將會增加代碼高亮等功能,希望大家多多支持我們2014-06-06
詳解在IDEA中將Echarts引入web兩種方式(使用js文件和maven的依賴導入)
這篇文章主要介紹了在IDEA中將Echarts引入web兩種方式(使用js文件和maven的依賴導入),本文通過圖文并茂的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
js 通過html()及text()方法獲取并設置p標簽的顯示值
這篇文章主要介紹了js 通過html()及text()方法獲取并設置p標簽的顯示值,需要的朋友可以參考下2014-05-05

