Vite and Node.js: Running a Local Server
In order to build our frontend, we needed to see what our website looked like as we constructed it. In order to do this, we needed to run a local server which could host our website and show live edits. The tools we used for this were Node.js and Vite.
Vite, built by the Evan You, the creator of Vue.js, is a development tool that comes with a local development server for building applications.
Vite, which is French for "fast", was built in order to deliver high speed server start up and updates.
When creating your own server, dependencies can often cause slow start up times, however Vite pre-bundles dependencies causing speeds to increase by a factor of ten to a hundred.
In bundler-based projects, rebuilding the entire bundle can be time consuming, and the time increases as the the size of the web application increases. Vite, however, uses Hot Module Replacement (HMR). Hot Module Replacement allows modules of the page to update themselves without affecting the entire page. In addition, Vite uses HTTP headers in order to boost full page reload speeds. Vite also uses "Lazy Loading" of modules, meaning that only the modules that are need are loaded in resulting in smaller bundle sizes and better performance, particularly for bigger web applications.
To reduce the size of your code and to optimize performance, Vite uses techniques called tree shaking and code splitting. Tree shaking filters and removes unused code, while code splitting "splits" your code into smaller pieces that can be loaded as needed much like modules. This results in faster load times and improves overall performance.
Vite has a built-in development server which was specifically built to have faster reload times and hot module replacement. Because of Vite's optimized reload speeds, users are able to development their application and see live updates on their page without even having to refresh the page.
##References https://vitejs.dev/ https://cleancommit.io/blog/what-is-vite/#:~:text=It%20was%20developed%20by%20Evan,to%20develop%20JavaScript%2FTypescript%20applications.
Bryan Lecza