Graduate Program KB

Powerpoint Link

What Is It?

  • A frontend tool for building web apps efficiently and conveniently.
  • Solves some common developer headaches.
    • Slow build and deployment times.
    • Seeing live changes.

Getting Started with Vite

  • To install:
pnpm install -g vite
  • Create project and run the development server and get to work.
# default way, just follow the prompts
pnpm create vite

# can choose specifics
pnpm create vite my-app --template react

cd my-app
pnpm install
pnpm run dev

Key Features

  1. Platform Agnostic: Able to work across multiple platforms and environments offering:
    • Flexibility
    • Cost-effectiveness
    • Scalability
    • Interoperability
  • Although Vite is targeted for JavaScript and TypeScript it can be configured to work with many other languages and frameworks:
    • React
    • CSS
    • Vue
    • YAML
    • GraphQL
    • Markdown
  1. Fast Compilation and Hot Module Replacement (HMR):
  • Uses native ES modules and browser APIs for compilation which eliminates the need for a bundler during development.
  • Improves build and deployment times.
  • Instant updates in the browser.
  • Has a built-in development server which is optimised for fast reloading and HMR.
  • HMR refers to applying changes to your codebase without requiring a full page reload.
    • Rather than refreshing the entire webpage, HMR only updates the modules that have been modified, which preserves the current state of the application
  1. Lazy Module Loading
  • Code is only loaded when it is needed.
  • Smaller bundle sizes and improved performance.
  • Faster initial load times, as code for non-critical/non-needed parts are only loaded if needed.
  1. Tree Shaking and Code Splitting
  • Tree shaking removes unused code from the application.
  • Code splitting allows you to divide your code into smaller, more manageable chunks loaded on demand.
  • These optimisation techniques help reduce the size of your code and improve performance.
  • These techniques work hand in hand ensuring that users only use the code necessary for the current page.
  1. Built-in Development Server
  • Optimised for fast reloading and hot module replacement.
  • Makes it easy to develop and test your app.
  • Supports automatic reloading of your code, avoids manual reloading.
  • Allows you to see changes in your code in real time.

Advantages of Vite

  1. Vitest
  • A vite-native testing framework allowing us to make robust testing suites for our vite projects.
  1. Improved Workflow
  • The fast build times, instant updates in the browser, and built-in development server with hot module replacement capabilities all contribute to an improved workflow.
  • Reducing the time on manual testing and allowing the developers to focus on wiring the code.
  1. Faster Build Times
  • Leverages native ESM imports during development, allowing it to bypass the traditional bundling process.
  • Vite serves individual modules directly into the browser.
  • Resulting in faster build and startup times.
  • Most noticeable in large projects.
  1. Optimised Production Builds
  • Lazy loading of modules and tree-shaking features allow developers to reduce the size of their code, resulting in highly optimised bundles.
  • Vite uses these techniques via a build tool called esbuild under the hood.
  • Resulting in improved performance for their users.
  • This is also more noticeable in larger projects with lots of modules.
  1. Increased Productivity
  • The past 3 benefits all lead to increased productivity as we are speeding up and streamlining many parts of the development process.
  1. Supports Modern Web Standards
  • Utilises ES modules and modern browser APIs
  • An ideal choice for developers looking to leverage the latest standards in frontend development.
  • Ensures projects are created with modern, maintainable, and scalable code.
  • Makes projects easier to maintain over time.
  1. Plugin System
  • Offers a flexible plugin system allowing you to extend it to suit your needs.
  • You can use existing plugins or create your own.
  • This is what allows you to configure Vite to whatever your project needs.

Disadvantages of Vite

  1. Smaller Community:
  • Relatively new.
  • Smaller community when compared to one like webpack for example.
  • can make it harder to get support and help during development.
  1. Limited Browser Compatibility
  • Uses modern JavaScript features that are not supported by all browsers yet.
  • Some users can't use your application without updating their browser or using a polyfill.
    • A polyfill is essentially a piece of code that provides modern functionality on older browsers that do not support it natively.

How is Vite so Fast?

  • Pre-bundles using esbuild
  • Esbuild is written in GO and pre-bundles dependencies 10-100x faster than JavaScript based bundlers.
  • Vite serves code over native ESM based servers which let the browser take over part of the job of a bundler.
  • This allows dynamic imports, which essentially only processes the code behind the import if it is used on the current screen.

Use Cases

  1. Rapid Prototyping
  • Vite's fast HMR and development server make it excel at quick iteration over frontend projects during the prototyping phase.
  • Great for seeing your changes as you go.
  • Like the idea of the Live Server extension for VS code (just as an example)
  1. Frontend Framework Development
  • Well suited for developing apps with frontend frameworks and providing a smooth experience.
  • For example, using it to create a react app:
    • Rather than using create-react-app, vite will result in much faster build times and hot module replacement.
    • Mainly due to esbuild being much more performant than webpack.

References