NPM：

一 安裝

npm install --save-dev webpack-bundle-analyzer

二 配置
在webpack.prod.conf.js中增加以下配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {

  plugins: [

    new BundleAnalyzerPlugin()

  ]

}

配置package.json 文件，默認(rèn)會打開http://127.0.0.1:8888作為展示。

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

三 運(yùn)行

npm run analyz

Yarn:

一 安裝

yarn add -D webpack-bundle-analyze

二 配置

配置webpack.config.js文件：

module.exports = {

    chainWebpack: config => {

        if (process.env.NODE_ENV === 'production') {

            config.optimization.splitChunks({

                cacheGroups: {

                    vendors: {

                        test: /[\\/]node_modules[\\/](vue|axios)[\\/]/,

                        name: 'chunk-vendors',

                        chunks: 'all'

                    }

                }

            })

            config

                .plugin('webpack-bundle-analyzer')

                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

        }

    }

}

配置package.json 文件,默認(rèn)會打開http://127.0.0.1:8888作為展示。

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

三 運(yùn)行

yarn analyz