vue2.0實現(xiàn)檢測無用的代碼并刪除
更新時間：2024年07月19日 09:16:40 作者：javascript藝術(shù)
這篇文章主要介紹了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中，添加如下代碼
// 頂部導(dǎo)入插件
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, 保存著無用文件的列表。
如圖所示：
4.進入終端，使用命令刪除列表中文件，重新打包
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vue項目部署遇到的問題及解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要為大家詳細介紹了使用vue構(gòu)建一個上傳圖片表單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Vue腳手架學(xué)習(xí)之項目創(chuàng)建方式
這篇文章主要給大家介紹了關(guān)于Vue腳手架學(xué)習(xí)之項目創(chuàng)建方式的相關(guān)資料，文中通過介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了在vue3.0中如何配置代理問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue 401配合Vuex防止多次彈框的案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue3純前端表格數(shù)據(jù)的導(dǎo)出與導(dǎo)入實現(xiàn)方式
這篇文章主要介紹了如何在純前端環(huán)境下使用xlsx-js-style庫進行Excel表格文件的下載,并自定義樣式,還提到了使用xlsx庫進行Excel表格數(shù)據(jù)的導(dǎo)入,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
本文主要介紹了el-table渲染慢卡頓問題最優(yōu)解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
jdk1.8+vue elementui實現(xiàn)多級菜單功能
這篇文章主要介紹了jdk1.8+vue elementui實現(xiàn)多級菜單功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了Nuxt的動態(tài)路由和參數(shù)校驗操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
element基于el-form智能的FormSmart表單組件
本文主要介紹了element基于el-form智能的FormSmart表單組件，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04