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.进入终端，使用命令删除列表中文件，重新打包

总结

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

您可能感兴趣的文章:

Element实现复杂table表格结构的项目实践
本文主要介绍了Element实现复杂table表格结构的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
关于ElementUI的el-upload组件二次封装的问题
这篇文章主要介绍了关于ElementUI的el-upload组件二次封装的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue 禁用浏览器的前进后退操作
这篇文章主要介绍了Vue 禁用浏览器的前进后退操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue使用NProgress进度条的方法
这篇文章主要为大家详细介绍了Vue使用NProgress进度条的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
vue3.0中使用nextTick方式
这篇文章主要介绍了vue3.0中使用nextTick方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
如何在Vue3中实现文件上传功能结合后端API
文件上传的功能实现是我们做Web应用时候最为常见的应用场景,下面这篇文章主要给大家介绍了关于如何在Vue3中实现文件上传功能结合后端API的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-09-09
Vue实现英文字母大小写在线转换功能
在Web开发中,字符串处理是常见的需求之一,特别是在国际化应用中,对于文本的格式化处理尤为重要,本文将介绍如何使用Vue.js来构建一个简单的在线英文字母大小写转换工具,需要的朋友可以参考下
2024-09-09
简单谈一谈Vue中render函数
vue中的render函数,它返回的是一个虚拟节点vnode,也就是我们要渲染的节点,下面这篇文章主要给大家介绍了关于Vue中render函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
详解如何在Vue2中实现组件props双向绑定
在Vue2中组件的props的数据流动改为了只能单向流动，如何在Vue2中实现组件props双向绑定，一起来跟小编看看。
2017-03-03
html+vue实现分页功能的示例代码
这篇文章主要为大家详细介绍了如何使用html+vue实现简单的分页功能,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下
2024-04-04