This is the 5th day of my August challenge, keep it up!!

The build tool for vue3. X comes from the French word for “fast.

ES Module

  • Modern browsers support ES Module (IE does not)

  • Load the module in the following way

  • Supports lazy loading of the module’s script by default

    • Similar to the script tag set defer
    • Executed after the document is parsed and before the DOMContentLoaded event is fired

Vite as Vue-CLI

Operation phase

  • Vite runs in development mode without packaging

    In development mode, Vite uses native es-moudle to load modules, that is, import modules via import. Since Vite does not need to package the code, it is second off in development mode, whereas Vue-CLI needs to package the entire project first in development mode.

    Vue will open a test server and intercept the request sent by the browser. The browser will send a request to the server to obtain the corresponding module. Vite will process the module that the browser does not recognize. For example, import a.vue file. Vite compiles the file and returns the compiled result to the browser, setting the content-type in the header to Application /JavaScript to tell the browser that a JavaScript script is being sent

    Advantages:

    • Quick cold start
    • According to the need to compile
    • Module hot update, performance is independent of the number of modules

  • Vue-cli development mode must package the project to run

packaging

  • Vite uses Rollup packaging in a production environment
    • ES Module based packaging, packaging submission is relatively small
  • Vue-cli uses Webpack packaging

Vite creates a project

  • Vite creates a project
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
Copy the code
  • Vite creates projects based on templates
npm init vite-app --template react
npm init vite-app --template preact
Copy the code

How Vite works it uses the es-Module approach to load modules. In the development environment it does not package the project and sends all Module requests to the server, where the server handles the modules that the browser does not recognize. If it is a single-file component, compiler-FFC is called to compile the single-file component and return the compiled results to the browser.