• The New King of Bundlers Is Here: All Bow Before Vitejs
  • Fernando Doglio
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: zenblo
  • Proofreader: Badd, 5Reasons

The new front-end construction tool Vitejs is developed and used

When I first started programming, JavaScript was used to add interactive effects to websites. Do you remember how to add mouse drag effects? Or how to change the color of links while hovering over them?

Of course, Web development has come a long way over the years, and today the use of JavaScript in Web applications is growing exponentially. Because of this, JavaScript’s increasingly cumbersome dependency packages are becoming a bottleneck.

The volume of dependencies in some applications has already affected how long users wait before using the application (they cannot use the application until the dependencies are downloaded), and the build process itself has increased development time (sometimes changing a line of code can trigger a compilation process that takes several minutes). While there are some technologies that can help with this, not all of them can be exterminated, and exterminators often take a lot of effort to do so. As a user of these build tools, you may not care about the implementation techniques, but if you are a developer of the build tools, it can be a pain to maintain.

That’s why today I want to introduce you to a tool that solves all of these problems: ViteJS.

Why is ViteJS so good

Obviously, this is the first question you should ask yourself.

There are plenty of build tools out there, do you need another one? Yes, you do.

ViteJS is more than just a build tool. In fact, ViteJS aims to be the go-to tool for building any javascript-based project. It changes the way the usual build tools deal with dependencies, using the ES module to package the build directly and letting the browser do some of the work.

It also makes extensive use of HTTP to cache code that does not change. So instead of having a giant dependency file and sending all the code to the client, it’s up to the client to decide which code to keep and which code to refresh more often (more on that below).

ViteJS features you may want to notice:

  • It was built with processing timeliness in mind. The little dependencies and transcoding that ViteJS does is done using esbuild, which is built in Go. This in turn provides a faster experience (10 to 20 times faster than any javascript-based build tool, according to them).
  • Compatible with TypeScript. Although it doesn’t perform type checking, usually your IDE will handle this, and you can even add a quick single line of code to your build script to do it for you (quicktsc --noEmit).
  • It supports hot module replacement (HMR). ViteJS provides an API that can be used by any ESM-compliant framework.
  • Improved code splitting techniques. ViteJS implements some improvements to the browser’s normal chunking process. This ensures that if there is an opportunity to load several blocks in parallel, they will be loaded this way.

In fact, ViteJS continues to add features, so be sure to check out the ViteJS website for more details.

ViteJS built-in plug-in system

One of ViteJS ‘main advantages is that it has a plug-in system built in, which means the community can (and has) added additional functionality and plug-ins to other frameworks like React and Vue.

Vue projects use ViteJS

The list of plug-ins for Vue is quite extensive, the only thing to note is that they are not all compatible with the same version of the framework (some are for Vue 2, some are for Vue 3 only, and some are for both).

To make your Vue App easy to use, you can use a plugin, such as Vitesse, that you can simply clone and rename. It comes preloaded with a variety of built-in features and plug-ins, such as:

  • WindiCSS as UI framework and WindiCSS typography.
  • Iconify allows you to use ICONS from multiple icon libraries on the web.
  • ViteJS Vue I18N plug-in, added internationalization support.
  • VS Code Extension series(For example, Vitedev server,i18n ally,WindiCSS,Iconify IntellisenseIf you’re a VS Code user, this is a great option.

For more built-in features, be sure to check out Repo.

If you just want to build your own application from scratch, you can also simply use ViteJS CLI tools.

# If you are using NPM 7
$ npm init @vitejs/app my-vue-app -- --template vue 

# If you are using NPM 6
$ npm init @vitejs/app my-vue-app --template vue

# If you are a developer who prefers to use YARN
$ yarn create @vitejs/app my-vue-app --template vue
Copy the code

Any of the above commands will produce the same output:

It’s really fast (less than a second), and after following these extra three steps, your Vue application is up and running.

The React project uses ViteJS

You’re not a Vue developer? No problem. Vite can take care of it for you.

Just use the same command line as before and use React or React-TS instead of vue.

$ npm init @vitejs/app my-react-app --template react-ts
$ cd my-react-app
$ npm install
$ npm run dev
Copy the code

The command line above prints the same React application using TypeScript.

Do you want more presets? There are two plugins available for your needs:

  1. If you are looking for a project with TypeScript, Chakra, and Cypress, you can use this plugin.
  2. If you don’t want to use Chakra and want to create a Electron app instead, you can use this plug-in, which also includes TailwindCSS.

Both options work with TypeScript, and if you’re familiar with these combinations, I recommend using them instead of starting from scratch. Keep in mind that the default startup project is perfectly fine, but you can get some of the template Settings done with these plugins.

About other build tools

ViteJS isn’t the first tool to try this, and it’s definitely not the best known. But it was created because the current mainstream tools don’t address performance issues with the latest trends in the industry. They are also trying to solve problems that should not exist given today’s state-of-the-art technology.

The main difference between ViteJS and other build tools, such as Webpack, is that the latter will try to compile and optimize your packaged code through your dependency tree to make your code more accessible to any browser. Pay attention to any word here, as this will be a major problem for ViteJS. However, this process takes time, and if you’ve been using these sophisticated build tools, you probably know what I mean. It takes a while, but the end result is good for any browser.

On the other hand, we have ViteJS, which, as I already mentioned, takes advantage of the browser’s ES module support. This means that the browser handles the import and export and requests them separately. This means you can get your app up and running in a fraction of the time, but it also means that only a new browser will work with your app.

As you can see from the MDN table below, modern browsers have good support for imports, but older versions never did.

There’s still work to be done on compatibility, so if you’re considering using ViteJS for your next project, make sure your target audience tends to update their browsers regularly.

ViteJS has the potential to upend current industry standards when it comes to relying on tools. It has the technology, it has the plugin ecosystem, it has the required functionality. The only thing holding it back from the de facto build tool crown is its compatibility with older browsers.

Obviously, browser compatibility is still an issue today, but it’s an issue for a smaller and smaller segment of our industry, so keep an eye out for ViteJS as it becomes more popular with newer browsers.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.