vue2.0實(shí)現(xiàn)檢測(cè)無(wú)用的代碼并刪除
vue2.0檢測(cè)無(wú)用的代碼并刪除
（1）、使用 useless-files-webpack-plugin 來(lái)查找無(wú)用文件
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'), // 項(xiàng)目目錄
out: './fileList.json', // 輸出文件列表
clean: false, // 是否刪除文件,
exclude: /node_modules/ // 排除文件列表
})
)
}（3）、每次編譯的時(shí)候，都會(huì)將一些沒(méi)有用到的文件輸出到unused-files.json這個(gè)文件，可以自己再手動(dòng)檢測(cè)一下，然后刪掉無(wú)用的代碼。
（4）、刪除大量的代碼后，git提交代碼時(shí)，記得在git上打個(gè)tag，以方便回滾或者找代碼
webpack打包刪除無(wú)用文件
在webpack打包項(xiàng)目過(guò)程中，常遇見(jiàn)一些無(wú)用的圖片，js文件，怎樣能夠自動(dòng)檢測(cè)哪些是無(wú)用的文件呢？
使用插件useless-files-webpack-plugin查找無(wú)用文件，在terminal中刪除
操作步驟
安裝
安裝方法
cnpm i useless-files-webpack-plugin -D
檢查安裝是否成功
進(jìn)入package.json中，刷新package.json文件，搜索"useless-files-webpack-plugin"，如果存在，則安裝成功
具體用法
1.在webpack.prod.conf.js中，添加如下代碼
// 頂部導(dǎo)入插件
const UselessFile = require('useless-files-webpack-plugin')
2.plugins中添加插件配置
new UselessFile({
root: './src', // 項(xiàng)目目錄
out: './fileList.json', // 輸出文件列表
clean: false,// 刪除文件,
exclude: path // 排除文件列表, 格式為文件路徑數(shù)組
}),
3.打包時(shí)自動(dòng)在項(xiàng)目的根目錄下生成unused-files.json, 保存著無(wú)用文件的列表。
如圖所示：
4.進(jìn)入終端，使用命令刪除列表中文件，重新打包
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue組件通信的四種方式，分別是父子組件通信、非父子組件的eventBus通信、利用localStorage或者sessionStorage以及利用Vuex等方法，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-02-02
在uniapp中與webview的通信是一個(gè)常見(jiàn)且重要的功能,這篇文章主要介紹了uniapp和webview之間通信的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
vue前端實(shí)現(xiàn)批量上傳圖片功能并回顯圖片
這篇文章主要為大家詳細(xì)介紹了vue前端實(shí)現(xiàn)批量上傳圖片功能并回顯圖片的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-10-10
這篇文章主要介紹了Vue中使用wangeditor富文本編輯的問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
這篇文章主要介紹了Vue3中實(shí)現(xiàn)div拖拽功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
Vue?+?Print.js前端打印自定義字體大小、自定義樣式以及封裝共享樣式
這篇文章主要介紹了Vue?+?Print.js前端打印自定義字體大小、自定義樣式以及封裝共享樣式的相關(guān)資料,Print.js主要是為了幫助我們直接在瀏覽器中開(kāi)發(fā)打印功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
組件是Vue核心功能之一,合理的組件化,可以減少我們代碼的冗余,提高項(xiàng)目的可維護(hù)性,下面這篇文章主要給大家介紹了關(guān)于Vue中父子組件通信與事件觸發(fā)的相關(guān)資料,需要的朋友可以參考下2022-03-03
vue 使用localstorage實(shí)現(xiàn)面包屑的操作
這篇文章主要介紹了vue 使用localstorage實(shí)現(xiàn)面包屑的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
在前端開(kāi)發(fā)中,卡片遮罩層是一種常見(jiàn)的交互設(shè)計(jì)元素,用于強(qiáng)調(diào)某個(gè)區(qū)域或內(nèi)容,并提供用戶(hù)操作的入口,本文將帶大家在?vue?中結(jié)合實(shí)際案例實(shí)現(xiàn)此功能,感興趣的朋友一起看看吧2024-08-08
vue 基于abstract 路由模式 實(shí)現(xiàn)頁(yè)面內(nèi)嵌的示例代碼
這篇文章主要介紹了vue 基于abstract 路由模式 實(shí)現(xiàn)頁(yè)面內(nèi)嵌的示例代碼，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12