11 ms·

Terrible landing page for an otherwise excellent tool. It sets up JS transpiling and bundling for you in an easy way, then provide a server with pretty fast ho

Terrible landing page for an otherwise excellent tool. It sets up JS transpiling and bundling for you in an easy way, then provide a server with pretty fast hot reload. This solves 2 problems: - the complicated js project stack is now simple to setup, unlike with webpack - saving and seeing the result of your coding is now almost instant, unlike with CRA It's a joy to use, given that it's from VueJS author, and I highly recommend it to anyone that has a lof of frontend to do.

superzamp 4y ago
Would this replace parcel or be adjacent to it?
- toastercat 4y ago
  Replace it.
- tafath 4y ago
  https://npmtrends.com/parcel-vs-vite https://npmtrends.com/parcel-vs-vite
SCLeo 4y ago
I have been using parcel for web development because I thought webpack is very difficult to use. However, for my latest personal project, I tried webpack. To my surprise, I found webpack 5 much simpler to use then I thought it is (significantly easier than make or gradle, the complexity is not even on the same level). Everything pretty much worked out of box now. All I had to do was to copy the starting template for typescript from their website (~20 lines, half of which are open/closing brackets) and copy the setup for dev server. HMR, code splitting via dynamic imports, etc. all worked without any setup.
- shepherdjerred 4y ago
  Vite is just a few lines, and it’s a much better experience than webpack
- SparkyMcUnicorn 4y ago
  Vite is incredibly fast compared to Webpack. I didn't really know how much time I could have been saving, and I never even thought of Webpack as slow.
  - kitd 4y ago
    IIRC Vite wraps esbuild, which is written in Go and very fast.
    - sebdufbeau 4y ago
      You can use esbuild with webpack via esbuild-loader, but what makes Vite so fast is mainly the strategy of pre-bundling dependencies when running the dev server, this makes hot starts and hot reloads incredibly quick.
- dmix 4y ago
  Webpack is probably fine for new or small projects. It's when you've been using it for a while, do anything complex, or worst of all your framework libraries update then you have to update Webpack which is a nightmare. Ive had Webpack break more of my deploys than any other piece of software in the last 3 years. Vite was basically a plug and play replacement (almost zero config) and I also got to drop Babel, so that meant replacing about 12 packages in my package.json and who knows how many in Yarn.lock (Mostly babel and webpack plugins) with 2 vite packages. It's much faster at builds and the chunking of small js files seemed more intelligent and better integrated with Vue.
- tpict 4y ago
  Last time I checked NPM the weekly downloads were still heavily slanted in favour of version 4. I wonder if that plays into perception of it. At work, an engineer in a different team recently recommended we switch to Vite because it’s “so much faster”. Warm builds are 700ms with our very uninteresting Webpack 5 config. It’s hard to imagine that the cost of reconfiguring our entire build would be worth it.
mrwnmonm 4y ago
So, this is not a framework like React, right?
- maigret 4y ago
  It’s more like Webpack, the software that processes your React code into JavaScript bundles that are optimized for the browser. ie puts together what belongs together, removes the unused code, provides a test server to develop and get instant refresh.
  - mrwnmonm 4y ago
    Got it, thanks
  - eproxus 4y ago
    How would one use it together with a backend that already serves the frontend code? As a compiler only?
    - arthurcolle 4y ago
      I don't think Webpack is designed for that use case, it is pretty apples and oranges
    - DangitBobby 4y ago
      If you're talking about something like Django where you would want to serve frontend JS from a static assets directory, you would have to output a build bundle into your static directory. You would not get hot reloading that way, though.
    - maigret 4y ago
      You could yes, however you’ll probably have to write your configuration from scratch. You’ll have to define the JavaScript entry files (those that call the others) and put that into your HTMLs. Depending on how many scripts etc you have this might be a lot of work, but this should optimize your JavaScript to ist what you need.
    - 4y ago
cto_official 4y ago
One question .. Is the main goal to make development process easy or does it also have an impact on production performance as well ?
- pketh 4y ago
  It’s mainly for dev rebuild performance. I also use vite and it’s a pretty nice build tool that’s relatively easy to configure and quite fast. It might also affect your production build times, but prod builds are far less frequent and performance isn’t important here
- GiorgioG 4y ago
  From https://main.vitejs.dev/guide/ https://main.vitejs.dev/guide/ "Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects." Ultimately it makes the dev process more productive because builds are generally much faster than most other build tools. https://main.vitejs.dev/guide/why.html https://main.vitejs.dev/guide/why.html might also be worth a read
- hackerbrother 4y ago
  I can attest that it is a great way to spin up (and compile for server-ready HTML/CSS/JS) a React or Vue project. Just run ‘npm init vite@latest’ and you get a basic well-organized React/Vue project ready for components and other dependencies to be dropped in. Uses esbuild+rollup behind the scenes I believe. If you have the luxury of picking your tools for a completely fresh web project this is a great way to do it.
- bobthepanda 4y ago
  Ideally, for production you're not constantly rebuilding a JS bundle but instead just building once with all the required package versions and then just serving that bundle all the time. The bundle only really needs to change if the underlying code does, but in pretty much all cases your customers/users are not actually triggering any changes in your underlying code, that's a security risk.
unsupp0rted 4y ago
> pretty fast hot reload An understatement to be sure: you can set VS Code to auto-save every 1 second and that way whatever you type instantly appears via Vite's Hot Reload in your dev browser. No waiting multiple seconds for a recompile. It's game-changing workflow (for some tasks).
- intrasight 4y ago
  Game-changer perhaps in a bad way ;) We're losing the art of writing solid code and instead flail with the "hot reload" crutch. I miss the days of punching cards and submitting a deck to be compiled and run - at least in terms of it forcing me to verify my work ahead of time. And yes - I'm (mostly) kidding. But I did write my first programs on punched cards at a university course while I was still in grade school. Probably the last generation of programmers to experience that discipline.
  - nightski 4y ago
    We are also writing far more complicated software. Punch cards didn’t have to support thousands of different devices, resolutions, screen densities, input methods, etc. It’s a totally different world.
    - crdrost 4y ago
      That's totally fair but the tooling is still not where you'd like it. In theory, there's no reason that you shouldn't be able to backtrace from the website to the filesystem. If you can do that, then your "it reloads every second" becomes even faster, it becomes WYSIWYG, you are writing in the live constantly-refreshing UI. Well, almost: your text editor has Undo and Git and your web browser doesn't. But we could build those into the browser. Heck, Redux is basically Git except without any standardized verbs, just give Redux some standardized verbs for tracking revisions in a living app and you've got everything you need. If you follow that trend to its logical conclusion ("OK I want a special way to ctrl-click or right-click or something to edit the HTML of a component I see") you eventually get Smalltalk, and we're finally back as productive as we could be in the 70s :)
and0 4y ago
Thanks for the info, will switch from CRA as soon as I can :D
toddmorey 4y ago
Credit to them for a nice "Why Vite" button backed by a very informative page. But for any homepage describing any product / project: If you solve a similar problem as a better know competitor, that's a huge advantage! Mention them explicitly and then state what makes you different. That's one of the fastest avenues to understanding anything "it's like [well known thing] but different in that it [differences here]". Perhaps just having this: Vite is a javascript bundler for web development that uses native ES modules. Projects are adopting Vite in lieu of Webpack to gain near-instant HMR and much simpler setup and configuration.

superzamp 4y ago

Would this replace parcel or be adjacent to it?

toastercat 4y ago
Replace it.
tafath 4y ago
https://npmtrends.com/parcel-vs-vite https://npmtrends.com/parcel-vs-vite

SCLeo 4y ago

I have been using parcel for web development because I thought webpack is very difficult to use. However, for my latest personal project, I tried webpack. To my surprise, I found webpack 5 much simpler to use then I thought it is (significantly easier than make or gradle, the complexity is not even on the same level). Everything pretty much worked out of box now. All I had to do was to copy the starting template for typescript from their website (~20 lines, half of which are open/closing brackets) and copy the setup for dev server. HMR, code splitting via dynamic imports, etc. all worked without any setup.

shepherdjerred 4y ago
Vite is just a few lines, and it’s a much better experience than webpack
SparkyMcUnicorn 4y ago
Vite is incredibly fast compared to Webpack. I didn't really know how much time I could have been saving, and I never even thought of Webpack as slow.
- kitd 4y ago
  IIRC Vite wraps esbuild, which is written in Go and very fast.
  - sebdufbeau 4y ago
    You can use esbuild with webpack via esbuild-loader, but what makes Vite so fast is mainly the strategy of pre-bundling dependencies when running the dev server, this makes hot starts and hot reloads incredibly quick.
dmix 4y ago
Webpack is probably fine for new or small projects. It's when you've been using it for a while, do anything complex, or worst of all your framework libraries update then you have to update Webpack which is a nightmare. Ive had Webpack break more of my deploys than any other piece of software in the last 3 years. Vite was basically a plug and play replacement (almost zero config) and I also got to drop Babel, so that meant replacing about 12 packages in my package.json and who knows how many in Yarn.lock (Mostly babel and webpack plugins) with 2 vite packages. It's much faster at builds and the chunking of small js files seemed more intelligent and better integrated with Vue.
tpict 4y ago
Last time I checked NPM the weekly downloads were still heavily slanted in favour of version 4. I wonder if that plays into perception of it. At work, an engineer in a different team recently recommended we switch to Vite because it’s “so much faster”. Warm builds are 700ms with our very uninteresting Webpack 5 config. It’s hard to imagine that the cost of reconfiguring our entire build would be worth it.

mrwnmonm 4y ago

So, this is not a framework like React, right?

maigret 4y ago
It’s more like Webpack, the software that processes your React code into JavaScript bundles that are optimized for the browser. ie puts together what belongs together, removes the unused code, provides a test server to develop and get instant refresh.
- mrwnmonm 4y ago
  Got it, thanks
- eproxus 4y ago
  How would one use it together with a backend that already serves the frontend code? As a compiler only?
  - arthurcolle 4y ago
    I don't think Webpack is designed for that use case, it is pretty apples and oranges
  - DangitBobby 4y ago
    If you're talking about something like Django where you would want to serve frontend JS from a static assets directory, you would have to output a build bundle into your static directory. You would not get hot reloading that way, though.
  - maigret 4y ago
    You could yes, however you’ll probably have to write your configuration from scratch. You’ll have to define the JavaScript entry files (those that call the others) and put that into your HTMLs. Depending on how many scripts etc you have this might be a lot of work, but this should optimize your JavaScript to ist what you need.
  - 4y ago

cto_official 4y ago

One question .. Is the main goal to make development process easy or does it also have an impact on production performance as well ?

pketh 4y ago
It’s mainly for dev rebuild performance. I also use vite and it’s a pretty nice build tool that’s relatively easy to configure and quite fast. It might also affect your production build times, but prod builds are far less frequent and performance isn’t important here
GiorgioG 4y ago
From https://main.vitejs.dev/guide/ https://main.vitejs.dev/guide/ "Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects." Ultimately it makes the dev process more productive because builds are generally much faster than most other build tools. https://main.vitejs.dev/guide/why.html https://main.vitejs.dev/guide/why.html might also be worth a read
hackerbrother 4y ago
I can attest that it is a great way to spin up (and compile for server-ready HTML/CSS/JS) a React or Vue project. Just run ‘npm init vite@latest’ and you get a basic well-organized React/Vue project ready for components and other dependencies to be dropped in. Uses esbuild+rollup behind the scenes I believe. If you have the luxury of picking your tools for a completely fresh web project this is a great way to do it.
bobthepanda 4y ago
Ideally, for production you're not constantly rebuilding a JS bundle but instead just building once with all the required package versions and then just serving that bundle all the time. The bundle only really needs to change if the underlying code does, but in pretty much all cases your customers/users are not actually triggering any changes in your underlying code, that's a security risk.

unsupp0rted 4y ago

> pretty fast hot reload An understatement to be sure: you can set VS Code to auto-save every 1 second and that way whatever you type instantly appears via Vite's Hot Reload in your dev browser. No waiting multiple seconds for a recompile. It's game-changing workflow (for some tasks).

intrasight 4y ago
Game-changer perhaps in a bad way ;) We're losing the art of writing solid code and instead flail with the "hot reload" crutch. I miss the days of punching cards and submitting a deck to be compiled and run - at least in terms of it forcing me to verify my work ahead of time. And yes - I'm (mostly) kidding. But I did write my first programs on punched cards at a university course while I was still in grade school. Probably the last generation of programmers to experience that discipline.
- nightski 4y ago
  We are also writing far more complicated software. Punch cards didn’t have to support thousands of different devices, resolutions, screen densities, input methods, etc. It’s a totally different world.
  - crdrost 4y ago
    That's totally fair but the tooling is still not where you'd like it. In theory, there's no reason that you shouldn't be able to backtrace from the website to the filesystem. If you can do that, then your "it reloads every second" becomes even faster, it becomes WYSIWYG, you are writing in the live constantly-refreshing UI. Well, almost: your text editor has Undo and Git and your web browser doesn't. But we could build those into the browser. Heck, Redux is basically Git except without any standardized verbs, just give Redux some standardized verbs for tracking revisions in a living app and you've got everything you need. If you follow that trend to its logical conclusion ("OK I want a special way to ctrl-click or right-click or something to edit the HTML of a component I see") you eventually get Smalltalk, and we're finally back as productive as we could be in the 70s :)

and0 4y ago

Thanks for the info, will switch from CRA as soon as I can :D

toddmorey 4y ago

Credit to them for a nice "Why Vite" button backed by a very informative page. But for any homepage describing any product / project: If you solve a similar problem as a better know competitor, that's a huge advantage! Mention them explicitly and then state what makes you different. That's one of the fastest avenues to understanding anything "it's like [well known thing] but different in that it [differences here]". Perhaps just having this: Vite is a javascript bundler for web development that uses native ES modules. Projects are adopting Vite in lieu of Webpack to gain near-instant HMR and much simpler setup and configuration.