Vite和Vue3在2022年应该算不上新鲜事物，但应该有很多人和我一样没有接触过这两个“新鲜事物”。这两个（Vite+Vue3）给我的感觉就是完全新鲜的玩具，新时代的潮流。看着手里的webpack+Vue2，不知道会不会像几年前的angularjs+gulp一样成为历史。快到年底了，我有一些空闲时间。快来认识一下被安利多次的全新前端构建工具Vite+全新升级的Vue3吧！先从Vite说起，看看Vite官方的介绍。可见，在本地开发时，Vite使用的是原生ES模块：现代浏览器（如谷歌最新版本）不再需要依赖webpack管理包模块，而是可以拥有与Nodejs一样的模块管理能力，这是原生的ES模块能力。因此，在本地开发时，Vite省略了一些耗时的编译过程，热更新自然也很快。在构建生产产品时，可以构建现代浏览器产品，或者通过Rollup为生产环境输出高度优化的静态资源。——这种高度优化到什么程度，我们可以在后面的文章中讨论。开始使用Vite非常简单，直接运行npmcreatevite@latest命令即可。npmcreate其实就是npminit命令，npminit命令携带包名执行npmexec，也就是执行vite包的默认命令——初始化。输入命令后，需要添加项目名称和技术栈。可以看到有几个技术栈可以选择（如下图）。vite支持的框架有6个，有一半我不知道。vanilla：VanillaJS是一个快速、轻量级、跨平台的JavaScript框架。VanillaJS是世界上最轻量级的JavaScript框架（没有之一）——其实这玩意就是原生JS。Vue/react：这两个不宜过多介绍。preact：React的轻量级替代品。lit：Lit是一个用于构建快速、轻量级Web组件的简单库。（看看语法，这很有趣。）svelte：一个不使用虚拟DOM的库-非常酷。这个库的作者和Rollup的作者是一样的。这里我选择了vue+ts来创建。现在让我们来看看这个新的项目目录是什么样子的。（如下图）和vue-cli初始化的目录有两点不同：index.html入口文件被移到了根目录下。官方的解释是：Vite是开发时的服务器，index.html是Vite项目的入口文件。vite.config.ts替换vue.config.js作为vite项目的配置文件。接下来我们看一下package.json的内容。（下）{"name":"vite-try","version":"0.0.0","scripts":{"dev":"vite","build":"vue-tsc--noEmit&&vitebuild","preview":"vitepreview"},"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"}}从上面可以看出，Vue项目初始化为vite，Vue的版本已经是最新的Vue3.开发依赖也从vue-cli/webpack系列切换到了vite系列。启动项目在体验Vue3的新语法之前，先启动项目看看效果。使用npmi安装依赖后，使用npmrundev启动本地开发模式。刚刚运行项目，启动速度着实让我吃惊。这比Vue2初始化项目启动快多了，一眨眼项目就启动了。当然，从它的介绍我们可以知道，这是因为Vite在本地开发时使用了原生的ES模块，所以过程中不涉及模块编译过程，节省了很多时间。查看本地运行的模块我们先打开控制台，看看我们的html文件。（如下图）从早上可以看出，在html中引入了main.ts，这是我们项目的入口文件。（如下图）从上图可以看出，代码依然是nativeimport，没有进行任何翻译。但是，这里我看到请求的资源，有ts和vue。谷歌浏览器已经支持直接加载ts和vue文件了吗？其实不是，这里的玄机来自文件的响应头——Content-Type，它决定了浏览器如何处理文件。（如下图）如果点击其他.vue文件，可以看到.vue文件还是编译了，变成了浏览器可以识别的js类型，但是模块还是使用原生的ES模块由谷歌浏览器支持。（如下图）让我们看看页面是什么样子的。（如下图）emmmmm，经典的Vue启动页。上图中的两行引起了我的注意：推荐的IDE是vscode+volar。修改components/HelloWorld.vue，测试本地热更新功能。vscode+volarvscode是我写vue一直用的代码编辑器，但是volar是什么？查了一下，原来是一个在vscode中支持vue3语法的插件，可以用于智能语法提示和错误检查。（如下图）果断装一波。——学霸擅长穿梭，差生文具多文档中提到，此插件可能与vetur插件冲突，建议只启用两者之一。（确实如此），所以在一个工作空间中，只打开一个插件以避免冲突。本地热更新接下来我修改components/HelloWorld.vue来测试一下本地热更新功能。其实感觉没必要试，速度肯定很快。修改代码后，保存后瞬间完成热更新，几乎察觉不到。这也与项目规模小有关。对于比较大的项目，修改代码后，需要再次验证热更新的速度。建设项目在当地的发展已经有了经验。现在让我们尝试构建项目并查看产品的外观。可以使用npmrunbuild命令构建该项目。这里发现错误。（如下图）我刚刚初始化了项目，为什么第一次构建的时候会报错？这里可以看出是optionalchainoperator的语法报错了。想了想，应该是node版本的问题。我本地的node版本是v12.20.0，在官方文档中搜索了一下，确实有相关的问题记录。（如下图所示）看来vue+ts的模板依赖的node版本需要高一些。这里我把node的版本切换到v14.15.0，再次运行构建命令，成功了！（如下图所示）最终构建的代码通过Rollup打包。其实我没用过Rollup，先看看它的官方介绍吧。这里主要是理解rollup和webpack的区别。rollup的模块打包能力没有webpack强大，但是它使用了tree-shaking对js文件进行了完整的处理，打包后的js文件会比较“干净”。然后，我们进入dist目录，使用anywhere（一个简单的http服务器）运行项目看看。从上图可以看出，对于vite打包的文件，入口js直接阻塞了DOM渲染线程。不过这两个js文件的文件并不大，一共才53k。当然，随着项目越来越大，这个体积也会越来越大。Vite兼容性问题当一个新的框架上线时，大家更关心的是它的社区活跃度，其次才是兼容性。我们来看看Vite打包后的代码的兼容性。（如下图所示）根据Vite官方介绍，默认配置构建的代码只能支持现代浏览器，即如下。可以修改配置至少支持es2015，也就是ES6（就是IE不支持）。但可以通过插件支持旧版浏览器（如IE11）——@vitejs/plugin-legacy。不过IE11好像是极限了，低版本可能会有问题。因此，如果您对浏览器兼容性有严格要求，请慎用Vite。总结的不错，本次Vite初体验到此结束。使用Vite创建一个新项目，然后修改代码并查看变化。最后，构建项目并在本地预览。用Vite做这一切比较简单，而且速度非常快！我想，我会开始尝试用Vite+Vue3写一些小项目来练习，然后看看有没有合适的生产项目。下次我会谈谈我第一次使用Vue3的经历。欢迎继续关注。最后一点，如果你已经看过这篇文章，希望你在离开前点赞~你的点赞是对作者最大的鼓励，也会让更多人看到这篇文章！如果您觉得本文对您有帮助，请帮忙点亮github上的star，鼓励一下！
