Vite learning (I) - Introduction

brief introduction

vite Is a browser based native ES-Module Front end building tools for . The official website describes The next generation of front end development and construction tools .

The next generation ？

There is the concept of the next generation , Let's first understand what the previous generation tools are .

• es6 Our code specifications were all community specifications before they appeared , for example node The use of commonjs standard , And the service client AMD、CMD standard .
• es6 When it appears , Code modularization has language specification , namely ES-Module standard So now that there are official standards , We can consider abandoning community norms , Uniform use of official guidelines .

characteristic

• Quick cold start （ Used esbuild compile ）
• Instant module hot update
• True on demand compilation （ Leverage native capabilities , Cannot package and rebuild ）
• Low community cost （ compatible rollup plug-in unit ）

principle ： utilize ES6 Of import Will send a request to load the file feature , The server intercepts these requests , Do some precompiling （ Browser does not recognize .vue Documents, etc. ）, Omit webpack Long packing time .

Esbuild

similar webpack Front end building tools for , But use go language-written , Multithreaded parallel execution

Tool comparison

Front end construction tools commonly used at present webpack, The common scaffolds we use are also based on it . Next, make a general comparison between the two tools ：

webpack vs vite

• webpack It can be developed 、 structure 、 pack ;vite Just for development 、 structure 、 Stage , Packaging depends on rollup Tools .
• vite principle
  • Statement script The label type should be module
  • The browser launches a get Request to find the file
  • If there is still import My bag , Will continue to make requests
  • vite Its function is to intercept the requests initiated by the browser , Process files on the server side , Back to the browser , The whole process is not packaged and compiled , So it's much faster
• vite The parsing implementation process is as follows :
  • The development server uses http + connect Build a service
  • Processing request resources through a variety of middleware ; It's going to traverse html node , Elemental src Attribute added base Prefix , Convert inline scripts to network requests
  • Will pass es-module-lexer This library analyzes all import sentence
  • vite Will be added after the request query Method of parameters , The processing logic used to identify the current request
• webpack Packaging process
  • Identify the entry file
  • Identify by layer by layer module dependencies （ Yes require、import Analyze to obtain dependencies ）
  • Use for different file types loader Handle
  • transformation 、 compile 、 Output the final code
• webpack Packing principle
  • Step by step recursively identify dependencies , Building a dependency map
  • Turn the code into AST Grammar tree
  • stay AST Stage processing code
  • hold AST The constructed syntax tree is transformed into code recognized by the browser , Output the last output file ,webpack Did it on its own require function , File dependent import ; Use of loaded files jsonp How to achieve

webpack Disadvantages and vite improvement

• webpack Cold start slow , Because you need to compile all the files ;vite Use browser native ESM Ability , Only files used on the current screen will be processed , Don't compile them all .

• webpack Use in nodejs Written packer builds ;vite Use esbuild（go） Build dependencies , Than javascript The tools written are fast
• webpack After editing the file, the file will be hot replaced again （ modular ） In itself , The thermal renewal efficiency slows down as the project volume increases ;vite in ,HMR It's in the original ESM Performed on , Regardless of the application volume , Can update the module itself more accurately . At the same time, strong cache and negotiation cache are used to avoid unnecessary requests .
• webpack Has been updated to the fifth generation ,loader and plugin Enrich , Ecology is better than vite. however vite The momentum is booming , I believe that community development is only a matter of time
• vite The packaging of is still dependent on rollup
• vite in the light of vue,react, svelte Basic templates are provided

Easy to use

1. adopt vite Create project
2. npm init @vitejs/app （ You may be prompted to install globally @vitejs/create-app）

    vanilla   Templateless native mode 
>   vue      vue3
    react 
    preact
    lit
    svelte

You can install it according to your choice

1. Project structure module Form introduction js file

vite.config.js The configuration file ,vue The default is setup Development mode , If you want to use jsx Development , The plug-in needs to be installed separately

1. npm run dev

1. Want to use jsx Development import { defineComponent } from "vue"; export default defineComponent({ setup() { return () => { return <h3> I am a jsx</h3> } } }) modify main.jsimport { createApp } from 'vue' import App from './App' ////////// createApp(App).mount('#app')
2. npm i @vitejs/plugin-vue-jsx -D
3. newly build App.jsx file

establish vue2 project

We use it vite Know when you create a project , No, vue2 Options for templates , That's for familiarity vue2 What should students of the technology stack do ？

We recreate the project selection vanilla Templates , The simplest form .

1. establish vite.config.jsimport { createVuePlugin } from 'vite-plugin-vue2' export default { plugins: [createVuePlugin()] }
2. install vue2、npm i vue -S
3. The directory structure is as follows

1. Write test code edit main.js file import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) }).$mount() edit App.vue file <template> <div> vue2 </div> </template>

Use the community vue2 Templates

open awesome-vite

The downside is that you need clone Its project , Development .

vite That's all for the introduction, simplicity and practicality of , Learn the next chapter vite Use static resources in , Using environment variables .