vue-cli3下查看资源树：webpack-bundle-analyzer

方法一(推荐)：

1.安装webpack-bundle-analyzer插件

2.配置vue.config.js

let BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
    configureWebpack: {
        plugins: [new BundleAnalyzerPlugin()],
    },
}

方法二：

1.安装webpack-bundle-analyzer插件

2.配置vue.config.js

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

configureWebpack: config => {

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

            // 为生产环境修改配置...

           if(process.env.use_analyzer){

                config.plugins.push(

                    new BundleAnalyzerPlugin()

                );

            }

        } else {

            // 为开发环境修改配置...

        }

    },

方法三：

1、安装插件webpack-bundle-analyzer：

npm i webpack-bundle-analyzer

2、在vue.config.js中添加分析工具的配置：

module.exports = {

  chainWebpack: (config) => {

    /* 添加分析工具 */

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

      config

        .plugin('webpack-bundle-analyzer')

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

    } else {

    }

  }

}

3、运行

npm run build --report

自动打开浏览器窗口，呈现分析结果