這篇文章給大家介紹如何在vue-cli3中使用webpack-bundle-analyzer，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)建站專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、普定網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城網(wǎng)站制作、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為普定等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

使用方法

安裝

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

關(guān)于如何在vue-cli3中使用webpack-bundle-analyzer就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。