To begin, you'll need to install @farmfe/visualizer
:
npm install @farmfe/visualizer --save-dev
or
yarn add -D @farmfe/visualizer
or
pnpm add -D @farmfe/visualizer
Configuring the plugin in farm.config.ts
:
import { defineFarmConfig } from '@farmfe/core/dist/config';
import visualizer from '@farmfe/visualizer'; // import the plugin
export default defineFarmConfig({
compilation: {
input: {
index: './index.html'
},
output: {
path: './build'
}
},
plugins: [
// use the visualizer plugin.
visualizer({
// custom options here
})
]
});
Type:
type RecordViewerOptions = {
/**
* Specify hostname
* @default '127.0.0.1'
*/
host?: string;
/**
* Specify port
* @default 9527
*/
port?: number;
}
Default: undefined
Thanks to:
-
The vite-plugin-inspect project created by Anthony Fu, inspiring the module analysis feature in Farm's Visualizer.
-
The rsdoctor project created by web-infra, influencing the design of Farm's Visualizer.