淺析webpack-bundle-analyzer在vue-cli3中的使用
正常的使用方法
安裝
npm install webpack-bundle-analyzer -D
webpack.config.js:

vue-cli3的配置方法
根目錄的vue.config.js(沒(méi)有則自己創(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中的使用,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
詳解如何在 vue 項(xiàng)目里正確地引用 jquery 和 jquery-ui的插件
本篇文章主要介紹了詳解如何在 vue 項(xiàng)目里正確地引用 jquery 和 jquery-ui的插件,具有一定的參考價(jià)值,有興趣的可以了解一下2017-06-06
vue中uni-app 實(shí)現(xiàn)小程序登錄注冊(cè)功能
這篇文章主要介紹了uni-app 實(shí)現(xiàn)小程序登錄注冊(cè)功能,文中給大家介紹了實(shí)現(xiàn)思路,以及vuex和本地緩存的區(qū)別,需要的朋友可以參考下2019-10-10
Vue+OpenLayer實(shí)現(xiàn)測(cè)距功能
OpenLayers?是一個(gè)專(zhuān)為Web?GIS?客戶(hù)端開(kāi)發(fā)提供的JavaScript?類(lèi)庫(kù)包,用于實(shí)現(xiàn)標(biāo)準(zhǔn)格式發(fā)布的地圖數(shù)據(jù)訪問(wèn)。本文將通過(guò)Vue和OpenLayer實(shí)現(xiàn)測(cè)距功能?,需要的可以參考一下2022-04-04

