如何自定义删除无依赖文件的webpack插件

 更新时间:2023年12月27日 10:15:26   作者:北巷`  
通过自定义webpack插件,利用执行完成编译的封存阶段后,产生的产物module.fileDependencies,生成依赖的文件组,通过读文件的方式,将待扫描的文件组和有依赖关系的文件进行对比,这篇文章主要介绍了自定义删除无依赖文件的webpack插件,需要的朋友可以参考下

插件原理

通过自定义webpack插件,利用执行完成编译的封存阶段后,产生的产物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() {
  }
  // 处理规则
  includeHandle(list) {
    return filterFile;
  }
  // 处理规则
  excludeHandle(list) {
    return filterFile;
  }
  // 写入文件
  writeDirPathHandle() {
  }
  // 删除文件
  deleteFileHandle() {
  }
}
module.exports = UnDependencClearPlugin;

2、通过配置的include文件类型,使用includeHandle方法进行文件类型筛选,

  // 处理规则
  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、配置过滤规则

 // 处理规则
  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;
      }
      // 判断是否执行删除
      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插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 解析javascript中鼠标滚轮事件

    解析javascript中鼠标滚轮事件

    这篇文章主要给大家详细介绍了javascript中鼠标滚轮事件,图文并茂,十分的详细,有需要的小伙伴可以参考下。
    2015-05-05
  • 微信小程序实现上传图片的功能

    微信小程序实现上传图片的功能

    这篇文章主要为大家详细介绍了微信小程序实现上传图片的功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js代码实现多人聊天室

    js代码实现多人聊天室

    这篇文章主要为大家详细介绍了js代码实现多人聊天室,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • JavaScript实现的鼠标响应颜色渐变效果完整实例

    JavaScript实现的鼠标响应颜色渐变效果完整实例

    这篇文章主要介绍了JavaScript实现的鼠标响应颜色渐变效果,涉及javascript面向对象及事件监听、响应机制相关操作技巧,需要的朋友可以参考下
    2017-02-02
  • js遍历添加栏目类添加css 再点击其它删除css【推荐】

    js遍历添加栏目类添加css 再点击其它删除css【推荐】

    这篇文章主要介绍了js遍历添加栏目类添加css 再点击其它删除css的实例代码,非常不错,具有一定的参考借鉴借鉴价值,需要的朋友可以参考下
    2018-06-06
  • 详解V8是如何执行一段JavaScript代码原理

    详解V8是如何执行一段JavaScript代码原理

    这篇文章主要为大家介绍了详解V8是如何执行一段JavaScript代码原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • JS实现动画兼容性的transition和transform实例分析

    JS实现动画兼容性的transition和transform实例分析

    这篇文章主要介绍了JS实现动画兼容性的transition和transform方法,结合实例形式分析了transition和transform方法针对手机端浏览器兼容性问题上的相关处理技巧,需要的朋友可以参考下
    2016-12-12
  • JS获取图片高度宽度的方法分享

    JS获取图片高度宽度的方法分享

    这篇文章主要介绍了JS获取图片高度宽度的方法,开始的时候没能做到兼容chrome,在度娘和众网友的帮助下,最终完成了完美兼容,这里分享给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • 原生js封装自定义滚动条

    原生js封装自定义滚动条

    本文主要介绍了原生js封装自定义滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 你不知道的前端console用法分享

    你不知道的前端console用法分享

    console一定是各位前端最熟悉的小伙伴了,有些网站还会在控制台输出一些有意思的东西,下面这篇文章主要给大家介绍了关于前端console用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-08-08

最新评论