Vue-Cli项目如何查看依赖调用关系？

Vue是个优秀的前端框架，不管是前端还是后端开发人员都能很快使用Vue来开发应用。但是随着项目开发的深入，组件之间的依赖就变得越来越多，耦合越来越严重。这时候我们迫切地需要分析下组件和依赖之间的调用关系了。

一、探索

经过一番寻找，我发现了stats-webpack-plugin这个插件。链接中有这个插件在webpack中的使用方法。我下面的教程基本是参考了官方指引。

二、安装和使用

1. 首先安装stats-webpack-plugin插件

1. 然后把下面的配置放到wepback.config的plugins中

var StatsPlugin = require('stats-webpack-plugin');

module.exports = {

  plugins: [

    new StatsPlugin('stats.json', {

      chunkModules: true,

      exclude: [/node_modules[\\\/]react/]

    })

  ]

};

stats.json里面具体的配置可以参考官网stats.json详细配置，里面有很详细的说明。

但是我们使用的是vue-cli，里面并没有webpack.config.js或者webpack.prod.js，我们根本不能添加配置到项目中，那么vue-cli该如何使用呢？

 plugins: [new StatsPlugin('stats.json', {

            chunkModules: true,

            chunks: true,

            assets: false,

            modules: true,

            children: true,

            chunksSort: true,

            assetsSort: true

        })]

1. 查看依赖关系

   打包完成后，会在你指定的目录生成dist文件，你会发现dist文件夹下面会有一个stats.json文件（warning：纯文本文件大小可能超过10M，直接打开请慎重