淺析vue-cli3配置webpack-bundle-analyzer插件【推薦】
更新時(shí)間：2019年10月23日 10:43:22 作者：狂奔的蝸牛0828
小編最近為了優(yōu)化vue項(xiàng)目性能，需要使用webpack-bundle-analyzer插件來(lái)分析報(bào)文件，在網(wǎng)上沒有找到合適的，下面小編給大家寫出來(lái)一個(gè)供大家參考
為優(yōu)化vue項(xiàng)目性能,需要使用webpack-bundle-analyzer分析報(bào)文件，找出最占用空間的插件有哪些，對(duì)應(yīng)做出優(yōu)化
網(wǎng)上看了一些網(wǎng)站，有的寫的太麻煩了，現(xiàn)將最簡(jiǎn)單的一種寫出來(lái)供大家參考
安裝：
npm install webpack-bundle-analyzer --save-dev
vue.config.js配置
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
運(yùn)行命令
npm run serve
注意8888端口是寫死的，不可以更改，如果本地已經(jīng)啟動(dòng)了8888端口，會(huì)報(bào)錯(cuò)
頁(yè)面展示
總結(jié)
以上所述是小編給大家介紹的vue-cli3配置webpack-bundle-analyzer插件,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了Vue 中的compile操作方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-02-02
axios是vue-resource后出現(xiàn)的Vue請(qǐng)求數(shù)據(jù)的插件。下面我們通過本文給大家介紹vue axios用法教程詳解，感興趣的朋友一起看看吧2017-07-07
這篇文章主要介紹了Vue中使用echarts的方法，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02
Vue配置proxy代理接口報(bào)錯(cuò)2007 bad domain的解決
本文主要介紹了Vue配置proxy代理接口報(bào)錯(cuò)2007 bad domain的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue項(xiàng)目中字符串換行顯示方式(返回的數(shù)據(jù)包含‘\r\n’字符)
這篇文章主要介紹了vue項(xiàng)目中字符串換行顯示方式(返回的數(shù)據(jù)包含‘\r\n’字符)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue使用showdown并實(shí)現(xiàn)代碼區(qū)域高亮的示例代碼
這篇文章主要介紹了vue使用showdown并實(shí)現(xiàn)代碼區(qū)域高亮的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
作為一名剛?cè)腴T計(jì)算機(jī)語(yǔ)言的人來(lái)說(shuō),要想快速完成測(cè)試開發(fā)地圖項(xiàng)目,肯定要接用到SuperMap，本文主要介紹了Vue 使用超圖SuperMap的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了vue組件代碼分塊和懶加載講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3全局組件注冊(cè)的實(shí)現(xiàn)代碼
在這篇文章中,我們將學(xué)習(xí)一下 Vue3 的全局組件注冊(cè)是如何實(shí)現(xiàn)的,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
圖文詳解vue中proto文件的函數(shù)調(diào)用
這篇文章主要給大家介紹了vue中proto文件函數(shù)調(diào)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-08-08