Vue是个优秀的前端框架，不管是前端还是后端开发人员都能很快使用Vue来开发应用。但是随着项目开发的深入，组件之间的依赖就变得越来越多，耦合越来越严重。这时候我们迫切地需要分析下组件和依赖之间的调用关系了。
一、探索
经过一番寻找，我发现了stats-webpack-plugin这个插件。链接中有这个插件在webpack中的使用方法。我下面的教程基本是参考了官方指引。
二、安装和使用
- 首先安装
stats-webpack-plugin插件
$ npm install --save-dev stats-webpack-plugin
- 然后把下面的配置放到
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该如何使用呢？
第一步肯定是安装
$ npm install --save-dev stats-webpack-plugin，或者直接添加到package.json中添加配置的时候与
webpack不太相同，我们需要在vue.config.js中声明StatsPlugin。const StatsPlugin = require('stats-webpack-plugin')在
configureWebpack中的plugin中增加如下配置
plugins: [new StatsPlugin('stats.json', {
chunkModules: true,
chunks: true,
assets: false,
modules: true,
children: true,
chunksSort: true,
assetsSort: true
})]
-
查看依赖关系
打包完成后，会在你指定的目录生成
dist文件，你会发现dist文件夹下面会有一个stats.json文件（warning：纯文本文件大小可能超过10M，直接打开请慎重 :P）。现在我们需要一个可视化的依赖关系查看工具，我使用的是webpack-analyse。打开链接，会让你选择你的stats.json文件。如图
上传stats.json之后点击modules，就出现关系图了。
还有一个可视化工具是webpack-chart，使用方法跟webpack-analyse一样，但是可以展示更炫酷的关系饼图。
三、总结
总结一下如何查看组件依赖关系，第一步我们需要一个stats-webpack-plugin插件。第二步我们需要在webpack或者vue.config.js中配置上述插件。两种方式配置方法有些许不同。第三步是打包后生成stats.json文件，然后我们选择合适的可视化查看工具来查看关系。然后你就可以根据依赖关系图来优化你的项目了。
参考文章:
使用vue-cli构建项目怎么查看组件依赖树
Expose webpack build stats (like hash) for plugins
性能优化篇之Webpack构建速度优化的建议
