vite
As UVU announced in zhihu on January 20, 2019 that Vue 3 will become the new default version
Vite should see more developers try it out for VUE3 and even react projects in the coming year
The status quo
“Vite is a new front-end build tool that dramatically improves the front-end development experience.”
Vite2.0 was released in December 2020
Then I saw this reply from UHP in Zhihu
It’s looking exactly as Utah predicted at the beginning of the year
The deadline is Now January 2022
Vite The vite scaffolding project uses version 2.7.2 by default
There are a number of major VUE frameworks that companies have tried to develop using Vite instead of WebPack
The surrounding ecology is also gradually improved
Some useful Vite plug-ins such as
Unplugin-vue-components (automatically import components on demand)
Unplugin-auto-import (automatically introduces hooks on demand),
Plugin-vue-jsx (vUE 3 JSX support)
Plugin-react (with full React support)
Plugin-legacy (traditional browser compatibility support for packaged files)
For example, Vite ecology’s VitePress Chinese website
Instead of the original vuePress, more people use it
Or, as many expect, an upgrade to the VUe3 version of NuxT3
What’s the advantage over Webpack (development mode)
As the vite documentation says in the first sentence
“Vite is a new front-end build tool that dramatically improves the front-end development experience.”
Vite optimizes the front-end development experience
So compared to WebPack, using Vite development, “how good is it?”
How is Webpack built with devSever
Webpack:
As you can see, when WebPack starts devSever locally, the entire project needs to be built first, just like a tree, traversing every root node.
As you can imagine, starting devSever on large projects can be very time consuming without optimization.
The HMR of Webpack is also affected because each change causes the corresponding module to be rebuilt.
However, the advantage of this is that the code in development mode is less different from the code packaged in production mode, which is better for browser compatibility.
(Of course, optimization of devSever first build can enable caching for label-loader and exclude to reduce the scope of packaging, etc.)
Vite:
In Vite, we use the browser’s native ES Module to introduce JS code so that our native code can run directly in the browser.
You don’t need to build the entire project like WebPack, so it starts up “fast” in milliseconds,
Of course, Vite will also be pre-built, because like some NPM dependencies, not all of them are modular in the ES Module way, which requires vite to have a pre-built capability
To this end, UU created esBuild based on go (which is 10-100 times faster than pre-built dependencies of packagers written in JavaScript).
At project startup, dependencies are prebuilt, the build results are cached, and as dependencies are added or modified, new dependencies are detected and repackaged.
For project modules, Vite leaves more work to the browser.
The browser requests the source code via HTTP, and ESBuild converts it and provides it on demand.
So vite in development mode is essentially optimized to take advantage of the browser’s support for ES Module, which is different from other build tools.
Of course, this approach is very dependent on browser compatibility, but it doesn’t seem to be too much of a worry, as Vite can still be packaged in the traditional way to introduce js code @vitejs/ plugin-Legacy.
Just like vue3 replaces Object.defineProperty() with a proxy
Vite is doing things that are ahead of the standard that will definitely become the standard in the future.
1.3 Initializing the VUe3 Project
Next, use Vite to initialize a VUE3 project
Initialize a VUE3 project (NPM)
NPM init vite@latest NPX: 6 Successful installation in 3.087 secs √ Project name:... Vite-vue3 - Demo √ Select a Framework: » Vue √ Select a Variant: » vueCopy the codeNPM I installation dependencies
package.json
{" name ":" vite - vue3 - demo ", "version" : "0.0.0", "scripts" : {" dev ":" vite ", "build" : "vite build", "preview" : "Vite preview"}, "dependencies" : {" vue ":" ^ 3.2.25 "}, "devDependencies" : {" @ vitejs/plugin - vue ":" ^ 2.0.0 ", "vite" : "^ 2.7.2}}"Copy the codeYou can see that the default vite version is 2.7.2, vue3 version is 3.2.25, and there is a plugin-vue for development environments
We add –host to dev and Preview to see the current launch network address
Configuring a Path Alias
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{ find: '@', replacement: resolve(__dirname, "./src") },
],
},
})
Copy the codeAutomatic import of components and hooks using plug-ins (element-plus)
Refer to the big guy’s article
[unplugin-vue-Components, free hands!] juejin.cn/post/701244…
The main use of unplugin-vue-components, unplugin-auto-import these two plug-ins
Here I use element-Plus as an example
Use ElementPlusResolver, which you can customize as well
Note: Unplugin-vue-Components, though, also introduces a style file for Element-Plus on demand
However, some global component styles and hooks do not seem to be well supported
You still have to import it globally in main.js
// import ‘element-plus/dist/index.css
Resolve style loss issues
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import { resolve } from "path"; import Components from "unplugin-vue-components/vite"; import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import AutoImport from "unplugin-auto-import/vite"; // https://vitejs.dev/config/ export default defineConfig({ base: './', css: { preprocessorOptions: { scss: { additionalData: `@use "@/styles/element.scss" as *; ', javascript: true},},}, plugins: [vue(), // hooks automatically import AutoImport({imports: ["vue", "vue-router"], resolvers: [ElementPlusResolver()], dts: "SRC /auto-imports. D.ts ",}), // Components automatically import Components({// specify component location, default is SRC/Components dirs: [' SRC/Components '], resolvers: [ ElementPlusResolver({ importStyle: "sass", }), ], extensions: ['vue'], dts: "src/components.d.ts", }), ], resolve: { alias: [ { find: '@', replacement: resolve(__dirname, "./src") }, ], }, });Copy the code1.4 Personal development experience
As Uhp said in Zhihu, Vite was not created to kill webpack.
In my opinion, Vite provides front-end developers with one more option.
My personal experience with Vite development is: fast.
Fast startup, fast hot update.
However, there is a slight problem, since Vite devSever relies on the browser request, esbuild does the conversion and provides the source code on demand.
This results in a wait time when the page is first opened in the browser
This should be how long it takes esBuild to convert and respond.
This is obvious when the page is first opened.
(Of course, packaged static projects don’t have this problem.)
Vite abstracts out the API configuration is relatively simple, as before, there is no need to configure the tedious WebPack.
There are also an increasing number of plug-ins that make it easy to build a Vite project.
But for now, there’s no way to shake webpack,
Webpack gives developers more freedom to customize,
Vite gives developers the experience of development.
2022 should see more developers opting for Vite as a front-end build tool.