current position:Home>Vite plays the front-end Construction Law of the new era from introduction to mastery - continuous learning
Vite plays the front-end Construction Law of the new era from introduction to mastery - continuous learning
2021-08-21 16:36:59 【mb6118ff5c6a229】
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
copyright notice
author[mb6118ff5c6a229],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210821163655066k.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich