vite
Yu Creek’s goal was to eliminate Webpack and build a complete VUE development process
Viet Chinese official website
Vite features:
- The Vite cold service startup (which was not packaged at the time of development) is introduced as a module
- Hot update in development
- Compiling on demand does not refresh the entire virtual DOM
Vite vs. Webpack
Webpack:
Give Webpack an entry file, according to the entry file to find dependent modules, including JS, CSS, images and so on, packaged by Loder and Plugin, compressed into small packaged files, in the development phase we need to start a development server, The packaged results are delivered to the developer by accessing the development server
(Hot replacement)
Modules that are modified after code changes are packaged with dependencies on related modules, so packaging is also slow in large projects!
Take an example (1)
Some companies in the project is relatively large, come to the company first package, and then the meeting, open, package
Vite:
Vite has no packaging process and starts the development server (KOA) directly. Vite has no relation to the size of the project because it has no packaging process and is fast, and then goes to the server display page
Q1: So how does Vite show us the page when we visit the server?
Development stage:
Vite does this by giving you the index. HTML file from the root directory. Because there is no packaging, there is only loading and compiling of the file.
Note: This is required during the development phase when there are compatibility issues
It’s going to cause the browser to request a lot of dependency loading but because you’re developing in a local environment, it’s going to be very fast to read files in a local environment, certainly much faster than packaging
The main HTML page introduces the main entry index.js file
At the time of the network request
Modules starts with @modules to make it easier for browsers to import from dependencies
The relative path will change to the absolute path
The introduction of CSS is compiled directly into a string and then exported
The introduction of our VUE component compiles directly to a pure JS
Webpack packs, starts the development server, and gives the package results directly when the server is requested. Vite directly starts the development server and asks which module to compile the module in real time. Since modern browsers naturally support ES Modules, they automatically make requests to dependent modules. Vite takes advantage of this by taking module files from the development environment as files to be executed by the browser, rather than being packaged and merged like WebPack. Since Vite doesn’t need to be packaged at startup, which means there’s no need to analyze module dependencies and compile, it’s very fast to start up. When a browser requests a module, the content is compiled as needed. This dynamic compilation on demand greatly reduces the compilation time, and the more complex the project and the more modules, the more obvious the advantages of Vite. In TERMS of HMR (hot update), when a module is changed, you only need to ask the browser to request the module again, unlike WebPack, which needs to compile all the relevant dependent modules of the module once, which is more efficient. When it comes to packaging into production, Vite is packaged using traditional rollup, so the main advantage of Vite is in the development phase. In addition, since Vite leverages ES Modules, you cannot use CommonJS in your code
Can we use commonJS to import modules in our index.js file? Webpack can use commonJS specification to import modules because it is packaged directly in the Node environment, and the browser imports the packaged files
Introducing way
1 use NPM
NPM init vite-app Specifies the name of the project file
2 use the yarn
Yarn Create viet-app Project name
Methods introduced after Vite 2.0
NPM init. vitejs/app project name
Yarn Create @vitejs/app Project name
The configuration file
vite.config.js
\