如何自定義刪除無依賴文件的webpack插件
插件原理
通過自定義webpack插件,利用執(zhí)行完成編譯的封存階段后,產(chǎn)生的產(chǎn)物module.fileDependencies,生成依賴的文件組。通過讀文件的方式,將待掃描的文件組和有依賴關系的文件進行對比。最終暴露出項目中,不存在依賴關系的文件,并可配置將其全部刪除。
代碼實現(xiàn)
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 后的數(shù)據(jù) 最全的數(shù)據(jù) this.dependenciesFile = []; // webpack依賴數(shù)據(jù) 處理過include及exclude 后的數(shù)據(jù) 依賴數(shù)據(jù) this.noUseFile = []; // 可刪除的數(shù)據(jù) 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分析出未被使用的數(shù)據(jù) 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、將產(chǎn)物寫入文件,用戶可清晰看見被掃描的所有文件、存在依賴的文件、無用文件
// 寫入文件 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插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript實現(xiàn)的鼠標響應顏色漸變效果完整實例
這篇文章主要介紹了JavaScript實現(xiàn)的鼠標響應顏色漸變效果,涉及javascript面向?qū)ο蠹笆录O(jiān)聽、響應機制相關操作技巧,需要的朋友可以參考下2017-02-02詳解V8是如何執(zhí)行一段JavaScript代碼原理
這篇文章主要為大家介紹了詳解V8是如何執(zhí)行一段JavaScript代碼原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04JS實現(xiàn)動畫兼容性的transition和transform實例分析
這篇文章主要介紹了JS實現(xiàn)動畫兼容性的transition和transform方法,結合實例形式分析了transition和transform方法針對手機端瀏覽器兼容性問題上的相關處理技巧,需要的朋友可以參考下2016-12-12