- You can call me
Kanno
- I've been busy recently
- Learning
zig
nonzzz / vite-bundle-analyzer Goto Github PK
View Code? Open in Web Editor NEWbundle analyzer for vite
License: MIT License
bundle analyzer for vite
License: MIT License
"vite": "^5.3.4",
"vite-bundle-analyzer": "^0.10.3",
I use virtual modules & custom plugin @budarin/vite-webmanifest.
could this be the reason?
Currently all npm packages have same size in UI, while some may be 10kb and others 1mb. Can you please make modules size based on their size in bundle? It works like that in webpack-bundle-analyzer
On my M1 macbook pro the output file is completely empty, 0 bytes
My setup/project:
I found the problem was not awaiting the write of the output file and have included a fix here: #21
ๆๆฐ็
analyzer({
openAnalyzer: false, // ๆฏๅฆๆๅผ้ๆ็ฝ็ซ
}),
ๅช้
็ฝฎไบไธไธชๅๆฐ
"devDependencies": {
"@vitejs/plugin-legacy": "^5.3.2",
"@vitejs/plugin-vue": "^5.0.4",
"rollup-plugin-visualizer": "^5.12.0",
"unplugin-auto-import": "^0.17.5",
"unplugin-vue-components": "^0.26.0",
"vite": "^5.2.9",
"vite-bundle-analyzer": "^0.9.4",
"vite-plugin-compression2": "^1.1.0"
}
Not sure if you're open to requests, but I'm mainly looking for a decent summary of the build output in the terminal. This makes most sense on a build server as well because the final build does not need to have a fancy result. Something like the following is more than enough: 16 chunks of 876 kB (parsed: 432 kB | gzipped: 123 kB)
I can't get it to work on a freshly created SvelteKit project.
Excuse me if it's just a knowledge gap and I am missing what this project is actually for.
Steps to reproduce:
npm create svelte@latest my-app
vite.config.ts
npm run build
error during build:
TypeError: Cannot read properties of null (reading 'port')
at get port [as port] (file:///Users/peter/code/local-first/vite-bundle-test/node_modules/.pnpm/[email protected]/node_modules/vite-bundle-analyzer/dist/index.mjs:2:7940)
at Object.closeBundle (file:///Users/peter/code/local-first/vite-bundle-test/node_modules/.pnpm/[email protected]/node_modules/vite-bundle-analyzer/dist/index.mjs:2:10477)
at file:///Users/peter/code/local-first/vite-bundle-test/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19778:40
at async Promise.all (index 0)
at async PluginDriver.hookParallel (file:///Users/peter/code/local-first/vite-bundle-test/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19706:9)
at async Object.close (file:///Users/peter/code/local-first/vite-bundle-test/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:20635:13)
at async build (file:///Users/peter/code/local-first/vite-bundle-test/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:67497:13)
at async CAC.<anonymous> (file:///Users/peter/code/local-first/vite-bundle-test/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/cli.js:842:9)
You can also check out the codesandbox or the minimal repo showcasing the error.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.