Vite Source Code Interpretation Series (Graphic and Text Combination) - Construction

Hello, I'm glad you can click on this blog. This blog is a series of articles on the interpretation of the source code of Vite . After reading it carefully, I believe you can have a simple understanding of the workflow and principles of Vite .

Vite is a new front-end building tool that can significantly improve the front-end development experience.

I will use the combination of pictures and texts to try to make this article less boring (obviously for source code interpretation articles, this is not a simple thing).

If you haven't used Vite , then you can read my first two articles, I just experienced it for two days. (as follows)

• Vite + Vue3 first experience - Vite article
• Vite + Vue3 first experience - Vue3 article

This article is the second article in the Vite source code interpretation series. Previous articles can be found here:

• Vite Source Code Interpretation Series (Graphic and Text Combination) - Local Development Server

This article mainly interprets the source code body of vite . In the previous article, it was mentioned that vite provides a development server through the connect library, and realizes multiple development server configurations through the middleware mechanism. However, rollup did not use packaging tools such as webpack or vite during local development, but realized the translation of files by scheduling the internal plugin , so as to achieve a small and fast effect.

In this article, I will analyze the production product construction of vite , that is, the vite build command in detail.

Well, without further ado, let's get started!

vite build

When running the vite build command, the doBuild method is called internally, which ends up using rollup to build the app.

resolveConfig

Similar to the local development service, the first step of doBuild is to collect configuration information. In this step, the resolveConfig method does several things:

• Handling plugin execution order
• Merge plugin configuration
• Handling aliases
• Read environment variable configuration
• export configuration

After the configuration is finally exported, it will be used for the next construction operation. The following is the exported configuration details. Interested students can check it out by themselves. (As shown below)

Next, is the definition of some variables, and output the current version vite . (As shown below)

configuration item	illustrate
config.build	Build options for vite
input	Project entry file, the default is index.html in the project root directory
outDir	The output directory of the build product
ssr	Generate SSR-targeted builds
libOptions/lib	Only required when building as a library

Integrate plugins

Then, vite integrates the plug-ins configured by the project and the plug-ins that come with vite for subsequent compilation of rollup . (As shown below)

Generate rollup configuration

Next, vite the rollup option configuration passed in by the user with the default configuration, and builds a rollOptions after merging, which is provided to rollup for packaging and use. (As shown below)

Next, vite is configured with output configuration, which is mainly divided into three types ssr , library mode, and normal application mode. (as follows)

Next, vite internally handles the watch attribute, providing support for listening attributes at build time.

compiled product

Finally, vite compiles the files with rollup , and then outputs these files to the specified build product directory. (As shown below)

Finally, after combining and outputting these bundle , the built product is generated, and you can use vite preview to preview the effect.

summary

At this point, the source code of vite build has been parsed, and this part of the code is much simpler than vite dev .

Let's draw a simple flowchart to summarize it. (As shown below)

vite source code interpretation series, we still have the plug-in ( plugin ) system that runs through the whole text and has not been parsed, and rollup is also compiled by calling the plug-in plugin .

In the next chapter, we will vite plugin and the most commonly used @vitejs/plugin-vue plugins.

one last thing

If you have seen this, I hope you will give a like and go~

Your likes are the greatest encouragement to the author, and can also allow more people to see this article!

If you think this article is helpful to you, please help to light up star on github to encourage it!