---
title: "@farmfe/js-plugin-visualizer"
locale: "zh"
version: "current"
canonicalUrl: "https://farmfe.org/zh/docs/plugins/official-plugins/js-visualizer"
publicationStatus: "prerelease"
---

<a id="farmfejs-plugin-visualizer"></a>
# @farmfe/js-plugin-visualizer


Visualize Farm bundle size and module composition.


<a id="installation"></a>
## Installation


**npm**

```javascript
npm install @farmfe/js-plugin-visualizer
```


**yarn**

```javascript
yarn add @farmfe/js-plugin-visualizer
```


**pnpm**

```javascript
pnpm add @farmfe/js-plugin-visualizer
```



<a id="usage"></a>
## Usage


```ts
import { defineConfig } from '@farmfe/core';
import visualizer from '@farmfe/js-plugin-visualizer';

export default defineConfig({
  compilation: {
    input: {
      index: './index.html'
    }
  },
  plugins: [
    visualizer()
  ]
});
```


<a id="options"></a>
## Options


```ts
export interface RecordViewerOptions {
  /**
   * Specify hostname.
   * @default 'localhost'
   */
  host?: string;

  /**
   * Specify port.
   * @default 9527
   */
  port?: number;
}
```


<a id="host"></a>
### ` host `


Host for the visualizer server. Defaults to ` localhost `.


<a id="port"></a>
### ` port `


Port for the visualizer server. Defaults to ` 9527 `.


<a id="credits"></a>
## Credits


Farm's Visualizer is inspired by [` vite-plugin-inspect `](<https://github.com/antfu/vite-plugin-inspect>) and [` rsdoctor `](<https://github.com/web-infra-dev/rsdoctor>).