Hawkeye

Table of Contents generated with DocToc

• Setting up analyze scripts
• Running the analyzer directly
• Version
• Help
• Contributors ✨

Welcome to Hawkeye, a powerful tool designed to help developers visualize and optimize their JavaScript bundles. With our intuitive interface, you can gain deep insights into your project’s bundle structure, identifying large modules, dependencies, and assets that may be impacting performance.

Our visual breakdown allows you to see exactly how your code and third-party libraries contribute to the overall size of your bundle, empowering you to make data-driven decisions to improve load times, enhance performance, and streamline your build process.

Setting up analyze scripts

Hawkeye is provides a init command to help you set up analyze scripts in your package.json with ease. Simply run the following command and answer the questions from the wizard:

npx @angular-experts/hawkeye init

Analyze Your Bundle with Hawkeye

From here on you can run the following commands to analyze your project:

npm run analyze

How it works:

1. Generating build stats: It builds the project and creates a stats.json file containing information about the bundled output. You'll find this file in your project's output directory (usually ./dist).
2. Launching an analysis server: A server starts at http://localhost:1420.

Open it in your browser and upload the stats.json file to see a visual representation of your bundle's contents.

Running the analyzer directly

If you already have a stats.json and like to run the analyzer directly on it, you can do so by running the following command:

npx @angular-experts/hawkeye <pathToStatsJsonFile>

Version

Use the following command to print the version of Hawkeye:

npx hawkeye --version

Help

For more information on using Hawkeye, including detailed command references run:

npx hawkeye --help

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Nivek 💻

Add your contributions