Hello, I’m glad you can click on this blog. This blog is a series of articles on the interpretation of Vite source code. After reading it carefully, I believe you can have a simple understanding of the workflow and principle of Vite.
Vite is a new front-end build tool that can significantly improve the front-end development experience.
I’m going to use a combination of graphics and text to make this article as boring as possible (obviously not an easy task for a source code reading article).
If you haven’t used Vite yet, you can check out my first two articles. I’ve only been playing it for two days. (below)
- First experience of Vite + Vue3 — Vite chapter
- First experience of Vite + Vue3 — Chapter Vue3
This article is the second in a series of Vite source code interpretation articles, which can be read here:
- Vite source code interpretation series (graphic combination) – local development server
This article focuses on the vite source code ontology. As mentioned in the previous article, Vite provides a development server through the Connect library and implements a number of development server configurations through the middleware mechanism. Vite does not use packaging tools such as WebPack or rollup for local development. Instead, it schedules internal plugins to translate files so that the results are small and fast.
In this article, I’ll take a closer look at the vite production build command.
All right, without further ado, let’s get started!
vite build
When the vite build command is run, the doBuild method is called internally, which ends up using rollup for the application build.
resolveConfig
Like local development services, doBuild starts by collecting configuration information. In this step, the resolveConfig method does these things:
- Handles the plug-in execution order
- Merge plug-in configuration
- Processing alias
- Read the environment variable configuration
- Export the configuration
Finally, the exported configuration will be used for the following construction operations. The exported configuration details are as follows. If you are interested, you can view them by interrupting. (As shown below)
Next, define some variables and print out the current vite version. (As shown below)
| Configuration items | instructions |
|---|---|
config.build |
viteBuild options for |
input |
Project entry file, default is the project root directoryindex.html |
outDir |
The output directory of the build artifacts |
ssr |
Generate SSR oriented builds |
libOptions/lib |
Only needed when building as a library |
Integration of plug-in
Vite then combines the plugins for the project configuration with the plugins that come with Vite for subsequent rollup compilations. (As shown below)
Generate the rollup configuration
Next, Vite merges the rollup options configuration passed in by the user with the default configuration, and constructs a rollOptions for Rollup packaging. (As shown below)
Next, Vite is configured with output configuration, which is divided into three main categories: SSR, library mode, and common application mode. (below)
Next, vite handles the Watch property internally, providing support for listening properties at build time.
Compile the product
Finally, Vite compiles the files using rollup and then outputs them to the specified build artifacts directory. (As shown below)
Finally, after combining the bundle output, the built product is generated, and you can use Vite Preview to see what it looks like.
summary
At this point, the vite build source code is parsed, which is much simpler than vite Dev.
Let’s draw a simple flow chart to sum it up. (As shown below)
Vite source code interpretation series, we still have the plugin system throughout the text has not been parsed, and rollup is also compiled by calling the plugin.
In the next chapter, we’ll parse the Vite Plugin, the most commonly used @Vitejs/plugin-Vue plug-in.
One last thing
If you’ve already seen it, please give it a thumbs up
Your likes are the greatest encouragement to the author, and can also let more people see this article!
If you find this article helpful, please help to light up the star on Github.