Great article! Could you add some info about production builds, difference in timing? When using Webpack, the production build often takes longer due to minimization. Would be interesting to see some statistics for Vite.
Another helpful Webpack feature is aliases, that prevent long absolute paths, e.g.
// instead ofimportxfrom'../../../components/x';// you writeimportxfrom'@components/x';
Most of the time building for prod isn't spent on transpilation. That's why OP is asking. I'm using SWC with Webpack which is even faster than ESBuild, yet prod builds take much longer due to optimizations like minification, tree-shaking, bundle chunks, etc...
While Vite uses ESBuild during development, it actually uses Rollup for bundling production builds, so the comparisons should be between Webpack & Rollup as ESBuild doesn't weigh in here.
Great article! Could you add some info about production builds, difference in timing? When using Webpack, the production build often takes longer due to minimization. Would be interesting to see some statistics for Vite.
Another helpful Webpack feature is aliases, that prevent long absolute paths, e.g.
I see Vite has a plugin for it.
Thanks for the kind words!
Regarding performance - Vite uses esbuild under the hood, and esbuild caused quite a commotion in the industry when it was released.
Enough has been written on this matter so I'll just quote.
vitejs.dev/guide/why.html
esbuild.github.io/
Most of the time building for prod isn't spent on transpilation. That's why OP is asking. I'm using SWC with Webpack which is even faster than ESBuild, yet prod builds take much longer due to optimizations like minification, tree-shaking, bundle chunks, etc...
While Vite uses ESBuild during development, it actually uses Rollup for bundling production builds, so the comparisons should be between Webpack & Rollup as ESBuild doesn't weigh in here.
You can also set up aliases in Babel (and not Webpack) using the module-resolver plugin