Vite is a JavaScript build tool that makes it faster and easier to build web applications. It's similar to tools like Webpack, but relies on modern browser features like ES Modules to simplify and speed-up the build process. 

#javascript #webdev #100SecondsOfCode

🔗 Resources

Vite Docs https://vitejs.dev
Vite SSR Plugin https://vite-plugin-ssr.com
Learn more about JS Bundlers https://youtu.be/5IG4UmULyoA

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- What is Vite.js?
- Vite vs Webpack
- Who created Vite?
- How does Vite work?
- Module Bundlers in JavaScript
2024-02-04T05:33:18.701Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
d192882c-9cb2-4276-afff-e24897311db1
8d8fb3612853e72ed466a1fbb94477234f21cc24319a174f4b1c7114807b927c
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Vite, a JavaScript build tool that simplifies the way we build and develop front end web applications.
At its core, it does 2 things.
1, serve your code locally during development, and 2, bundle your JavaScript, CSS, and other assets together for production.
There are many other tools out there that do the same thing like webpack.
So what makes Vite different?
Well, it was created by Evan Yu, who also created Vue.
Js, as a way to both simplify and beat up the build process.
Not long ago, web developers had no native way to combine JavaScript files together in a modular way.
This led to tools like webpack and rollup that concatenate multiple files together into a single bundle for the browser.
The problem is that this process becomes increasingly Flow, as the app adds more code and dependencies.
In 2015, ECMAScript modules were introduced, and by 2020, had wide browser support, allowing developers to import port and export code from different files in the browser.
Vite leverages native ES modules in the browser to load your code instantly no matter how large the app is.
It also supports hot module replacement for an extremely fast feedback loop during development.
When building for production, it uses roll up under the hood, so you don't have to worry about configuring It's an opinionated tool that provides conventions that work out of the box for the majority of developers.
To get started, run npm init vite from the command line and choose a starter project with your favorite front end framework.
You'll notice the project comes with a vconfig file.
It has a plugin ecosystem That can extend it with additional features, and you can also manually override the roll up defaults when necessary.
And there are some really cool plugins out there like Vite SSR that can do server side rendering like Next.
Js.
Now to serve the application locally, run npm run dev.
Even if I install a bunch of big dependencies like Lodash and Moment, the time to run the dev server does not change.
Now if you open the network tab in the browser dev tools, you'll notice that instead of importing a single JavaScript bundle file, it's importing our actual source code, like a raw TSX file in this case.
It also makes TypeScript about 20 to 30 times faster because it skips type checking and uses esbuild to transpile your code.
Now Now as you're developing your app, you might change the state of it in the UI, then realize that some of the code needs to change.
When you modify the source code, the changes will be reflected instantly without losing that state of the application.
That's what we call hot module replacement.
Now run npm build to build the app for production.
This will generate a JavaScript bundle with rollup with a bunch of automatic optimizations, like automatic code splitting for any dynamic imports and CSS.
This has been beat in 100 seconds.
If you wanna see more short videos like this, hit the like button and subscribe.
Thanks for watching and I will see you in the next one.

Speaker 0: Vite, a JavaScript build tool that simplifies the way we build and develop front end web applications. At its core, it does 2 things. 1, serve your code locally during development, and 2, bundle your JavaScript, CSS, and other assets together for production. There are many other tools out there that do the same thing like webpack. So what makes Vite different?

Well, it was created by Evan Yu, who also created Vue. Js, as a way to both simplify and beat up the build process. Not long ago, web developers had no native way to combine JavaScript files together in a modular way. This led to tools like webpack and rollup that concatenate multiple files together into a single bundle for the browser. The problem is that this process becomes increasingly Flow, as the app adds more code and dependencies.

In 2015, ECMAScript modules were introduced, and by 2020, had wide browser support, allowing developers to import port and export code from different files in the browser. Vite leverages native ES modules in the browser to load your code instantly no matter how large the app is. It also supports hot module replacement for an extremely fast feedback loop during development. When building for production, it uses roll up under the hood, so you don't have to worry about configuring It's an opinionated tool that provides conventions that work out of the box for the majority of developers. To get started, run npm init vite from the command line and choose a starter project with your favorite front end framework.

You'll notice the project comes with a vconfig file. It has a plugin ecosystem That can extend it with additional features, and you can also manually override the roll up defaults when necessary. And there are some really cool plugins out there like Vite SSR that can do server side rendering like Next. Js. Now to serve the application locally, run npm run dev.

Even if I install a bunch of big dependencies like Lodash and Moment, the time to run the dev server does not change. Now if you open the network tab in the browser dev tools, you'll notice that instead of importing a single JavaScript bundle file, it's importing our actual source code, like a raw TSX file in this case. It also makes TypeScript about 20 to 30 times faster because it skips type checking and uses esbuild to transpile your code. Now Now as you're developing your app, you might change the state of it in the UI, then realize that some of the code needs to change. When you modify the source code, the changes will be reflected instantly without losing that state of the application.

That's what we call hot module replacement. Now run npm build to build the app for production. This will generate a JavaScript bundle with rollup with a bunch of automatic optimizations, like automatic code splitting for any dynamic imports and CSS. This has been beat in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe.

Thanks for watching and I will see you in the next one.
Vite, a JavaScript build tool that simplifies the way we build and develop front end web applications. At its core, it does 2 things. 1, serve your code locally during development, and 2, bundle your JavaScript, CSS, and other assets together for production. There are many other tools out there that do the same thing like webpack. So what makes Vite different? Well, it was created by Evan Yu, who also created Vue. Js, as a way to both simplify and beat up the build process. Not long ago, web developers had no native way to combine JavaScript files together in a modular way. This led to tools like webpack and rollup that concatenate multiple files together into a single bundle for the browser. The problem is that this process becomes increasingly Flow, as the app adds more code and dependencies. In 2015, ECMAScript modules were introduced, and by 2020, had wide browser support, allowing developers to import port and export code from different files in the browser. Vite leverages native ES modules in the browser to load your code instantly no matter how large the app is. It also supports hot module replacement for an extremely fast feedback loop during development.
When building for production, it uses roll up under the hood, so you don't have to worry about configuring It's an opinionated tool that provides conventions that work out of the box for the majority of developers. To get started, run npm init vite from the command line and choose a starter project with your favorite front end framework. You'll notice the project comes with a vconfig file. It has a plugin ecosystem That can extend it with additional features, and you can also manually override the roll up defaults when necessary.
software development
software
And there are some really cool plugins out there like Vite SSR that can do server side rendering like Next. Js. Now to serve the application locally, run npm run dev. Even if I install a bunch of big dependencies like Lodash and Moment, the time to run the dev server does not change. Now if you open the network tab in the browser dev tools, you'll notice that instead of importing a single JavaScript bundle file, it's importing our actual source code, like a raw TSX file in this case.
It also makes TypeScript about 20 to 30 times faster because it skips type checking and uses esbuild to transpile your code. Now Now as you're developing your app, you might change the state of it in the UI, then realize that some of the code needs to change. When you modify the source code, the changes will be reflected instantly without losing that state of the application. That's what we call hot module replacement. Now run npm build to build the app for production. This will generate a JavaScript bundle with rollup with a bunch of automatic optimizations, like automatic code splitting for any dynamic imports and CSS. This has been beat in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. Thanks for watching and I will see you in the next one.
youtube
programming
software development
software
Vite, a JavaScript build tool that simplifies the way we build and develop front end web applications. At its core, it does 2 things. 1, serve your code locally during development, and 2, bundle your JavaScript, CSS, and other assets together for production. There are many other tools out there that do the same thing like webpack. So what makes Vite different? Well, it was created by Evan Yu, who also created Vue. Js, as a way to both simplify and beat up the build process. Not long ago, web developers had no native way to combine JavaScript files together in a modular way. This led to tools like webpack and rollup that concatenate multiple files together into a single bundle for the browser. The problem is that this process becomes increasingly Flow, as the app adds more code and dependencies. In 2015, ECMAScript modules were introduced, and by 2020, had wide browser support, allowing developers to import port and export code from different files in the browser. Vite leverages native ES modules in the browser to load your code instantly no matter how large the app is. It also supports hot module replacement for an extremely fast feedback loop during development. When building for production, it uses roll up under the hood, so you don't have to worry about configuring It's an opinionated tool that provides conventions that work out of the box for the majority of developers. To get started, run npm init vite from the command line and choose a starter project with your favorite front end framework. You'll notice the project comes with a vconfig file. It has a plugin ecosystem That can extend it with additional features, and you can also manually override the roll up defaults when necessary. And there are some really cool plugins out there like Vite SSR that can do server side rendering like Next. Js. Now to serve the application locally, run npm run dev. Even if I install a bunch of big dependencies like Lodash and Moment, the time to run the dev server does not change. Now if you open the network tab in the browser dev tools, you'll notice that instead of importing a single JavaScript bundle file, it's importing our actual source code, like a raw TSX file in this case. It also makes TypeScript about 20 to 30 times faster because it skips type checking and uses esbuild to transpile your code. Now Now as you're developing your app, you might change the state of it in the UI, then realize that some of the code needs to change. When you modify the source code, the changes will be reflected instantly without losing that state of the application. That's what we call hot module replacement. Now run npm build to build the app for production. This will generate a JavaScript bundle with rollup with a bunch of automatic optimizations, like automatic code splitting for any dynamic imports and CSS. This has been beat in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. Thanks for watching and I will see you in the next one.
Vite,
vite
a
a
JavaScript
javascript
build
build
tool
tool
that
that
simplifies
simplifies
the
the
way
way
we
we
build
build
and
and
develop
develop
front
front
end
end
web
web
applications.
applications
At
at
its
its
core,
core
it
it
does
does
2
2
things.
things
1,
1
serve
serve
your
your
code
code
locally
locally
during
during
development,
development
and
and
2,
2
bundle
bundle
your
your
JavaScript,
javascript
CSS,
css
and
and
other
other
assets
assets
together
together
for
for
production.
production
There
there
are
are
many
many
other
other
tools
tools
out
out
there
there
that
that
do
do
the
the
same
same
thing
thing
like
like
webpack.
webpack
So
so
what
what
makes
makes
Vite
vite
different?
different
Well,
well
it
it
was
was
created
created
by
by
Evan
evan
Yu,
yu
who
who
also
also
created
created
Vue.
vue
Js,
js
as
as
a
a
way
way
to
to
both
both
simplify
simplify
and
and
beat
beat
up
up
the
the
build
build
process.
process
Not
not
long
long
ago,
ago
web
web
developers
developers
had
had
no
no
native
native
way
way
to
to
combine
combine
JavaScript
javascript
files
files
together
together
in
in
a
a
modular
modular
way.
way
This
this
led
led
to
to
tools
tools
like
like
webpack
webpack
and
and
rollup
rollup
that
that
concatenate
concatenate
multiple
multiple
files
files
together
together
into
into
a
a
single
single
bundle
bundle
for
for
the
the
browser.
browser
The
the
problem
problem
is
is
that
that
this
this
process
process
becomes
becomes
increasingly
increasingly
Flow,
flow
as
as
the
the
app
app
adds
adds
more
more
code
code
and
and
dependencies.
dependencies
In
in
2015,
2015
ECMAScript
ecmascript
modules
modules
were
were
introduced,
introduced
and
and
by
by
2020,
2020
had
had
wide
wide
browser
browser
support,
support
allowing
allowing
developers
developers
to
to
import
import
port
port
and
and
export
export
code
code
from
from
different
different
files
files
in
in
the
the
browser.
browser
Vite
vite
leverages
leverages
native
native
ES
es
modules
modules
in
in
the
the
browser
browser
to
to
load
load
your
your
code
code
instantly
instantly
no
no
matter
matter
how
how
large
large
the
the
app
app
is.
is
It
it
also
also
supports
supports
hot
hot
module
module
replacement
replacement
for
for
an
an
extremely
extremely
fast
fast
feedback
feedback
loop
loop
during
during
development.
development
When
when
building
building
for
for
production,
production
it
it
uses
uses
roll
roll
up
up
under
under
the
the
hood,
hood
so
so
you
you
don't
don't
have
have
to
to
worry
worry
about
about
configuring
configuring
It's
it's
an
an
opinionated
opinionated
tool
tool
that
that
provides
provides
conventions
conventions
that
that
work
work
out
out
of
of
the
the
box
box
for
for
the
the
majority
majority
of
of
developers.
developers
To
to
get
get
started,
started
run
run
npm
npm
init
init
vite
vite
from
from
the
the
command
command
line
line
and
and
choose
choose
a
a
starter
starter
project
project
with
with
your
your
favorite
favorite
front
front
end
end
framework.
framework
You'll
you'll
notice
notice
the
the
project
project
comes
comes
with
with
a
a
vconfig
vconfig
file.
file
It
it
has
has
a
a
plugin
plugin
ecosystem
ecosystem
That
that
can
can
extend
extend
it
it
with
with
additional
additional
features,
features
and
and
you
you
can
can
also
also
manually
manually
override
override
the
the
roll
roll
up
up
defaults
defaults
when
when
necessary.
necessary
And
and
there
there
are
are
some
some
really
really
cool
cool
plugins
plugins
out
out
there
there
like
like
Vite
vite
SSR
ssr
that
that
can
can
do
do
server
server
side
side
rendering
rendering
like
like
Next.
next
Js.
js
Now
now
to
to
serve
serve
the
the
application
application
locally,
locally
run
run
npm
npm
run
run
dev.
dev
Even
even
if
if
I
i
install
install
a
a
bunch
bunch
of
of
big
big
dependencies
dependencies
like
like
Lodash
lodash
and
and
Moment,
moment
the
the
time
time
to
to
run
run
the
the
dev
dev
server
server
does
does
not
not
change.
change
Now
now
if
if
you
you
open
open
the
the
network
network
tab
tab
in
in
the
the
browser
browser
dev
dev
tools,
tools
you'll
you'll
notice
notice
that
that
instead
instead
of
of
importing
importing
a
a
single
single
JavaScript
javascript
bundle
bundle
file,
file
it's
it's
importing
importing
our
our
actual
actual
source
source
code,
code
like
like
a
a
raw
raw
TSX
tsx
file
file
in
in
this
this
case.
case
It
it
also
also
makes
makes
TypeScript
typescript
about
about
20
20
to
to
30
30
times
times
faster
faster
because
because
it
it
skips
skips
type
type
checking
checking
and
and
uses
uses
esbuild
esbuild
to
to
transpile
transpile
your
your
code.
code
Now
now
Now
now
as
as
you're
you're
developing
developing
your
your
app,
app
you
you
might
might
change
change
the
the
state
state
of
of
it
it
in
in
the
the
UI,
ui
then
then
realize
realize
that
that
some
some
of
of
the
the
code
code
needs
needs
to
to
change.
change
When
when
you
you
modify
modify
the
the
source
source
code,
code
the
the
changes
changes
will
will
be
be
reflected
reflected
instantly
instantly
without
without
losing
losing
that
that
state
state
of
of
the
the
application.
application
That's
that's
what
what
we
we
call
call
hot
hot
module
module
replacement.
replacement
Now
now
run
run
npm
npm
build
build
to
to
build
build
the
the
app
app
for
for
production.
production
This
this
will
will
generate
generate
a
a
JavaScript
javascript
bundle
bundle
with
with
rollup
rollup
with
with
a
a
bunch
bunch
of
of
automatic
automatic
optimizations,
optimizations
like
like
automatic
automatic
code
code
splitting
splitting
for
for
any
any
dynamic
dynamic
imports
imports
and
and
CSS.
css
This
this
has
has
been
been
beat
beat
in
in
100
100
seconds.
seconds
If
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this,
this
hit
hit
the
the
like
like
button
button
and
and
subscribe.
subscribe
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
In this video, the speaker explains the benefits of Vite, a JavaScript build tool that simplifies the development process for front end web applications. Vite leverages native ES modules in the browser to load code instantly, supports hot module replacement for quick feedback loop during development, and can be customized with a v tack file. The tool also allows developers to import and export code from multiple files in the browser, and is an opinionated tool that provides conventions that work out of the box for most developers.
Vite in 100 Seconds
Vite, a JavaScript build tool that simplifies the way we build and develop front end web applications. At its core, it does 2 things. 1, serve your code locally during development, and 2, bundle your JavaScript, CSS, and other assets together for production. There are many other tools out there that do the same thing like webpack. So what makes Vite different? Well, it was created by Evan Yu, who also created Vue. Js, as a way to both simplify and beat up the build process. Not long ago, web developers had no native way to combine JavaScript files together in a modular way. This led to tools like webpack and rollup that concatenate multiple files together into a single bundle for the browser. The problem is that this process becomes increasingly Flow, as the app adds more code and dependencies. In 2015, ECMAScript modules were introduced, and by 2020, had wide browser support, allowing developers to import port and export code from different files in the browser. Vite leverages native ES modules in the browser to load your code instantly no matter how large the app is. It also supports hot module replacement for an extremely fast feedback loop during development. When building for production, it uses roll up under the hood, so you don't have to worry about configuring It's an opinionated tool that provides conventions that work out of the box for the majority of developers. To get started, run npm init vite from the command line and choose a starter project with your favorite front end framework. You'll notice the project comes with a vconfig file. It has a plugin ecosystem That can extend it with additional features, and you can also manually override the roll up defaults when necessary. And there are some really cool plugins out there like Vite SSR that can do server side rendering like Next. Js. Now to serve the application locally, run npm run dev. Even if I install a bunch of big dependencies like Lodash and Moment, the time to run the dev server does not change. Now if you open the network tab in the browser dev tools, you'll notice that instead of importing a single JavaScript bundle file, it's importing our actual source code, like a raw TSX file in this case. It also makes TypeScript about 20 to 30 times faster because it skips type checking and uses esbuild to transpile your code. Now Now as you're developing your app, you might change the state of it in the UI, then realize that some of the code needs to change. When you modify the source code, the changes will be reflected instantly without losing that state of the application. That's what we call hot module replacement. Now run npm build to build the app for production. This will generate a JavaScript bundle with rollup with a bunch of automatic optimizations, like automatic code splitting for any dynamic imports and CSS. This has been beat in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. Thanks for watching and I will see you in the next one.
In this video, the speaker explains the benefits of Vite, a JavaScript build tool that simplifies the development process for front end web applications. Vite leverages native ES modules in the browser to load code instantly, supports hot module replacement for quick feedback loop during development, and can be customized with a v tack file. The tool also allows developers to import and export code from multiple files in the browser, and is an opinionated tool that provides conventions that work out of the box for most developers.