Skip to content
← back to home

Vite in 100 Seconds

Fireship

youtube· 2:27standard

1.Vite: A JavaScript Build Tool

0:00 / 0:26

This chapter introduces Vite as a JavaScript build tool that simplifies front-end web application development. It highlights Vite's core functions: serving code locally during development and bundling assets for production, contrasting it with tools like Webpack and explaining its origin by Evan You.

  • Vite
  • JavaScript build tool
  • Webpack
  • Evan You

What's inside this course

  1. 0:00

    1. Vite: A JavaScript Build Tool

    This chapter introduces Vite as a JavaScript build tool that simplifies front-end web application development. It highlights Vite's core functions: serving code locally during development and bundling assets for production, contrasting it with tools like Webpack and explaining its origin by Evan You.

  2. 0:26

    2. Leveraging Native ES Modules

    This chapter explains how Vite leverages native ES Modules in the browser to achieve instant code loading, regardless of application size. It discusses the historical context of JavaScript module bundling, the introduction of ECMAScript modules, and how Vite uses them to provide a fast development experience with features like Hot Module Replacement.

  3. 1:41

    3. Getting Started and Development Workflow

    This chapter demonstrates how to get started with Vite using `npm init vite` and choose a front-end framework. It covers the `vite.config` file, Vite's plugin ecosystem, and how to run the development server with `npm run dev`. It also illustrates how Vite serves actual source code and uses esbuild for faster TypeScript transpilation, maintaining application state during development.

Every chapter ends with a checkpoint (quiz, flashcards, retell, diagram, or prediction) and the course closes with a final boss-fight. More courses →

Full transcript of “Vite in 100 Seconds”

— 77 segments
0:00veet a javascript build tool that
0:02simplifies the way we build and develop
0:05front-end web applications at its core
0:07it does two things one serve your code
0:09locally during development and two
0:11bundle your javascript css and other
0:13assets together for production there are
0:15many other tools out there that do the
0:16same thing like webpack so what makes
0:18vee different well it was created by
0:20evan yu who also created vue.js as a way
0:23to both simplify and speed up the build
0:25process not long ago web developers had
0:27no native way to combine javascript
0:29files together in a modular way this led
0:31to tools like webpack and rollup that
0:33concatenate multiple files together into
0:35a single bundle for the browser the
0:37problem is that this process becomes
0:39increasingly slow as the app adds more
0:41code and dependencies in 2015 ecmascript
0:44modules were introduced and by 2020 had
0:46wide browser support allowing developers
0:48to import and export code from different
0:50files in the browser veed leverages
0:52native es modules in the browser to load
0:54your code instantly no matter how large
0:56the app is it also supports hot module
0:58replacement for an extremely fast
1:00feedback loop during development when
1:02building for production it uses roll up
1:04under the hood so you don't have to
1:05worry about configuring it it's an
1:06opinionated tool that provides
1:08conventions that work out of the box for
1:09the majority of developers to get
1:11started run npm netweat from the command
1:13line and choose a starter project with
1:15your favorite front-end framework you'll
1:16notice the project comes with a v-config
1:18file it has a plug-in ecosystem that can
1:21extend it with additional features and
1:22you can also manually override the
1:24roll-up defaults when necessary and
1:26there are some really cool plugins out
1:27there like vtssr that can do server-side
1:30rendering like next.js now to serve the
1:32application locally run npm run dev even
1:34if i install a bunch of big dependencies
1:36like low dash and moment the time to run
1:38the dev server does not change now if
1:40you open the network tab in the browser
1:41dev tools you'll notice that instead of
1:43importing a single javascript bundle
1:45file it's importing our actual source
1:47code like a raw tsx file in this case it
1:49also makes typescript about 20 to 30
1:51times faster because it skips type
1:53checking and uses es build to transpile
1:55your code now as you're developing your
1:57app you might change the state of it in
1:58the ui then realize that some of the
2:00code needs to change when you modify the
2:02source code the changes will be
2:03reflected instantly without losing the
2:05state of the application that's what we
2:06call hot module replacement now run npm
2:09build to build the app for production
2:11this will generate a javascript bundle
2:13with rollup with a bunch of automatic
2:15optimizations like automatic code
2:17splitting for any dynamic imports and
2:19css this has been beat in 100 seconds if
2:22you want to see more short videos like
2:23this hit the like button and subscribe
2:25thanks for watching and i will see you
2:27in the next one