2 min read, 317 words, last updated: 2022/2/1
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