This article aims at a week of vite source learning summary and refinement.

What impressed me most about Vite was its simplicity.

advantages

  1. Different from the traditional packaging method, Vite directly requests the source code, and returns the process of parsing and converting the source code, while the module division work is provided by the browser.

  2. Dependent pre-build, AMD, commonJS, etc. into es module form, strong cache of dependencies, and cached in node_module/. Vite, accelerate service construction.

  3. Provides an ES Build-based HMR API that is simpler and more responsive than the traditional HMR process.

  4. Using ESbuild to translate TS, TSX, JSX, the translation is about 20 to 30 times faster than TSC.

  5. Internal build CSS preprocessor, TSX, JSX, postCss, CSS Module support, no user configuration, out of the box.

  6. Build optimization, CSS code segmentation, preload instruction generation, asynchronous Chunk loading optimization

  7. Using the rollup plugin usage format makes it easier to understand the plugin and create a plugin.

  8. Env file to add environment variables to distinguish between environment and mode, server! == development!

  9. Configuration is simple and easy to use, without too much mental burden.

disadvantages

  1. If ts does not have type detection, you need to enable the TSC detection service.
  2. Unable to customize a specific file parsing loader, limitations.
  3. The Lint plugin cannot be integrated.
  4. Service for modern browsers, invalid for lower versions of browsers, minimum supportes2015.
  5. There are few community plugins, and it has taken a while to develop compared to WebPack.

What did I learn

  1. Make a CLI startup process and parameter processing

  2. Preprocessing source files

  3. HMR implementation principle based on ES Module

  4. Server Middleare hierarchies file types and returns resources based on the Server Router

  5. How plug-ins work

  6. Source code compilation process

Confusion before reading the source code

  1. HMR implementation

  2. How to load HTML

  3. How about preprocessing, prebuilding, file caching

  4. The Middleware mode principle used by the Server environment

  5. The server environment directly sends unconverted files to the browser. How to parse them

  6. How to do it out of the box

Source code analysis

  1. Vite source code analysis (1) :resolveConfig parameter parsing
  2. Vite source code analysis (2) : Vite relies on pre-built feature analysis