vite-bundle-analyzer

[!WARNING] Vite's enable minify by default.There for you will see that the parsed size is larger than actual size.This is because the bundle info provide by rollup isn't compressed.(If you care about this problem you can choose anothr plugins.)

Install

$ yarn add vite-bundle-analyzer -D

# or

$ npm install vite-bundle-analyzer -D

Usage

import { defineConfig } from 'vite'

import { analyzer } from 'vite-bundle-analyzer'

export default defineConfig({
  plugins: [
    // ...your plugin
    analyzer()
  ]
})

// If you are using it in rollup or others support rollup plugin system you can import 'adapter' from package.
// Then use it with adapter(analyzer())

Options

params	type	default	description
analyzerMode	server|static|json|function	server	In server will create a static server to preview.
fileName	string	stats	The name of the static product.（No suffix name）
reportTitle	string	plugin name	Report website title.
gzipOptions	Record<string,any>	{}	Compression options. (Details see zlib module)
analyzerPort	number|'auto'	8888	static server port.
openAnalyzer	boolean	true	Open the static website. (Only works on analyzerMode is server or static )
defaultSizes	stat|parsed|gzip\brotil	stat	The default type selected in the client page
summary	boolean	true	Show full chunk info to stdout.

ClI

This plugin provides cli util analyze. Add --help to check actual options. It can be used like:

$ analyze

Sponsors

Contributions

Contributions are welcome! If you find a bug or want to add a new feature, please open an issue or submit a pull request.

Author and contributors

DEBUG

If you're using vite you can get the logs with vite build --debug and then extreact the part relevant to analyze plugin. Or using cross-env to setup ANALYZE_DEBUG=true in your local. env.

Why i get the chunk size is empty?

If you're use a plugin that break the sourcemap it will affect the analyze plugin. I know it's stupid, But is the way to get the size close to the actual size. Like @vitejs/plugin-legacy don't prvide the correctly sourcemap for legacy chunk. For some reason, no analysis will be provided for those module.

Why when i specify analyzerMode as static and set openAnalyzer as false don't create a liviing server?

I don't want to add new option to control living server.

For vite based framework or library!!!

If you're using vitepress or remix or qwik and etc who based on the vite framework. Normally it will run two vite instance during build phase. So you should ensure that analyzerMode as server.(If you pass static or json for the analyzerMode i can't promise the final result.) Like vitpress will remove something (I don't know why? Maybe it's run with race?)

Integrated

Integrate this plugin into your rollup/vite tool. The following is a list of exposed APIs.

// For integrate it as custom analyzer

// Returns the HTML string
declare function renderView(analyzeModule: Module[], options: RenderOptions): Promise<string>

// Create a static living server.
declare function createServer(): CreateServerContext

declare function openBrowser(address: string): void

declare function injectHTMLTag(options: InjectHTMLTagOptions): string

declare class SSE {
  private activeStreams
  serverEventStream(req: http.IncomingMessage, res: http.ServerResponse): void
  sendEvent(event: string, data: string): void
  private removeStream
}

// example

const server = createServer()

server.get('/', async (c) => {
  let html = await renderView(data, { title: 'Vite Bundle Analyzer', mode: 'parsed' })
  c.res.writeHead(200, { 'Content-Type': 'text/html', 'Cache-Control': 'no-cache' })
  c.res.write(html)
  c.res.end()
})

server.listen(3000)

// If you want set this plugin in rollup output plugins. you should wrapper plugin `generateBundle` by your self.

const { api, generateBundle, ...rest } = analyzer()

const data = []

const myAnalyzerPlugin = {
  ...reset,
  api,
  async generateBundle(...args) {
    await generateBundle.apply(this, args)
    data.push(api.processModule())
  }
}

// .... your logic

LICENSE

MIT