中文文档

This is a tool to analyze your components code. It supports Vue and React. Viste playground or try the vscode extension vue-hook-optimizer-ext.

Install And Run Playground

# clone the repo then install the dependencies
pnpm install
# run the playground
pnpm run play

Open the browser and visit http://localhost:3000/.

How To Use

1. paste your component code into the editor

2. click Analyze button

The tool will analyze the code, and show the relations between the variables and the methods. This is a simple demo.

Motive

Sometime we have to refactor the code, maybe there are thousands of lines of code in one file. And it is too complex and hard to understand.

So I want to build a tool to help us analyze the code, and find the relations between the variables and the methods. We can find out some variables are isolated, and some methods are over-association, and then we can refactor them.

Development Plan

• add more info, including the variable type, comment, whether has been used in template or hook methods
• provide some suggestions for optimization
• support options api
• vscode extension
• support React

Contribution

Any contributions are welcome.

Sponsor Me

If you like this tool, please consider to sponsor me. I will keep working on this tool and add more features.

License

MIT