The main advantage of Vite is that it starts up quickly at development time, especially if you have a large number of files. As I write this, there are over 30 stars on Github with version 2.5.7. You can see the heat.

The main reason for this is that it eliminates the bundle process, takes advantage of modern browsers’ support for the ES module, and the development server provides the ES module directly instead of the compiled bundle. Of course, since the browser does not yet recognize the Bare Module by importing ‘lodash’ which is neither a relative nor an absolute path, path conversion is done internally in Vite.

features

  • The development environment will be fast

The main reasons are:

  1. The built-in Dev Server provides ES Modules directly without the need for bundles. Browser support for ES Module is required.
  2. Using theesbuildPrebuild.esbuildWriting in GO will be 10-100 times faster than writing in JS packaging tools. In the pre-build, the following work is done :(1) convert modules written with CommonJS and UMD into ES module; (2) transformationbare moduleThe path; (3) Dependency is merged into a single module to reduce HTTP requests; (4) Third-party packages will be localnode_modules/.viteUnless the dependency changes, the prebuild is rebuilt. So the subsequent cold start will be very fast. There is also strong caching in the browser, so pages refresh quickly.

Summary: Conversion work is provided when a module request is made, that is, dynamic compilation on demand.

  • Support the HMR.
  • Use in production environmentRollupPackage for optimizations like tree-shaking, lazy loading, and chunk splitting.
  • supportvue,React,Lit-element,svelteAnd other frameworks and their corresponding TS versions.
  • Internally, esbuild is used to translate TS to JS, but the type check is not performed. TSC and VUE-TSC can be installed to check.
  • Index. HTML is the entry file of the project. JS and CSS introduced in the file will be automatically parsed for path conversion. Support for multiple. HTML, that is, multi-page applications.
  • Thanks to rollup, there are plenty ofThe plug-inSupport.

Environmental requirements

  • The Node version > = 12.0.0
  • Browser support<script type="module">anddynamic import: the traditionalimportIt’s statically compiled. whileimport()Is a dynamic import that returns the content exposed by the Promise, resolve module. Unsupported browsers can be introduced@vitejs/plugin-legacy.

function

Path analysis

The browser does not support the introduction of ES bare modules, which cannot be parsed. Vite detects that these bare modules do the following:

  • Convert all commonJS/UMD formats to ES Modules using esBuild (Vite’s development server treats all code as native ES modules)
  • Prebuild to improve == cold start time ==. Vite caches pre-built dependencies tonode_modules/.vite, is repre-built only when dependencies change. The parsed dependent request will have an HTTP headermax-age=31536000,immutableStrong caching to improve page reloading performance at development time. Once cached, these requests will never reach the development server again.
  • Resolve the bare module path to a path that the browser can recognize (absolute or relative).

About CSS

  • CSS modules are supported. Files named x.module. CSS are named CSS modules by default.

  • Since Vite is intended only for modern browsers, it is recommended to use native CSS variables and PostCSS plug-ins that implement CSSWG drafts (such as postCSS-Nesting) to write simple CSS that conform to future standards. However, preprocessors such as SCSS are also supported.

  • Vite automatically extracts the CSS code used in an asynchronous chunk module and generates a separate file for it. The CSS file will be automatically loaded with a tag when the asynchronous chunk has finished loading, and the asynchronous chunk is guaranteed to execute only after the CSS has finished loading.

Static resource

Resources in the public directory can be accessed directly through /, which is good for static resources that you don’t want to build. Resources in public should not be referenced by JavaScript files.

To distinguish the environment

In the variable import.meta. Env, you can get environment-related content, including the following built-in variables:

  • MODE

By default, the serve command is development and the build command is production. Of course, you can add more environments such as staging. You need to add the. Env.staging file:

NODE_ENV=production
VITE_APP_TITLE=My App (staging)
Copy the code

Add build commands:

vite build --mode staging
Copy the code

At this point, the stage environment is still built from the Production environment, but some different variables are exposed. These variables need to start with VITE_ before they are injected and provided to the client source. These variables can be accessed in client code via import.meta.env.xxx.

For more on distinguishing environments, see the.env.[mode] file.

  • BASE_URLIf your front-end resources are placed in a subdirectory of the server, they can be placed invite.config.jsthebaseIn the configuration item.
  • PROD: Boolean value.
  • DEV: Boolean values, andPRODOn the contrary.

reference

  • Vite official document
  • Pit mining: 2021, will vite be ready for production? Vite.config. js configures stomp pits
  • Pit mining: Can vite👀 be used in project development
  • Mining pit: issues
  • Actual combat: a complete project based on VUE3 + Vite + TS