Makuhari Development Corporation
2 min read, 317 words, last updated: 2022/2/1
TwitterLinkedInFacebookEmail

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:

example-of-generated-component-dependencies

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:

example-of-generated-commit-history-and-file-structure

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:

example-of-generated-bundle-size-chart

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
Makuhari Development Corporation
法人番号: 6040001134259
サイトマップ
ご利用にあたって
個人情報保護方針
個人情報取扱に関する同意事項
お問い合わせ
Copyright© Makuhari Development Corporation. All Rights Reserved.