Vite has been released for a long time, many people have experienced it, we can not pull down ah.

The official description of the Vite features:

  1. Speedy service start \
  2. Lightweight fast thermal overload \
  3. Rich functionality
  4. Construction of optimization
  5. General purpose plug-ins
  6. Fully typed apis

Before Vite, let’s talk about Snowpack, before our group have a look at Snowpack, Snowpack compilation has also tried, it is really much faster than Webpack, the bottom to the native ESM way of service source, then why Snowpack especially greatly also out of Vite?

In the chapter on Vite comparison, You explain several reasons:

  1. Production build: Deeper integration of Vite with a single packer (Rollup). Vite also supports a common plug-in API that extends Rollup’s plug-in interface for both development and build modes.
  2. Faster dependency prebuild: Vite uses esbuild instead of Rollup for dependency prebuild. This leads to significant performance improvements in rebuilds of development server cold starts and deactivation of dependencies.
  3. Monorepo support: Vite supports Monorepo and we have had users successfully use Vite in Monorepo mode with Yarn, Yarn 2 and PNPM.
  4. CSS preprocessor support: Vite provides more refined support for Sass and Less, including improvements@importResolve (using aliases with NPM dependencies) andprovideurl()Inline introduction and rebasing.
  5. Vue first priority support: After all, it’s a real son

Create a project

NodeJS version >= 12.0.0, I use yarn installation here, like NPM can use NPM

$ yarn create @vitejs/appYarn Create v1.22.17 [1/4] 🔍 Resolving packages... (2/4) 🚚 Fetching packages... [three] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... Success Installed "@vitejs/[email protected]" with binaries: Create-app-cva-vitejs /create-app is deprecated, use yarn create vite instead stocking Project name: Fe_coding ➤ ➤ vue ➤ ➤ ➤ ➤ Vue Scaffolding project in /Users/ Yangbaichuan /fe_coding... Done. Now Run: CD fe_coding yarn dev ✨ Done in 20.73s.Copy the code

In the second step, we can support other frameworks. As the parents, we still use Vue.

$ cd fe_coding && yarnYarn Install v1.22.17 warning package.json: No license field info No lockfile found. Warning [email protected]: No license Field [1/4] 🔍 Resolving Packages... (2/4) 🚚 Fetching packages... [three] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... Success Saved lockfile. ✨ Done in 2.75s.Copy the code

At this point, the basic template based on Vue3 is built.

The directory structure

. ├ ─ ─ public │ └ ─ ─ the favicon. Ico ├ ─ ─ the SRC │ ├ ─ ─ App. Vue │ ├ ─ ─ assets │ ├ ─ ─ components │ └ ─ ─ the main, js ├ ─ ─ the README. Md ├ ─ ─ Index.html ├── ├─ package.json ├─ ├.html ├── ├.txt ├── ├.txtCopy the code

Like the flavor of the Vue – cli basic public static resource SRC source vite. Config. Js project configuration file, Vue – cli is Vue. Config. Js index. The HTML why not in the public?

In index.html with the project root directory there is the following description

Vite is a server during development, and index.html is the entry file for the Vite project

See here, do you feel that vue-CLI is actually the predecessor of Vite.

Engineering command

A project is most concerned with the support of commands and environment variables. What about package.json

{
  "name": "fe_coding"."version": "0.0.0"."scripts": {
    "dev": "vite"."build": "vite build"."serve": "vite preview"
  },
  "dependencies": {
    "vue": "^ 3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^ 1.9.3." "."vite": "^" 2.6.4. ""}}Copy the code

At a glance 🥀🥀🥀🥀, very little.

That’s too simplistic. All right. It seems that everything about vue should be put in @vitejs/plugin-vue. I admire ~

Dev: start development server, same as earlier template build: Build artifacts for production, package build command serve: local preview production build, this is the same as vue-CLI, but CLI is start development server

Let’s see what the third one is.

$ yarn serve

>[email protected] serve/Users/yangbaichuan/lot/fe_coding
> vite preview

  > Local: http://localhost:5000/
  > Network: use `--host` to expose
Copy the code

After access, there is only Cannot GET /, which feels like an interface.

But what does the official description of a local preview production build mean?

In fact, a server is started locally to access the built resources, so run build first and then run serve, you can access the packaged built resources locally, you can verify whether there is an exception after the package and then deploy.

Vite. Config. Js configuration items

You can explicitly specify a configuration file (resolved relative to the CWD path) via the –config command line option vite –config my-config.js

Although replacement configuration files are supported, it is not recommended in case others do not know. Ha ha ~

Shared configuration

Root: the project root directory. Those with only one project in a folder do not need to pay attention to it. Base: Common base path for development or production environment services. Vue-cli2 seems to have used baseUrl before. Mode: indicates the mode. It can also be overridden using the command line –mode option. Is it a familiar smell? Plugins are an array of plugins to be used. PublicDir is a directory for static resource services

Other not enumerated, feel down and cli basic similar things.

Server Options

Similar to the previous devServer configuration, it is not further explored

Build Options

Some of the configuration items for build packaging can be used when optimizing packaging

The plug-in

@vitejs/plugin-vue

  • Vue 3 single file component support

@vitejs/plugin-vue-jsx

  • Vue 3 JSX support is provided (through a dedicated Babel conversion plug-in).

@vitejs/plugin-react-refresh

  • React Fast Refresh support

@vitejs/plugin-legacy

  • Traditional browser compatibility support for packaged files

Awesome Vite.js also has many plugins.

conclusion

Vite is much more streamlined and integrated than older tools like WebPack.

Before, I tried to start the local service only 687ms, which is really very fast. When building the Vue3 template later, I will check the startup speed and packaging speed.

Vite is very quick to use for vue-CLI, and option-based configuration is also quick to use.

Especially big things to use the feeling is: simple, comfortable, rest assured

Finally, thanks to a wave of great Vite🎉🎉🎉