Nowadays, in the process of project development, front-end engineers are increasingly inseparable from the build tool, it can be said that the build tool has become the standard of front-end engineering projects.

However, today’s front-end build tools are a dizzyingly diverse array, from ancient Browserify and Grunt to traditional Webpack, Rollup and Parcel to modern Esbuild and Vite.

As a result, many friends ask which build tool is better and worth learning. In fact, no matter how updated the tool level is, the core issues they address remain the same and have always been a pain point for front-end engineering. So the best way to know which tool works is to see how well it addresses front-end engineering pain points.

So what are the pain points of front-end engineering?

First and foremost are the modular requirements of the front end. As we know, there are many modules standards in the industry, including ESM, CommonJS, AMD, CMD, and so on. On the one hand, front-end engineering needs to implement these module specifications to ensure the normal loading of modules. On the other hand, different module specifications need to be compatible to adapt to different execution environments.

The second is browser compatibility, compiling advanced syntax. Because of browser implementation specifications, high-level languages/grammars (TypeScript, JSX, etc.) must be translated into a form that the browser can understand if they want to work in the browser. This all requires support at the toolchain level, and there will always be a need.

Then there is the quality of the code online. Different from the emphasis in the development stage, in the production environment, we should not only consider the security and compatibility of the code to ensure the normal operation of the online code, but also consider the performance of the code when it is running. With so many browser versions, code compatibility and security policies varying, the quality of online code will also be a persistent pain point in front-end engineering.

At the same time, development efficiency can not be ignored. We know that cold start/restart times and hot update times on projects can seriously affect development efficiency, especially as projects get larger and larger. Therefore, it is also an important requirement of front-end engineering to improve the startup speed and hot update speed of projects.

So how do front-end build tools solve these problems?

  • Modularity, provide module loading solutions, and compatible with different module specifications.

  • In the aspect of grammar translation, it can cooperate with front-end tool chains such as Sass, TSC and Babel to complete the translation function of advanced grammar. Meanwhile, static resources can also be processed, so that they can be loaded normally as a module.

  • In terms of product quality, in a production environment, code compression and obfuscation with compression tools such as Terser, removing unused code through Tree Shaking, syntax degradation for older browsers, and protection against common network attacks such as XSS attacks.

  • In terms of development efficiency, the build tool itself optimizes the performance in various ways, including the use of native language Go/Rust, no-bundle and other ideas to improve the startup performance of projects and the speed of hot update.

Why is Vite the most efficient build tool available today?

Now, let’s go back to the original question, which tool is better? Or, which tool is better at addressing front-end engineering pain points?

According to a recent Survey by The State of JavaScript Survey, Vite has over 98% satisfaction among developers worldwide and has been used in large frameworks such as SvelteKit and Astro, making it The most popular front-end build tool of The moment. I recommend you use it most. Why Vite? We can look at it in terms of the four dimensions mentioned above.

The first is development efficiency. Compared to traditional build tools, which are often too slow, Vite can increase project startup performance by an order of magnitude and achieve instant hot updates of the millisecond scale.

Taking Webpack as an example, it is common for a project to take a few minutes to launch after using Webpack, and hot updates often need to wait more than ten seconds. This is mainly because:

  • A cold start of a project must recursively package the dependency tree for the entire project
  • The performance limitation of JavaScript language itself leads to the bottleneck of building performance, which directly affects the development efficiency

As a result, the code changes are not immediately visible, and the development experience becomes worse and worse. Of these, the most time-consuming are code packaging and file compilation.

Vite solves these problems well. On the one hand, Vite implements no-bundle service based on the browser’s native ESM support during the development phase, and on the other hand, it builds third-party libraries with Esbuild’s super fast compilation speed, which effectively improves the development efficiency.

In addition to development efficiency, Vite also does well on three other dimensions.

  • On the modularity side, Vite implements module loading based on browser-native ESM support and can convert artifacts in other formats (such as CommonJS) to ESM in both development and production environments.

  • For syntax translation, Vite has built-in support for TypeScript, JSX, Sass and other advanced synthetics, as well as the ability to load a variety of static resources, such as images, workers, and so on.

  • In terms of product quality, Vite is based on the mature packaging tool Rollup to achieve production environment packaging, and can cooperate with Terser, Babel and other tool chains, which can greatly ensure the quality of built products.

Therefore, if you want to learn a front-end build tool, Vite is the best choice for you right now. It not only solves the problem of the development efficiency of traditional build tools, but also possesses the elements of an excellent build tool, and has experienced the large-scale verification and implementation of the community.

How to learn Vite well?

However, many people encounter various problems when learning and using Vite.

For example, many Vite learning materials are neither systematic nor in-depth. The vast majority of articles teach us how to build a simple scaffolding project, and even the code may not be correct.

Even though I have learned the relevant knowledge of Vite through materials, I still don’t know which plug-ins or solutions to use when I encounter practical problems because I don’t know enough about the ecology of Vite.

  • What if the CommonJS code in the third party library causes an error?
  • What if you want Eslint code specification checking and TS type checking during development?
  • How to produce build product analysis reports after the production environment packages the project?
  • What if you want to be compatible with browsers that don’t support native ESM?

Also, if you’re not familiar with the Esbuild and Rollup engines underlying Vite, you’ll often run out of money to customize scenarios.

  • Write an Esbuild plugin to handle the problem dependencies.
  • Custom unpacking of Rollup packaging products solves the problem of cyclic dependencies that often occur in real scenarios.
  • What compatibility issues arise when using Esbuild’s code translation and compression capabilities? How to solve it?

Of course, as a build tool, the difficulty of Vite is not only its flexibility, but also the integration and application of many front-end toolchains such as Babel and Core-JS.

  • @babel/preset-env 的 useBuiltInWhat are the differences between the values of attributes?
  • @babel/polyfill 与 @babel/runtime-corejsWhat’s the difference?
  • @babel/plugin-transform-runtime 与@babel/preset-env 的 useBuiltInWhat are the optimizations compared to?
  • What does core-JS do? What versions of its products are available?core-js 和 core-js-pureWhat’s the difference?

In addition, because the source code of the build tools (not only Vite, but also the underlying engine Rollup) is obscure and involves a large number of base libraries such as Acorn, ES-Module-Lexer, magic-String, etc., many people have only a superficial understanding of how the build tools work.

As a front-end engineer deep ploughing in the front line, God three yuan’s daily work is to deal with a variety of construction tools, not only in the company’s many business projects in the ground Vite, obtained rich Vite actual combat and source code reading experience, but also successfully contributed to the Vite warehouse some code. Therefore, God sanyuan is very happy to share his practical experience and learning methods in Vite with you systematically through a small volume.

So how does Vite learn? In accordance with the three principles of step by step, practicability and extensibility, he designed the content of the course from simple to profound, provided a large number of actual situations and cases, and tried to provide methods and perspectives to solve problems, so that everyone can learn from one example to another after the course. Specifically, the course is divided into five modules.

In the basic usage section, you will initialize the Vite project from 0, access various modern CSS solutions, integrate Eslint, Styelint, Commonlint and a series of Lint toolchains, handle various forms of static resources, and master various skills of using Vite precompiled. Finally, you can build a relatively complete scaffolding project independently.

The twin-engine section will cover Vite’s twin-engine architecture, Esbuild, and Rollup, including their basic usage and plug-in development, as well as the minimum necessary knowledge to pave the way for advanced applications.

The advanced application chapter will learn various advanced uses of Vite and build performance optimization means, learn how to write a complete Vite plug-in, skilled in the production environment unpacking, using Vite to build complex SSR project, achieve cross-application module sharing architecture based on module federation. You’ll get a lot of mileage out of this module, from your project performance tuning skills to your understanding of front-end and low-level standards and specifications.

Next, it will also analyze the core source code of Vite, understand the role of important concepts in source code such as JIT, Proxy Module, Module Graph, HMR Boundary and Plugin Container and the underlying implementation, and break the key links in the following architecture diagram one by one. Learn the implementation principle of Vite.

Finally, the actual writing. First of all, we’ll write the no-bundle service for Vite development, which is the browser-based native ESM Dev Server in the development environment. Then we’ll take you step by step through a production environment packaging tool (Bundler), starting with AST parsing. Tokenize and parse the code, build module dependency graph and scope chain, complete Tree Shaking, loop dependency detection and Bundle code generation, and finally realize a Rollup similar Bundler.

As you can see, there’s a lot of emphasis on hands-on practice. All the code is uploaded to the Github repository, and basically every section has code examples that can run. Especially in the last chapter, in order to let you understand the underlying principle of the build tool, will take you step by step to build a simple build tool, thousands of lines of code handwritten combat, real code can be practical.

Booklet is in the new special period, limited time 60% off ~

Only ￥29.94 to start this Vite advanced journey!

What are you waiting for? Come and join us!