The preface

Last week (February 18, 2019), You released Vite 2.0. Follow you big dynamic children’s shoes should know, since 2021, you big value Vite. Daily more frequent commit – Commit details

If the Vite is the 2021 za front end of the circle of the new top flow small fresh meat really a little too much!

The unknown XDM may be wondering, what on earth is this thing for?

In a word:

Vite is a new front-end build tool that runs servers ten to 100 times faster than the Vue CLI.

As we all know, in Vue CLI project, each NPM run dev or NPM run build can take tens of seconds or even tens of seconds or even several minutes, which makes people feel a little blue and thin. Vite is here to solve this pain point. Higher, faster and stronger is our eternal pursuit, in all fields.

So how does it work?

In a word:

Vite leverages the browser’s native ES module support and tools compiled into native language development, such as ESbuild, to provide a fast and modern development experience.

In plain English, Vite doesn’t need to package code like Webpack. It just intercepts ES imports from the browser and handles them accordingly, making it truly on-demand. Here are two images from the official website to compare the differences.

This article will explore a little: Vite VS Vue CLI, will kangkang replace our OG big brother?

Vue CLI

The Vue CLI is our strongest scaffolding for building a Vue project, as it comes with Webpack and other best project practice configurations.

Include:

  • The project structure
  • A development server that supports hot updates
  • Plug-in system
  • Interface support

It can also be understood that the Vue CLI server’s build capabilities and performance are a superset of Webpack.

Vite

Like Vue CLI, Vite is a build tool that provides a basic project framework and development server.

However, Vite is not Webpack-based. Vite has its own development server that leverages native ES modules in the browser. This architecture is orders of magnitude faster than Webpack’s development server. In a production environment, Vite builds using Rollup, which is also faster.

For now, Vite’s goal is not to be a versatile build tool like Vue CLI, but to focus on providing a fast development server and basic build services.

Fast break not only

The Vite server is more than ten times faster than the Webpack server that comes with the Vue CLI, as shown in the figure above.

Full video at Vite and VitePress – Evan You

In larger projects, the difference will be even more pronounced. Webpack development server build and re-build speeds can be up to 25-30 seconds or longer. But for the same project, the Vite development server might build the project at a constant speed of around 250ms.

Package or not

Webpack works by packaging each import and require in the handler into a different bundle.

If one of the dependencies changes, building again requires repackaging the entire dependency. The number of dependencies is linearly related to the time it takes to build.

Vite no longer packs. It relies on native browser support for JavaScript templates (also known as ES modules, which is a relatively new feature).

Screenshot from MDN & basic-modules Github Demo

insufficient

We already know that Vite is fast, but it has some drawbacks:

  • Browser compatibility issues;

  • Not all CommonJS modules are supported;
  • It’s early in the iteration and features are still changing;
  • Project construction does not include Vuex, VueRouter and other tools;

So, do you need it or not? And how to use it? It’s still a matter of opinion. If you’re fed up with the speed at which Webpack builds, or if you’re a can-do guy, bengua says, why not?

summary

To sum up, at present this Vite little fresh meat can not replace our OG big brother Vue CLI.

This article does not carry on the practice contrast, only carries on a cognition from the metaphysical. But we’ve also seen Vite shine in its own right. Maybe one day, the Vue CLI will be compatible with it as a configuration item. Perhaps Webpack6 will also support taking advantage of the browser’s ES features. Maybe Vite will completely overturn Webpack (based on the popularity of Http2)……

Why not?

Writing is not easy, like to encourage. Discuss the message, hand in hand forward. ★,°:.☆(￣▽￣)/$:.°★.

[Carmelo Anthony of the Nuggets]

reference

  • Vite official document
  • has-vite-made-vue-cli-obsolete
  • JavaScript modules module