如何自定義刪除無依賴文件的webpack插件
插件原理
通過自定義webpack插件,利用執(zhí)行完成編譯的封存階段后,產(chǎn)生的產(chǎn)物module.fileDependencies,生成依賴的文件組。通過讀文件的方式,將待掃描的文件組和有依賴關(guān)系的文件進(jìn)行對(duì)比。最終暴露出項(xiàng)目中,不存在依賴關(guān)系的文件,并可配置將其全部刪除。
代碼實(shí)現(xiàn)
1、自定義webpack插件,配置options。遍歷stats.compilation.fileDependencies,存儲(chǔ)依賴文件。
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; // 是否主動(dòng)刪除文件
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方法進(jìn)行文件類型篩選,
// 處理規(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、使用時(shí),配置開關(guān)isDelete,開啟后可自動(dòng)刪除無用文件
// 刪除文件
deleteFileHandle() {
this.noUseFile.forEach((item) => {
fs.unlink(item, (err) => {
if (err) throw err;
});
});
}使用方法
1、在項(xiàng)目中添加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、對(duì)于想主動(dòng)清理代碼這個(gè)場(chǎng)景,只需在菜單中刪除或注釋菜單的引用文件
//路由
component: () => import('@/xxx/xxx/xxx.vue')
//或者
require(['./xxx/xxx.vue'], resolve)
// 或者引入的文件
import xxx from './xxx/xxx/xxx'到此這篇關(guān)于自定義刪除無依賴文件的webpack插件的文章就介紹到這了,更多相關(guān)自定義刪除webpack插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果完整實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果,涉及javascript面向?qū)ο蠹笆录O(jiān)聽、響應(yīng)機(jī)制相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
js遍歷添加欄目類添加css 再點(diǎn)擊其它刪除css【推薦】
這篇文章主要介紹了js遍歷添加欄目類添加css 再點(diǎn)擊其它刪除css的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒借鑒價(jià)值,需要的朋友可以參考下2018-06-06
詳解V8是如何執(zhí)行一段JavaScript代碼原理
這篇文章主要為大家介紹了詳解V8是如何執(zhí)行一段JavaScript代碼原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
JS實(shí)現(xiàn)動(dòng)畫兼容性的transition和transform實(shí)例分析
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)畫兼容性的transition和transform方法,結(jié)合實(shí)例形式分析了transition和transform方法針對(duì)手機(jī)端瀏覽器兼容性問題上的相關(guān)處理技巧,需要的朋友可以參考下2016-12-12

