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