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