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

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

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

在上一章我们把主包和子包的依赖树组合成了一个完整的依赖树，并输出到了
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 });
}

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

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>

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 [
        '<div class="tooltip-title">'
        + formatUtil.encodeHTML(treePath.join('/'))
        + '</div>',
        '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);

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

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

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

原文链接：https://blog.csdn.net/qq_28506819/article/details/127717653

你可能也喜欢