Visualization

• component dependencies
• file structure & commit history
• bundle size

for Component Dependencies

We can use arkit.

Visualises JavaScript, TypeScript and Flow codebases as meaningful and committable architecture diagrams

• package.json

{
  // ...
  "scripts": {
    "arkit": "npx arkit -d src -e \"src/typings,src/configs,src/constants.ts\" -o ./docs-components.png",
    // ...
  }
}

Example:

We can combine it with CI, for example, commit the latest component dependencies chart after the merge operation on the master branch, or directly comment into the PR, etc.

name: Arkit
on:
  pull_request:
    branches:
      - master
 
jobs:
  arkit:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Init
        uses: actions/setup-node@v2
        with:
          node-version: 17
          cache: yarn
      - name: Create Arkit image
        run: |
          npm install -g yarn
          yarn
          yarn arkit
      - name: Upload image
        uses: devicons/public-upload-to-imgur@v2.2.2
        id: imgur_step
        with:
          path: ./docs-components.png
          client_id: ${{secrets.IMGUR_CLIENT_ID}}
      - name: Make comment
        uses: github-actions-up-and-running/pr-comment@v1.0.1
        with:
          repo-token: ${{secrets.GITHUB_TOKEN}}
          message: ${{ fromJSON(steps.imgur_step.outputs.markdown_urls)[0] }}

for File Structure & Commit history

We can use gource.

Software projects are displayed by Gource as an animated tree with the root directory of the project at its centre. Directories appear as branches with files as leaves. Developers can be seen working on the tree at the times they contributed to the project.

gource -s .5 -1280x720 --auto-skip-seconds .5 \
  --stop-at-end --output-ppm-stream - --output-framerate 30 \
  | ffmpeg -y -r 30 -f image2pipe -vcodec ppm -i - -b 65536K docs-gource.mp4

Example:

for Bundle Size

We can use webpack-bundle-analyzer.

• next.config.js

webpack: (config, {dev, isServer, ...options}) => {
  if (process.env.ANALYZE) {
    const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
    config.plugins.push(
      new BundleAnalyzerPlugin({
        analyzerMode: 'static',
        reportFilename: options.isServer
          ? '../analyze/server.html'
          : './analyze/client.html',
      })
    );
  }

Example:

We can optionally check the import cost directly via the IDE extensions.

For exmaple for VS code, we have

code --install-extension wix.vscode-import-cost