Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nonzzz/vite-bundle-analyzer
bundle analyzer for vite
https://github.com/nonzzz/vite-bundle-analyzer
bundle-analyzer rollup-plugin vite-plugin
Last synced: 2 days ago
JSON representation
bundle analyzer for vite
- Host: GitHub
- URL: https://github.com/nonzzz/vite-bundle-analyzer
- Owner: nonzzz
- License: mit
- Created: 2023-07-28T09:44:06.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-17T13:57:36.000Z (14 days ago)
- Last Synced: 2024-12-21T23:02:04.389Z (9 days ago)
- Topics: bundle-analyzer, rollup-plugin, vite-plugin
- Language: TypeScript
- Homepage:
- Size: 19.6 MB
- Stars: 193
- Watchers: 2
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - vite-bundle-analyzer - Utility that represents bundles as an interactive treemap. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-bundle-analyzer - Utility that represents bundles as an interactive treemap. (Plugins / Framework-agnostic Plugins)
README
> [!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
```bash
$ yarn add vite-bundle-analyzer -D
# or
$ npm install vite-bundle-analyzer -D
```
## Usage
```js
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` | `{}` | 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` | `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:
```bash
$ analyze -c "your vite config path"
```
### 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.
```ts
// For integrate it as custom analyzer
// Returns the HTML string
declare function renderView(analyzeModule: Module[], options: RenderOptions): Promise
// 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](./LICENSE)