Vue是個優(yōu)秀的前端框架千埃，不管是前端還是后端開發(fā)人員都能很快使用Vue來開發(fā)應用。但是隨著項目開發(fā)的深入忆植，組件之間的依賴就變得越來越多放可，耦合越來越嚴重。這時候我們迫切地需要分析下組件和依賴之間的調(diào)用關系了朝刊。
一耀里、探索
經(jīng)過一番尋找，我發(fā)現(xiàn)了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里面具體的配置可以參考官網(wǎng)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文件载绿，你會發(fā)現(xiàn)dist文件夾下面會有一個stats.json文件（warning：純文本文件大小可能超過10M，直接打開請慎重 :P）油航。現(xiàn)在我們需要一個可視化的依賴關系查看工具卢鹦，我使用的是webpack-analyse。打開鏈接劝堪，會讓你選擇你的stats.json文件冀自。如圖
上傳stats.json之后點擊modules，就出現(xiàn)關系圖了秒啦。
還有一個可視化工具是webpack-chart熬粗，使用方法跟webpack-analyse一樣，但是可以展示更炫酷的關系餅圖余境。
三驻呐、總結
總結一下如何查看組件依賴關系，第一步我們需要一個stats-webpack-plugin插件芳来。第二步我們需要在webpack或者vue.config.js中配置上述插件含末。兩種方式配置方法有些許不同。第三步是打包后生成stats.json文件即舌，然后我們選擇合適的可視化查看工具來查看關系佣盒。然后你就可以根據(jù)依賴關系圖來優(yōu)化你的項目了。
參考文章:
使用vue-cli構建項目怎么查看組件依賴樹
Expose webpack build stats (like hash) for plugins
性能優(yōu)化篇之Webpack構建速度優(yōu)化的建議
