vue2.0實現(xiàn)檢測無用的代碼并刪除

更新時間：2024年07月19日 09:16:40 作者：javascript藝術

這篇文章主要介紹了vue2.0實現(xiàn)檢測無用的代碼并刪除方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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 // 排除文件列表, 格式為文件路徑數(shù)組
    }),

3.打包時自動在項目的根目錄下生成unused-files.json, 保存著無用文件的列表。

如圖所示：

unused-files.json

4.進入終端，使用命令刪除列表中文件，重新打包

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue組件通信的四種方式匯總
這篇文章主要給大家介紹了關于Vue組件通信的四種方式，分別是父子組件通信、非父子組件的eventBus通信、利用localStorage或者sessionStorage以及利用Vuex等方法，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。
2018-02-02
uniapp和webview之間的通信舉例詳解
在uniapp中與webview的通信是一個常見且重要的功能,這篇文章主要介紹了uniapp和webview之間通信的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-06-06
vue前端實現(xiàn)批量上傳圖片功能并回顯圖片
這篇文章主要為大家詳細介紹了vue前端實現(xiàn)批量上傳圖片功能并回顯圖片的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2025-10-10
Vue中使用wangeditor富文本編輯的問題
這篇文章主要介紹了Vue中使用wangeditor富文本編輯的問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-02-02
Vue3中實現(xiàn)div拖拽功能
這篇文章主要介紹了Vue3中實現(xiàn)div拖拽功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-03-03
Vue?+?Print.js前端打印自定義字體大小、自定義樣式以及封裝共享樣式
這篇文章主要介紹了Vue?+?Print.js前端打印自定義字體大小、自定義樣式以及封裝共享樣式的相關資料,Print.js主要是為了幫助我們直接在瀏覽器中開發(fā)打印功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-06-06
Vue中父子組件通信與事件觸發(fā)的深入講解
組件是Vue核心功能之一,合理的組件化,可以減少我們代碼的冗余,提高項目的可維護性,下面這篇文章主要給大家介紹了關于Vue中父子組件通信與事件觸發(fā)的相關資料,需要的朋友可以參考下
2022-03-03
vue 使用localstorage實現(xiàn)面包屑的操作
這篇文章主要介紹了vue 使用localstorage實現(xiàn)面包屑的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue實現(xiàn)卡片遮罩層交互式功能
在前端開發(fā)中,卡片遮罩層是一種常見的交互設計元素,用于強調某個區(qū)域或內容,并提供用戶操作的入口,本文將帶大家在?vue?中結合實際案例實現(xiàn)此功能,感興趣的朋友一起看看吧
2024-08-08
vue 基于abstract 路由模式實現(xiàn)頁面內嵌的示例代碼
這篇文章主要介紹了vue 基于abstract 路由模式實現(xiàn)頁面內嵌的示例代碼，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12