本文原创：lideguangjavascript

某乎有一个问题“2021前端会有什么新的变化？”，其中 Vue 的做者尤雨溪给出的答案：“会有不少人抛弃 Webpack 开始用 Vite”。下面来看一下为什要抛弃 Webpack、使用 Vite。css

Vite

Vite 是一种新型的前端构建工具，最初是配合 Vue 3.0 使用，后面适配了常见的前端项目，提供了 Vue、react、preact 等模板。官网首页列举了 Vite 的特性：快速的启动、热重载、支持常见资源类型、支持多页/ 类库开发、通用、类型化API。html

在进入 Vite 实操前，咱们来看下被 Vite 革命的 Webpack。前端

Webpack 对比 Vite

Webpack 一直以来和前端工程化紧密联系在一块儿，优化前端开发体验。这张图是描述 Webpack 功能最直观的一张图，从入口进入，寻找各类依赖资源，经由 Webpack 打包，生成静态资源提供网页展现。vue

可是使用 Webpack 有一个绕不过去的问题，就是伴随着项目体积增大、代码增加而来的性能问题：项目启动的速度、加载的性能、打包的速度、热重载的及时性等。java

以 Webpack 为表明的模块打包工具，开发时启动本地服务器会从项目入口依次抓取依赖关系，对整个项目文件进行打包，这就形成了启动服务慢；开发过程当中也 HMR 热更新也存在一样问题，Webpack 的热更新服务会以当前修改文件为入口，从新 build，全部依赖也会被从新加载一次，致使热更新也就快不起来。node

Vite 让浏览器接管了打包程序的部分工做，仅启动一台静态资源服务器。资源在这里被分为了两类：react

依赖
- 依赖为外部组件库，多为纯js，开发中不须要变更；
- 这部分使用 esbuild 进行预编译，将组件库的代码从本来的 commonjs 或者 umd 转换为 esm；
源码
- 项目代码等；
- 加载时处理；

Vite 服务只须要在浏览器请求源码时，进行转换并按需提供源码，只有当前页面依赖使用的资源才会处理，实现了真按需加载；一样在热更新时，也仅编译变动部分的文件，同时结合浏览器的缓存机制，使用协商缓存，进一步提高重载的速度；git

经过这种设计思路，Vite 解决了打包工具启动慢、更新慢的问题；github

Vite Demo

下面咱们经过一个例子来感觉下 Vite 的速度，按照下方的命令提示，咱们可使用 Vite 搭建一个 vue 3.0 的项目

提示：这里 node 版本要求 >= 12.0.0

启动项目后，控制台能够看到两个 warn :

这里解释一下：script setup 是 vue 在 RFC 里提交的一份 REF 语法糖的提案，主要做用是：

自动暴露顶级变量，减小代码冗余度
经过 ref：语法让 ref 更高效

这个提案也在社区引发来不小的争议，看下代码中，哪里用到了 setup，这两个组件中使用了，将这里的变量暴露出来，使得 template 能够直接使用，若是你们存在洁癖的话，能够找到代码中的 script setup 进行改写，避免warn 提示。

这样咱们就建立了一个 vue 3 的项目，经过这部分模板生成的代码，咱们也能够看到一些 vue 3 不一样于 vue2 的部分特性:

├── index.html
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── Vite.config.js
复制代码

先从入口文件看：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

复制代码

vue 3 再也不使用 new vue。在以前版本中，使用 new vue 全局会共享一个全局配置，好比作测试、或者三方监控引入时，很容易相互污染覆盖，且没法直接还原。vue 3 增长了 createAPP 这个 api，调用 createApp 会返回一个应用实例，全局范围影响 Vue 行为的 api 都会迁移到应用实例中，避免污染覆盖。固然，若是须要多实例共享的全局配置，能够经过工厂函数包装的形式来实现：

import { createApp } from 'vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const createMyApp = options => {
  const app = createApp(options)
  app.directive('focus' /* ... */)

  return app
}

createMyApp(Foo).mount('#foo')
createMyApp(Bar).mount('#bar')
复制代码

再看HelloWorld.vue:

// src/components/HelloWorld.vue
<template>
  <h1>{{ msg }}</h1>

  <p>
    <a href="https://Vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <button @click="state.count++">count is: {{ state.count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>
复制代码

组件模板中容许组件有多个根元素，同时 $attrs 包含 class 和 style，2.0 中 class style 不属于$ attrs，会应用到组件跟元素，如今能够容许加到任意元素位置，逻辑更加清晰。

支持 JSON、SASS、TS、组件库

Vite 支持 json，并在内部配置了CSS预处理器。对于 JSON 文件可直接引入，css 预处理器只须要安装对应的loader文件，便可。

// JSON 支持
// import the entire object
import json from './example.json'
// import a root field as named exports - helps with treeshaking!
import { field } from './example.json'
复制代码

# sass 支持
# Vite 内置了对 css 预处理器的支持
npm install sass --save-dev
复制代码

Vite 默认支持了 ts，并且 vue 3 不一样于 vue 2 中依靠 flow 进行类型管理，使用了 ts 进行开发，对 ts 的支持更优雅；

其次看下如何支持 UI 库的使用，vue 在取消 new Vue 后，有了应用实例，UI库的挂载也是要挂载到应用实例上。因为 use 全局 API 在 Vue 3 中再也不使用，此方法将中止工做并中止调用 Vue.use() 如今将触发警告。因而，开发者必须在应用程序实例上显式指定使用此插件：

import { createApp } from 'vue'

import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)

app.mount('#app')

复制代码

最后

Vite 做为工具服务里的一名新同窗，浏览器是否支持原生的 ESM 动态导入、崩溃、周边待完善等问题也确实存在。不过在体验下来，Vite 给人呢的感受是速度真的很快，规避不少复杂配置，真正实现了开箱即用，同时可以和 Roolup 共享插件接口，后续的生态会变得很丰富，快收下尤大的这份礼物吧。

参考：

Vue3 官网文档：v3.cn.vuejs.org/guide/migra…introduction.html

Vite 2 官网：cn.Vitejs.dev/

Vite 2 release note ：zhuanlan.zhihu.com/p/351147547

技术胖（Vite 1.x）：jspang.com/detailed?id…

杨村长（备战2021：Vite2项目最佳实践）： juejin.cn/post/692491…

Vite2插件开发指南：zhuanlan.zhihu.com/p/351529474