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项目部署遇到的问题及解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
使用vue构建一个上传图片表单
这篇文章主要为大家详细介绍了使用vue构建一个上传图片表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
Vue脚手架学习之项目创建方式
这篇文章主要给大家介绍了关于Vue脚手架学习之项目创建方式的相关资料，文中通过介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
在vue3.0中如何配置代理
这篇文章主要介绍了在vue3.0中如何配置代理问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue 401配合Vuex防止多次弹框的案例
这篇文章主要介绍了Vue 401配合Vuex防止多次弹框的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue3纯前端表格数据的导出与导入实现方式
这篇文章主要介绍了如何在纯前端环境下使用xlsx-js-style库进行Excel表格文件的下载,并自定义样式,还提到了使用xlsx库进行Excel表格数据的导入,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-01-01
el-table渲染慢卡顿问题最优解决方案
本文主要介绍了el-table渲染慢卡顿问题最优解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
jdk1.8+vue elementui实现多级菜单功能
这篇文章主要介绍了jdk1.8+vue elementui实现多级菜单功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
Nuxt的动态路由和参数校验操作
这篇文章主要介绍了Nuxt的动态路由和参数校验操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
element基于el-form智能的FormSmart表单组件
本文主要介绍了element基于el-form智能的FormSmart表单组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04