At present, in the process of project development, front-end engineers are increasingly inseparable from construction tools. It can be said that construction tools have become the standard configuration of front-end engineering projects.
However, today's front-end construction tools can be described 乱花渐欲迷人眼as ancient times browserify, grunt, traditional Webpack, Rollup, Parcel, and modern Esbuild, Viteetc. Not only are there many types, but they are also updated quickly.
Therefore, many friends will ask me which build tool is better to use and worth learning. In fact, no matter how the tool level is updated, the core problem they solve, that is, the pain point of front-end engineering remains unchanged . Therefore, if you want to know which tool is better to use, it depends on its effect on solving the pain points of front-end engineering.
So, what are the pain points of front-end engineering?
The first is the modular requirements of the front end . We know that there are many module standards in the industry, including ESM, CommonJS, AMD, and CMD. On the one hand, front-end engineering needs to implement these module specifications to ensure that the modules are loaded normally. On the other hand, it needs to be compatible with different module specifications to adapt to different execution environments.
The second is to be compatible with browsers and compile advanced syntax . Due to the limitations of the browser's implementation specification, as long as the high-level language/syntax (TypeScript, JSX, etc.) wants to run normally in the browser, it must be converted into a form that the browser can understand. All of this requires support at the toolchain level, and this demand will always exist.
Another is the quality of the online code . Different from the focus of consideration in the development stage, in the production environment, we not only need to consider code 安全性problems 兼容性and ensure the normal operation of online code, but also need to consider the performance of the code when it is running. Due to the many versions of browsers, code compatibility and security policies are different, the quality of online code will also be a long-standing pain point in front-end engineering.
At the same time, 开发效率it cannot be ignored. We know that the cold start/second start time and hot update time of the project may seriously affect the development efficiency, especially when the project becomes larger and larger. Therefore, improving the startup speed and hot update speed of the project is also an important requirement for front-end engineering.
So, how does the front-end build tool solve the above problems?
- In terms of modularity, it provides a module loading scheme and is compatible with different module specifications.
- In terms of grammar translation, cooperate with front-end tool chains such as
Sass,TSC, ,Babeletc. to complete the translation function of advanced grammar, and at the same time process static resources so that they can be loaded normally as a module. - In terms of product quality, in the production environment, it cooperates with
Terserother compression tools to compress and obfuscate code,Tree Shakingdelete unused code, provide syntax downgrade processing for low-version browsers, and so on. - In terms of development efficiency, the build tool itself optimizes performance in various ways, including
使用原生语言 Go/Rust,no-bundleand so on, to improve project startup performance and hot update speed.
Why Vite is currently the most efficient build tool?
Now, let's go back to the question we asked at the beginning, which tool is better to use? In other words, which tool is better at solving the pain points of front-end engineering?
According to the recent survey results of The State of JavaScript Survey, Vite has a satisfaction rate of more than 98% among developers around the world, and has been used SvelteKitin Astrothese large frameworks, becoming the most popular front-end construction tool at present. I also most recommend you to use it. Why Vite? We can examine it according to the four dimensions mentioned above.
The first is development efficiency. The general disadvantage of traditional build tools is that they are too slow. Compared with them, Vite can improve the startup performance of the project by an order of magnitude, and achieve instant hot update effects in milliseconds.
Take Webpack as an example. I found in my work that after using Webpack for general projects, it is very common for a few minutes to start, and hot updates often need to wait for more than ten seconds. This is mainly because:
- The dependency tree of the entire project must be recursively packaged when the project is cold started
- The performance limitation of the JavaScript language itself leads to a bottleneck in the construction performance, which directly affects the development efficiency
In this way, the effect cannot be seen immediately after the code is changed, and the natural development experience is getting worse and worse. Among them, the most time-consuming is code packaging and file compilation.
And Vite solves these problems very well. On the one hand, Vite implements the service based on the support of the browser's native ESM during the development phase no-bundle. On the other hand, it uses Esbuild's ultra-fast compilation speed to build third-party libraries and compile TS/JSX syntax, which can effectively improve development efficiency.
In addition to development efficiency, Vite also performed well in the other three dimensions.
- In terms of modularity, Vite implements module loading based on the support of the browser's native ESM, and can convert products in other formats (such as CommonJS) to ESM in both the development environment and the production environment.
- In terms of grammar translation, Vite has built-in support for advanced grammars such as TypeScript, JSX, and Sass, and can also load various static resources, such as images, Workers, and so on.
- In terms of product quality, Vite implements production environment packaging based on the mature packaging tool Rollup. At the same time, it can cooperate with tool chains such as
Terser,Babeletc., which can greatly guarantee the quality of the built product.
Therefore, if you want to learn a front-end building tool, Vite will be your next best choice. It not only solves the development efficiency problem of traditional construction tools, but also has all the elements of an excellent construction tool, and has also experienced large-scale verification and implementation by the community.
How to learn Vite well?
However, many people always encounter various problems in the process of learning and applying Vite.
For example, many Vite learning materials are neither systematic nor in-depth. Most of the articles can only teach us how to build a simple scaffolding project, and even the code is not necessarily correct.
Even after learning the relevant knowledge of Vite through the materials, because of insufficient understanding of Vite's ecology, I still don't know which plug-ins or solutions to use when encountering practical problems.
- What should I do if an error is reported due to the CommonJS code contained in the third-party library?
- What if you want to perform an Eslint code specification check during the development process?
- How to generate a build product analysis report after the production environment packages the project?
- What if I want to be compatible with browsers that don't support native ESM?
Moreover, if you are not familiar with Esbuild and Rollup, the underlying build engines used by Vite, you will often be stretched when you encounter some scenarios that require customization.
- Write an Esbuild plugin to deal with problem dependencies
- Customize the unpacking of Rollup packaging products to solve the problem of circular dependency that often occurs in actual scenarios
- What compatibility issues will arise when using Esbuild's code translation and compression functions? How to solve?
Of course, as a construction tool, the difficulty of Vite lies not only in its own flexibility, but also in the integration and application of many front-end tool chains such Babelas core-js.
@babel/preset-envWhat are the differences between the values of theuseBuiltInsattribute?@babel/polyfillWhat is the difference with@babel/runtime-corejs?@babel/plugin-transform-runtimeWhat are the optimizations compared to@babel/preset-envtheuseBuiltIn?- What is the role of core-js? What versions of its products are there?
core-jsWhat is the difference between andcore-js-pure?
In addition, because the source code of the construction tools (not only including Vite, but also the underlying engine Rollup) is obscure and involves a large number of basic tool libraries, many people's understanding of the principles of the construction tools is only superficial, and it is difficult to go further.
As a front-end engineer who is deeply involved in the front line, my daily job is to deal with various construction tools. I have implemented Vite in many business projects in the company. I have rich Vite practical experience and source code reading experience, and I also contribute to the Vite warehouse. Go through some code. Therefore, I am also very happy to systematically share my practical experience and learning methods in Vite with you through a booklet.
So, how does Vite learn? In accordance with the three principles of step-by-step, practical, and extensible, I design the course content from the shallower to the deeper, provide a large number of practical scenarios and cases, and at the same time provide you with methods and perspectives to solve problems as much as possible, so that everyone can learn after completing the course . Make inferences about other cases from one instance. Specifically, I designed the course into 5 modules.
In the basic usage chapter , I will start with you to initialize the Vite project from 0, access various modern CSS solutions, integrate a series of Lint tool chains such as Eslint, Styelint, and Commonlint, process various forms of static resources, and master Vite Various pre-compiled techniques finally allow you to independently build a relatively complete scaffolding project.
In the dual-engine chapter , we will learn Vite's dual-engine architecture, Esbuild and Rollup related content, including their basic use and plug-in development, mastering them, and 最小必要知识paving the way for subsequent advanced applications.
In the advanced application section , we will learn various advanced usages of Vite and construction performance optimization methods, learn how to write a complete Vite plug-in, unpack the production environment proficiently, use Vite to build complex SSR projects, and realize cross-platform integration based on module federation. Application modules share the architecture. Whether it is project performance optimization skills or understanding of front-end underlying standards and specifications, you will get a lot of improvement from this module.
Next, we will analyze the core source code of Vite together , understand the role and underlying implementation of important concepts in the source code such as , , , and , and teach you how to read the source code of Vite step by step, breaking down the key links in the following architecture diagram. Learn the principle of Vite implementation.JITProxy ModuleModule GraphHMR BoundaryPlugin Container
The last is the handwritten combat chapter. First, we will hand-write Vite's no-bundle service during development, that is, the Dev Server based on the browser's native ESM in the development environment. Then, I will also take you step by step to complete a production environment packaging tool (Bundler), starting from the function of AST parsing, completing the lexical analysis (tokenize) and semantic analysis (parse) of the code, and realizing the module dependency graph and scope chain. Build and complete Tree Shaking, circular dependency detection and Bundle code generation, and finally realize a Bundler similar to Rollup.
It can be seen that we attach great importance to practical combat in the course. All the code of the course will be uploaded to the Github warehouse ( warehouse address ), and basically every section has a code case that can be run. Especially in the last chapter, in order to let you understand the underlying principles of the build tool, I will take you step by step to build a simple build tool, and perform hand-written practice of thousands of lines of code, so that the real code can be operated.
-vite)), basically every section has a code case that can be run. Especially in the last chapter, in order to let you understand the underlying principles of the construction tool, I will take you step by step to build a simple construction tool, and perform hand-written combat of thousands of lines of code, so that the real code can be operated.
Finally, I hope that in this booklet, we can go deep into the practical points and implementation principles of Vite, appreciate the underlying scenery of the field of front-end engineering construction, and truly realize Vite from entry to advanced!