Gathering detailed insights and metrics for vite-bundle-analyzer
Gathering detailed insights and metrics for vite-bundle-analyzer
Gathering detailed insights and metrics for vite-bundle-analyzer
Gathering detailed insights and metrics for vite-bundle-analyzer
vite-bundle-visualizer
Visualize vite bundle
rollup-plugin-bundle-analyzer
rollup plugin that represents bundle content as convenient interactive zoomable treemap
vite-plugin-bundle-analyzer
vite-webpack-bundle-analyzer
Vite plugin that represents bundle content as convenient interactive zoomable treemap from Webpack
npm install vite-bundle-analyzer
Typescript
Module System
Node Version
NPM Version
55.7
Supply Chain
97.8
Quality
93.5
Maintenance
100
Vulnerability
100
License
TypeScript (96.45%)
Makefile (1.31%)
HTML (1.3%)
JavaScript (0.94%)
Total Downloads
511,475
Last Day
2,237
Last Week
20,382
Last Month
92,973
Last Year
507,738
194 Stars
126 Commits
8 Forks
2 Watching
2 Branches
9 Contributors
Latest Version
0.15.2
Package Id
vite-bundle-analyzer@0.15.2
Unpacked Size
210.08 kB
Size
70.13 kB
File Count
11
NPM Version
10.5.0
Node Version
21.7.3
Publised On
29 Nov 2024
Cumulative downloads
Total Downloads
Last day
-46.2%
2,237
Compared to previous day
Last week
-21%
20,382
Compared to previous week
Last month
23.8%
92,973
Compared to previous month
Last year
13,486.8%
507,738
Compared to previous year
41
[!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.)
1$ yarn add vite-bundle-analyzer -D 2 3# or 4 5$ npm install vite-bundle-analyzer -D
1import { defineConfig } from 'vite' 2 3import { analyzer } from 'vite-bundle-analyzer' 4 5export default defineConfig({ 6 plugins: [ 7 // ...your plugin 8 analyzer() 9 ] 10}) 11 12// If you are using it in rollup or others support rollup plugin system you can import 'adapter' from package. 13// Then use it with adapter(analyzer())
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 | stat | The default type selected in the client page |
summary | boolean | true | Show full chunk info to stdout. |
This plugin provides cli util analyze
. Add --help to check actual options. It can be used like:
1$ analyze -c "your vite config path"
Contributions are welcome! If you find a bug or want to add a new feature, please open an issue or submit a pull request.
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.
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.
I don't want to add new option to control living server.
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?)
Integrate this plugin into your rollup/vite tool. The following is a list of exposed APIs.
1// For integrate it as custom analyzer
2
3// Returns the HTML string
4declare function renderView(analyzeModule: Module[], options: RenderOptions): Promise<string>
5
6// Create a static living server.
7declare function createServer(port?: number, silent?: boolean): Promise<{
8 setup: (options: ServerOptions) => void
9 readonly port: number
10}>
11
12declare function createStaticMiddleware(options: ServerOptions): (req: http.IncomingMessage, res: http.ServerResponse) => void
13
14declare function arena(): {
15 rs: Readable
16 into(b: string | Uint8Array): void
17 refresh(): void
18}
19
20declare function openBrowser(address: string): void
21
22// example
23
24const b = arena()
25
26renderView(data, options).then((html) => {
27 b.into(html)
28 const { setup } = createServer(...args)
29 setup({ title: 'vite-bundle-analyzer', mode: 'stat', arena: b })
30})
31
32// If you want set this plugin in rollup output plugins. you should wrapper plugin `generateBundle` by your self.
33
34const { api, generateBundle, ...rest } = analyzer()
35
36const data = []
37
38const myAnalyzerPlugin = {
39 ...reset,
40 api,
41 async generateBundle(...args) {
42 await generateBundle.apply(this, args)
43 data.push(api.processModule())
44 }
45}
46
47// .... your logic
No vulnerabilities found.
No security vulnerabilities found.