vue2.0实现检测无用的代码并删除

更新时间：2024年07月19日 09:16:40 作者：javascript艺术

这篇文章主要介绍了vue2.0实现检测无用的代码并删除方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue2.0检测无用的代码并删除

（1）、使用 useless-files-webpack-plugin 来查找无用文件

npm i useless-files-webpack-plugin -S

（2）、vue.config.js中配置

const UselessFile = require('useless-files-webpack-plugin')

chainWebpack: config => {
    config.plugin('uselessFile')
        .use(
          new UselessFile({
            root: path.resolve(__dirname, './src'), // 项目目录
            out: './fileList.json', // 输出文件列表
            clean: false, // 是否删除文件,
            exclude: /node_modules/ // 排除文件列表
          })
        )
 
}

（3）、每次编译的时候，都会将一些没有用到的文件输出到unused-files.json这个文件，可以自己再手动检测一下，然后删掉无用的代码。

（4）、删除大量的代码后，git提交代码时，记得在git上打个tag，以方便回滚或者找代码

webpack打包删除无用文件

在webpack打包项目过程中，常遇见一些无用的图片，js文件，怎样能够自动检测哪些是无用的文件呢？

使用插件useless-files-webpack-plugin查找无用文件，在terminal中删除

操作步骤

安装

安装方法

cnpm i useless-files-webpack-plugin -D

检查安装是否成功

进入package.json中，刷新package.json文件，搜索"useless-files-webpack-plugin"，如果存在，则安装成功

具体用法

1.在webpack.prod.conf.js中，添加如下代码

// 顶部导入插件
const UselessFile = require('useless-files-webpack-plugin')

2.plugins中添加插件配置

new UselessFile({
      root: './src', // 项目目录
      out: './fileList.json', // 输出文件列表
      clean: false,// 删除文件,
      exclude: path // 排除文件列表, 格式为文件路径数组
    }),

3.打包时自动在项目的根目录下生成unused-files.json, 保存着无用文件的列表。

如图所示：

unused-files.json

4.进入终端，使用命令删除列表中文件，重新打包

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue组件通信的四种方式汇总
这篇文章主要给大家介绍了关于Vue组件通信的四种方式，分别是父子组件通信、非父子组件的eventBus通信、利用localStorage或者sessionStorage以及利用Vuex等方法，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
2018-02-02
uniapp和webview之间的通信举例详解
在uniapp中与webview的通信是一个常见且重要的功能,这篇文章主要介绍了uniapp和webview之间通信的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-06-06
vue前端实现批量上传图片功能并回显图片
这篇文章主要为大家详细介绍了vue前端实现批量上传图片功能并回显图片的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2025-10-10
Vue中使用wangeditor富文本编辑的问题
这篇文章主要介绍了Vue中使用wangeditor富文本编辑的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-02-02
Vue3中实现div拖拽功能
这篇文章主要介绍了Vue3中实现div拖拽功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03
Vue + Print.js前端打印自定义字体大小、自定义样式以及封装共享样式
这篇文章主要介绍了Vue + Print.js前端打印自定义字体大小、自定义样式以及封装共享样式的相关资料,Print.js主要是为了帮助我们直接在浏览器中开发打印功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-06-06
Vue中父子组件通信与事件触发的深入讲解
组件是Vue核心功能之一,合理的组件化,可以减少我们代码的冗余,提高项目的可维护性,下面这篇文章主要给大家介绍了关于Vue中父子组件通信与事件触发的相关资料,需要的朋友可以参考下
2022-03-03
vue 使用localstorage实现面包屑的操作
这篇文章主要介绍了vue 使用localstorage实现面包屑的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue实现卡片遮罩层交互式功能
在前端开发中,卡片遮罩层是一种常见的交互设计元素,用于强调某个区域或内容,并提供用户操作的入口,本文将带大家在 vue 中结合实际案例实现此功能,感兴趣的朋友一起看看吧
2024-08-08
vue 基于abstract 路由模式实现页面内嵌的示例代码
这篇文章主要介绍了vue 基于abstract 路由模式实现页面内嵌的示例代码，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12