I've updated an Angular 17 project to the new Vite + ESBuild build system, and noticed that the bundle size increased: WebPack Build: ESBuild + Vite Build: The new Vite + ESBuild version built the project faster than Webpack, which isn't a surprise. But what I didn't expect was the initial bundle size to increase so much (2.01Mb to 2.24Mb). I followed Angular's official docs to update the project. Besides the build speed, aren't the bundle sizes suppose to decrease with ESBuild? Am I missing any extra configurations that would help reduce the initial bundle? UPDATE: Since I first posted this question I've added extra dependencies and upgraded the project to Angular 18. Even though the overall bundle has increased, the estimated transfer size between the two build systems decreased a little. But there's still a noticeable difference between the two raw bundle sizes: WebPack Build: ESBuild + Vite Build: My questions still remains: Besides the build speed, aren't the bundle sizes suppose to decrease with ESBuild? Or are we only going to see noticeable improvements with bigger dependencies? Right now, I don't see any reason to upgrade my project to ESBuild + Vite. I'll try again in a couple of months when more dependencies are added. UPDATE #2: I've updated my Angular project to version 19, and noticed that the difference between the two build systems is insignificant now. Well, the bad news is that Angular's v19 increased the bundle size: Angular v18.2.14 (WebPack): 1.90 MB // 332.06 kB Angular v19.0.3 (WebPack): 1.94 MB // 341.45 kB Angular v19.0.3 (ESBuild + Vite): 1.94 MB / 341.76 kB Given the small differences, I decided to use the new ESBuild + Vite build system. It's worth noting that the ESBuild+Vite has much faster build times, but will preform worst when tree-shaking. Using Barrel files might also increase your bundle size! Here are some interesting discussions no BlueSky regarding these issues: Different bundle sizes Build time or build size? Continue reading...
