手写小程序摇树优化工具（七）——生成依赖图

和大怨，必有余怨。安可以为善？是以圣人执左契，而不责于人。有德司契，无德司彻。天道无亲，常于善人。

上一章我们初步完成了整个小程序的依赖收集，这一章我们介绍如何生成类似小程序开发者工具的依赖图，以便对我们摇树之后的代码有个更加清晰的了解。

在上一章我们把主包和子包的依赖树组合成了一个完整的依赖树，并输出到了analyse目录下，我们将使用这些数据结合echarts来生成真正的可视化依赖图：

createTree() {
  console.log('正在生成依赖图...');
  const tree = { [this.config.mainPackageName]: this.mainDepend.tree };
  this.subDepends.forEach(item => {
    tree[item.rootDir] = item.tree;
  });
  fse.copySync(path.join(__dirname, '../analyse'), this.config.analyseDir);
  fse.writeJSONSync(path.join(this.config.analyseDir, 'tree.json'), tree, { spaces: 2 });
}
1
2
3
4
5
6
7
8
9

在该目录下还有两个文件：
index.html

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>依赖分析title>
  <style>
    html, body, #app {
      width: 100%;
      height: 100%;
    }
  style>
head>
<body>
<div id="app">div>
body>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js">script>
<script src="./index.js">script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

index.js

function flatDependency(map, arr) {
  Object.keys(map).forEach((name) => {
    const { size, children } = map[name];
    const flatChildren = [];
    arr.push({
      name,
      value: size,
      children: flatChildren,
    });
    if (!children) {
      return;
    }
    flatDependency(children, flatChildren);
  });
}

const data = [];
const treeJson = require('./tree.json');
flatDependency(treeJson, data);

const eChart = echarts.init(document.getElementById('app'));
const formatUtil = echarts.format;

const option = {
  backgroundColor: '#333',
  title: {
    text: '小程序依赖分布',
    left: 'center',
    textStyle: {
      color: '#fff',
    },
  },
  tooltip: {
    formatter: function (info) {
      const treePath = [];
      const { value, treePathInfo } = info;
      const pathDeep = treePathInfo.length;
      if (pathDeep <= 2) {
        treePath.push(treePathInfo[1] && treePathInfo[1].name);
      } else {
        for (let i = 2; i < pathDeep; i++) {
          treePath.push(treePathInfo[i].name);
        }
      }

      return [
        ''
        + formatUtil.encodeHTML(treePath.join('/'))
        + '
',
        'size: ' + value.toFixed(2) + ' KB',
      ].join('');
    },
  },
  series: [
    {
      type: 'treemap',
      name: 'Dependency',
      data: data,
      radius: '100%',
      visibleMin: 300,
      label: {
        show: true,
        formatter: '{b}',
      },
      itemStyle: {
        borderColor: '#fff',
      },
      levels: [
        {
          itemStyle: {
            gapWidth: 1,
            borderWidth: 0,
            // borderColor: "#777",
          },
        },
        {
          itemStyle: {
            gapWidth: 1,
            borderWidth: 5,
            borderColor: '#555',
          },
          upperLabel: {
            show: true,
          },
        },
        {
          itemStyle: {
            gapWidth: 1,
            borderWidth: 5,
            borderColor: '#888',
          },
          upperLabel: {
            show: true,
          },
        },
        {
          itemStyle: {
            gapWidth: 1,
            borderWidth: 5,
            borderColor: '#4eba0f',
          },
          upperLabel: {
            show: true,
          },
        },
        {
          colorSaturation: [0.35, 0.5],
          itemStyle: {
            gapWidth: 1,
            borderWidth: 5,
            borderColorSaturation: 0.4,
            color: '#fc8452',
          },
          upperLabel: {
            show: true,
          },
        },
      ],
    },
  ],
};
eChart.setOption(option);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

我们只要在本地启动一个服务，并访问index.html就可以看到整个依赖图了，例如：

npm i parcel-bundler -g
parcel ./analyse/index.html --open --out-dir analyse-dist
1
2

下一章开始我们介绍更为高级的摇树优化，逻辑会更加复杂，敬请期待下文。

相关阅读:
com.genuitec.eclipse.springframework.springnature
记录Mac中使用zsh配置多开发环境与常用命令
 HarmonyOS NEXT应用开发—在Native侧实现进度通知功能
 倍思、南卡、漫步者开放式耳机好不好用？硬核测评年度最强产品
 【Codecs系列】HEVC-SCC（七）：调色板PM模式分析
 Spring 6面向切面编程aop详解
 Java：多线程基础（二）-线程生命周期
 装配式施工在建筑装修中的应用研究
 【无标题】
快速排序——及其改进
原文地址：https://blog.csdn.net/qq_28506819/article/details/127717653