Vite plays the front-end Construction Law of the new era from introduction to mastery - continuous learning

        Baidu SkyDrive

Extraction code ：3830

General policy ： What is it? ？ Where are from ？ Where to go ？

One 、 What is it? ？

vite ------- vue Developed by you Yuxi web development tool

It has the characteristics of ： Static servers 、 Building tools 、 Light weight 、 Open the box 、 Hot replacement of speed module 、 built-in Rollup For packaging projects

The author's speech on microblog ：

Vite, A browser based native ES imports Development server for . Use the browser to parse imports, On the server side, on-demand compilation returns , Completely skip the concept of packaging , The server comes with you . At the same time, there are not only Vue File support , And hot updates , And the speed of hot update will not slow down with the increase of modules . For the production environment, the same code can be used rollup hit . Although it's still rough , But I think this direction has potential , Doing a good job can completely solve the problem of changing a line of code and other half day hot updates .

Its main characteristics ： Browser based native Of ES module (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)  To develop , Omit the packaging step , Because what resources you need can be directly introduced into the browser .

It's essentially using C++ / Rust / Go Rewritten dependency analysis / Module building capability , But make full use of the existing Ecology , The development cost is greatly reduced .

Two 、 Where are from ？

Nowadays, the popular packaging and construction tools are ：parcel 、 rollup（es module/ tree shaking） 、 webpack( The strongest performance 、 Strong expansion ability )

2.1 How to eat

Command line ：npx create-vite-app <project-name>  /  yarn create vite-app <project-name>

  cd <project-name>

  npm install (or `yarn`)

  npm run dev (or `yarn dev`)

As shown in the figure below, you can eat ：

 

 

2.2 The principle behind it

2.2.1 How to remove the packaging steps ？

The concept of packaging is that developers use packaging tools to gather various application modules together to form bundle, Read the code of the module according to certain rules —— For use in browsers that don't support modularity .

In order to load each module in the browser , The packaging tool will be used to assemble each module with the help of glue code , such as webpack Use  map Storage module id And the path , Use  __webpack_require__  Method to get the module export .

vite Take advantage of the browser's native support for modular import , The assembly of the module is omitted , There is no need to generate bundle, So the packaging step can be omitted .

2.2.2 How to achieve on-demand loading ？

webpack Such packaging tools will package modules in advance bundle in , But the packaging process is static —— No matter whether the code of a module is executed to , This module should be packaged into bundle in , The disadvantage is that as the project gets bigger and bigger, the packaged bundle It's getting bigger .

Developers to reduce bundle size , Will use dynamic import  import()  Load the module asynchronously （ The introduced modules still need to be packaged in advance ), Or use tree shaking Try to get rid of the unreferenced modules , However, these methods are not as good as vite Elegance of ,vite You can only dynamically when you need a module （ With the help of  import() ） Introduce it , Without packing in advance , Although it can only be used in the development environment , But that's enough .

3、 ... and 、 Where to go ？

As you dada said ： Completely solve the problem of changing a line of code and waiting for half a day's hot update . We'll wait until the dumplings are cooked , It's delicious