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