淺析webpack-bundle-analyzer在vue-cli3中的使用
更新時間：2019年10月23日 10:57:00 作者：ypeusksk
這篇文章主要介紹了webpack-bundle-analyzer在vue-cli3中的使用,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
正常的使用方法
安裝
npm install webpack-bundle-analyzer -D
webpack.config.js：
vue-cli3的配置方法
根目錄的vue.config.js（沒有則自己創(chuàng)建）
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
執(zhí)行以下命令即可查看到結(jié)果。
npm run serve
也可以改為獨立的script
vue.config.js
module.exports = {
chainWebpack: config => {
if (process.env.use_analyzer) {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
}
package.json
{
"scripts": {
...
"analyzer": "use_analyzer=true npm run serve"
}
}
那么在使用以下命令時，才會彈出analyzer
npm run analyzer
總結(jié)
以上所述是小編給大家介紹的webpack-bundle-analyzer在vue-cli3中的使用,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了Vue之徹底理解自定義組件的v-model的相關(guān)知識 ,需要的朋友可以參考下的相關(guān)資料2017-11-11
今天小編就為大家分享一篇vue里面使用mui的彈出日期選擇插件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue的nextTick的使用,本文從源碼出發(fā)給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
詳解如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件
本篇文章主要介紹了詳解如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件，具有一定的參考價值，有興趣的可以了解一下2017-06-06
這篇文章主要介紹了vue中如何解除數(shù)據(jù)之間的雙向綁定，具有很好的參考價值，希望對2022-09-09
這篇文章主要介紹了Vue SPA 首屏優(yōu)化方案的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了vue獲取光標(biāo)位置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了uni-app 實現(xiàn)小程序登錄注冊功能,文中給大家介紹了實現(xiàn)思路，以及vuex和本地緩存的區(qū)別，需要的朋友可以參考下2019-10-10
OpenLayers?是一個專為Web?GIS?客戶端開發(fā)提供的JavaScript?類庫包，用于實現(xiàn)標(biāo)準(zhǔn)格式發(fā)布的地圖數(shù)據(jù)訪問。本文將通過Vue和OpenLayer實現(xiàn)測距功能?，需要的可以參考一下2022-04-04
在后臺使用過程中經(jīng)常會因為按鈕重復(fù)點擊,而造成發(fā)送多次重復(fù)請求 以下方法可以避免這種情況,下面這篇文章主要給大家介紹了關(guān)于vue中如何防止用戶頻繁點擊按鈕的相關(guān)資料,需要的朋友可以參考下2022-09-09