Vite + Vue3 first experience - Vite articles

Vite and Vue3 should not be a new thing in 2022, but there should be many like me who have not been exposed to these two "new things".

These two ( Vite + Vue3 ) give me the feeling that they are completely new toys, the trend of the new era.

Looking at webpack + Vue2 in my hand, I wonder if it will become history angularjs + gulp

As the New Year is approaching, I also have some free time. Let Vue3 Vite + the newly upgraded 061efdf452d980, which has been used many times by Amway!

Start with Vite

Let's take a look at the official introduction of Vite

It can be seen that in local development, Vite uses the native ES module: modern browsers (such as the latest version of Google) no longer need to rely on the webpack management package module, but can Nodejs same module management capabilities as , which is the 161efdf452da22 native ES module capabilities.

Therefore, when developing locally, Vite omits some time-consuming compilation processes, and hot updates are naturally fast.

When building production artifacts, you can build modern browser artifacts, or output highly optimized static assets for production environments Rollup —— To what extent is this highly optimized, we can discuss it in a later article.

get started

Vite started with 061efdf452da9a is very simple, just run the npm create vite@latest command directly.

npm create is actually the npm init command, and the npm init command with the package name executed is npm exec , which is the default command to vite initialization.

After entering the command, you need to add the project name and technology stack. You can see that there are so many technology stacks to choose from (as shown below)

vite , and I don't know half of them.

• vanilla : Vanilla JS is a fast, lightweight, cross-platform JavaScript framework. Vanilla JS is the world's lightest JavaScript framework (no one) - it's actually native JS.
• vue/react : These two should not be introduced too much.
• preact : A lightweight alternative to React.
• lit : Lit is a simple library for building fast, lightweight web components. (Looking at the grammar, it's kind of fun.)
• svelte : A library that doesn't use Virtual DOM - cool. The author of this library is the same Rollup

Here I chose vue + ts to create.

Now let's see what this new project directory looks like. (As shown below)

There are two differences from the directory initialized with vue-cli

1. index.html entry file was moved to the root directory. The official explanation is: Vite is a server during development, and index.html is the entry file of the Vite project.
2. vite.config.ts replaces vue.config.js as the configuration file of the vite

Next, let's take a look at the contents of package.json (as follows)

{
  "name": "vite-try",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "typescript": "^4.4.4",
    "vite": "^2.7.2",
    "vue-tsc": "^0.29.8"
  }
}

As can be seen from the above, the use of Vite initialized Vue project, Vue version is up to date Vue3 up. During development, the dependency was also vue-cli/webpack series to the vite series.

Startup project

Before experiencing the Vue3 , start the project and see the effect.

After using npm i install the dependencies, use npm run dev to start the local development mode.

Just running the project, the startup speed really surprised me.

This is Vue2 , and the project has been started in the blink of an eye.

Of course, we can know from its introduction that this is because Vite uses the native ES module during local development, so there is no module compilation process involved, which saves a lot of time.

View locally running modules

Let's open the console and first look at our html file. (As shown below)

It can be seen from the morning that html is introduced in main.ts , which is the entry file of our project. (As shown below)

As can be seen from the above picture, the code is still the native import without any translation.

However, here I see the requested resources, there are ts and vue .

Does Google Chrome already support direct loading of ts and vue files? Actually not, the mystery here comes from the response header of the file - Content-Type , which determines how the browser handles the file. (As shown below)

If you click on other .vue files, you can see that the .vue file is still compiled and becomes the js type recognized by the browser, but the module still uses the native ES module supported by Google Chrome. (As shown below)

Let's see what the page looks like. (As shown below)

emmmmm, the classic Vue startup page.

The two lines in the image above caught my attention:

1. The recommended IDE is vscode + volar .
2. Modify components/HelloWorld.vue to test local hot update function.

vscode + volar

vscode is the code editor I have been using to write vue , but what is volar ?

After checking it, it turned out to be a vscode in 061efdf452e1ec to support vue3 grammar, which can be used for intelligent grammar prompts and error checking. (As shown below)

Install it decisively. —— has a shuttle for schoolmasters and a lot of stationery for poor students

It is mentioned in the document that this plugin may vetur plugin, and it is recommended to enable only one of the two. (It is true), so in a workspace, only open one plugin to avoid conflicts.

Local hot update

Next, I will modify components/HelloWorld.vue test the local hot update function.

In fact, I don't need to try it, the speed is definitely fast.

After modifying the code, the hot update is completed in the moment of saving, which is almost imperceptible.

This is also related to the small size of the project. For relatively large projects, after the code is modified, the speed of hot update needs to be verified again.

Build the project

Local development has been experienced, now let's build the project and see what the product looks like.

Use the npm run build command to build the project. Found an error here. (As shown below)

This is a newly initialized project, why did I get an error when I built it for the first time?

Here it is seen is given given syntax optional chain operator, it should be thought for a moment node version of the problem. My local node version is v12.20.0 , find a look at the official documentation, does have the problems associated records. (As shown below)

It seems vue + ts template dependent of node version requires higher, here I will node switch version to v14.15.0 , run the build command again, you will be successful! (As shown below)

The final built code is packaged Rollup Rollup . Let’s take a look at his official introduction.

rollup here is to understand the difference between 061efdf452e469 and webpack . The module packaging capability of rollup webpack powerful as that of tree-shaking fully process the js file, and the packaged js file will be cleaner.

Then, we enter the dist directory and use anywhere (a simple http server) to run the project and see.

As can be seen from the above figure, the file packaged by vite js directly blocks the DOM rendering thread. However, js are not big, they add up to 53k .

Of course, as the project gets bigger, this volume will also get bigger.

Vite compatibility issues

When a new framework is launched, everyone is more concerned about its community activity, followed by its compatibility.

Let's take a look at the compatibility of the code packaged by Vite (As shown below)

According to the Vite , the code built with the default configuration can only support modern browsers, that is, the following.

By modifying the configuration, the minimum support is es2015 , which is ES6 (that is, IE does not support).

But it is possible to support legacy browsers (eg IE11) @vitejs/plugin-legacy However, IE11 seems to be its limit, and lower versions may have problems.

So, if you have strict requirements for browser compatibility, please use Vite with caution.

summary

Well, here, this first experience of Vite

Create a new project with Vite , then modify the code to see the changes. Finally, build the project and preview it locally.

All this is relatively simple to do Vite fast!

I think, I will start to try to use Vite + Vue3 to write some small projects to practice, and then see if there is a production project suitable for it.

Next time I will talk about my Vue3 , and you are welcome to continue to pay attention.

one last thing

If you have seen this, I hope you will give a like and go~

Your likes are the greatest encouragement to the author, and can also allow more people to see this article!

If you think this article is helpful to you, please help to light up star github to encourage it!