About pits created with Vite

  • There are still a lot of deprecated vite packages on the web, but there are a lot of misleading actions and deprecated packages from older articles and writers who have compiled articles based on videos.

  • Deprecated package 1@vitejs /create-app

  • Package 2 has been deprecatedcreate-vite-app

  • Deprecated package 2 is one of the most commonly encountered packages on the web for creating Vites.
  • The Vite production phase does not skip compilation
    1. Nested imports cause additional network roundtrips, and it is still inefficient to publish unpackaged ESMs in a production environment
    2. To get the best loading performance in production

About vite

  • Vite is a packaging tool, vite official explanation: is the next generation of packaging tool.
    • aboutwebpack.RollupandParcelAs projects get larger and larger, the amount of JS code increases exponentially
    • Vite takes advantage of the fact that browsers are starting to natively support the ES module
    • Vite native support ts files, support TS file translation

Build vUE projects using Vite

  • Note: Vite itself relies on Node, so you need to have the Node environment installed as well
    • Vite requires Node versions older than 12
  1. Installation method 1 :(official)
    • npm init vite@latest my-vue-app --template vue
    • By default, vue projects with Vite are installed directly
    • Note: tonpm installInitialize the project
  2. Installation Method two:
    • First of all:npm init create-vite -gGlobal installation project builder tool
    • create-vite my-vue-app: Select vUE. If ts is used, continue to select VUe-ts
      • vanilla
      • vue
      • react
      • preact
      • lit-element
      • svelte
    • npm install: Initializes the project
  • Learn about Vite fast builds
    1. Browser native support for ES module features, build projects will bescriptOf the labeltypeProperty set tomodule
    2. If we look at the request in the browser, we will see that the request is still the TS file:
      • This is because the server Connect in Vite forwards our request;
      • Get the ts compiled code and return it to the browser, which can parse it directly
        • And most of the logic is done by plug-in hooks rather than middleware, which greatly reduces the need for middleware

  1. The official explanation:
    • Cold start development server, where modules are distinguished asRely onandThe source code
      • Dependencies :Vite will pre-build dependencies using esBuild
      • Source code :Vite only needs to translate the source code when the browser requests it and provide it on demand(Load on demand)
        • The source code usually contains files that are not directly JavaScript that need to be transformed (such as JSX,CSS, or Vue/Svelte components) and often edited. And not all source code needs to be loaded at the same time (routing)
    • Hot update (HMR) :
      • Note that this is very important:
        1. Vite also makes use of HTTP headers to speed up whole page reloads (again making the browser do more for us)
        2. Requests from source modules are negotiated cached according to 304 Not Modified, while dependent module requests are strongly cached via cache-control: max-age=31536000,immutable, so they do Not need to be requested again once cached
  2. Specific, official documentation cn. Vitejs. Dev/guide/according to h…

Using vite

  • inpackage.jsonIn the file
"scripts": {
    "dev": "vite"."build": "vue-tsc --noEmit && vite build"."serve": "vite preview"
  }
Copy the code
  1. npm run devStart the development server
  2. npm run buildBuild artifacts for the production environment
    • vue-tsc --noEmitType checking tool
  3. npm run serveLocal preview production build artifacts

Vite uses ESBuild packaging instead of Babel

  • The characteristics of ESBuild

    • Super fast build times and no caching required
    • Support ES6 and CommonJS modularity
    • Tree Shaking with ES6 support
    • Support Go,JavaScript API
    • Support TypeScript,JSX, and other syntax compilation
    • Support SourceMap
    • Support code compression
    • Support extension of other plug-ins

  • ESBuild quick packaging reasons:

    • Written in the Go language, it can be directly converted to machine code without passing bytecode
    • ESBuild takes full advantage of the CPU’s multiple cores, running them as full as possible
    • Everything in ESBuild is written from scratch, rather than using a third party, so you can consider various performance issues from the start