A comparative analysis of Webpack and Vite as build tools for JavaScript
Nguyen, Tuan Anh (2024)
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202501141306
https://urn.fi/URN:NBN:fi:amk-202501141306
Tiivistelmä
There are three main categories of web development: front-end, back-end and full-stack. For front-end developments, build tools are used to boost performance and workflow. Vite and Webpack are two popular build tools for JavaScript projects. The aim of the study is to make a analysis of Vite and Webpack in different aspects: technical concepts, configuration files, performance in measurable metrics and support for JavaScript frameworks. The study includes literature reviewing, qualitative research to evaluate support for frameworks and factors affecting configuration complexity and in Vite and Webpack, quantitative research to measure build time, build size in Vite and Webpack. The research targets Vite and Webpack as JavaScript build tools. Backend build tools and unpopular JavaScript frameworks are ruled out.
The theoretical framework includes knowledge about front-end development and JavaScript, JavaScript libraries and frameworks React, Vue, bundler and its features, build tool, technical details of Webpack and Vite. From the theoretical framework, Webpack and Vite shares similarities in minification, transpiling, source map, environment variable, hot module replacement, tree shaking. Webpack bundles the entire code and assets of the application in development and production build. Vite uses esbuild to pre-bundle dependencies and serve source code on demand via ECMAScript modules. In production build, Vite uses Rollup to bundles code.
Case studies were gathered and made by the author to collect configuration files, build time and bundle size of projects in Vite and Webpack. Using esbuild in development and Rollup in production, Vite was faster than Webpack in development and production build time. The results of build size in production varied in case studies. The configuration files showed that Vite and Webpack supports JavaScript frameworks React and Vue by allowing usage of official as well as third-party plugins. Influencing factors of the configuration file in Vite are plugins, mode of build, port number and environment variables. Those factors in Webpack are entry/output path, loaders options, plugins and resolver.
The theoretical framework includes knowledge about front-end development and JavaScript, JavaScript libraries and frameworks React, Vue, bundler and its features, build tool, technical details of Webpack and Vite. From the theoretical framework, Webpack and Vite shares similarities in minification, transpiling, source map, environment variable, hot module replacement, tree shaking. Webpack bundles the entire code and assets of the application in development and production build. Vite uses esbuild to pre-bundle dependencies and serve source code on demand via ECMAScript modules. In production build, Vite uses Rollup to bundles code.
Case studies were gathered and made by the author to collect configuration files, build time and bundle size of projects in Vite and Webpack. Using esbuild in development and Rollup in production, Vite was faster than Webpack in development and production build time. The results of build size in production varied in case studies. The configuration files showed that Vite and Webpack supports JavaScript frameworks React and Vue by allowing usage of official as well as third-party plugins. Influencing factors of the configuration file in Vite are plugins, mode of build, port number and environment variables. Those factors in Webpack are entry/output path, loaders options, plugins and resolver.