乐趣区

关于vite:Vite-Vue3-初体验-Vite-篇

jiezi

Vite 和 Vue3 在 2022 年应该不算个新事物了，但应该也有很多像我一样还没有接触过这两个“陈腐玩意”的。

这两样（Vite + Vue3）给我的感觉是完完全全的陈腐玩具，是新时代的潮流。

看着手里的 webpack + Vue2，想着会不会像几年前的 angularjs + gulp 一样，成为历史。

邻近年关，也有了一些空闲工夫，来认识一下被人安利屡次的新型前端构建工具 Vite + 全新降级的 Vue3 吧！

从 Vite 开始

先来看看 Vite 的官网介绍吧。

能够看出，在本地开发时，Vite 应用了 原生 ES 模块 ：古代浏览器（比方最新版谷歌）曾经不须要依赖 webpack 治理包模块，而是能够和 Nodejs 一样具备模块治理能力，这就是 原生 ES 模块 能力。

所以，在本地开发时，Vite 省略了一些耗时的编译过程，热更新天然快。

在构建生产产物时，能够构建古代浏览器产物，也能够通过 Rollup 输入生产环境的高度优化过的动态资源。—— 这个高度优化到什么水平，咱们能够在前面的文章里去探讨一下。

上手

Vite 的上手应用很简略，间接运行 npm create vite@latest 命令即可。

npm create 其实就是 npm init 命令，而 npm init 命令带上包名执行的就是 npm exec，也就是执行 vite 包的默认命令 —— 初始化。

输出命令后，须要增加项目名称和技术栈，能够看到可供选择的技术栈有这么几种（如下图）

vite 反对的框架有 6 种，有一半我都不意识。

  • vanilla：Vanilla JS 是一个疾速、轻量级、跨平台的 JavaScript 框架。Vanilla JS 是世界上最轻量的 JavaScript 框架（没有之一）—— 其实这玩意就是原生 JS。
  • vue/react：这两个应该不必过多介绍了吧。
  • preact：React 的轻量级代替计划。
  • lit：Lit 是一个简略的库，用于构建疾速、轻量级的 Web 组件。（看了一眼语法，感觉还挺好玩的。）
  • svelte：一个不应用 Virtual DOM 的库 —— 真酷。这个库的作者和 Rollup 的作者是同一人。

这里我选了 vue + ts 进行创立。

当初来看看，这个新建的我的项目目录长啥样吧。（如下图）

和用 vue-cli 初始化的目录有两处不同：

  1. index.html 入口文件被移到了根目录下。官网解释是：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 我的项目的入口文件。
  2. vite.config.ts 代替了 vue.config.js，作为 vite 我的项目的配置文件。

接下来，咱们看看 package.json 的内容吧。（如下）

{
  "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"
  }
}

从下面能够看出，应用 Vite 初始化的 Vue 我的项目，Vue 的版本曾经是最新的 Vue3 了。而开发时依赖也从 vue-cli/webpack 系列切换到了 vite 系列。

启动我的项目

在体验 Vue3 新语法之前，先把我的项目启动，看看成果吧。

在应用 npm i 装置完依赖后，应用 npm run dev 即可启动 本地开发 模式了。

刚运行我的项目，启动速度着实让我吃了一惊。

这比 Vue2 初始化的我的项目启动也快太多了，刚一眨眼我的项目就曾经启动了。

当然，咱们从它的介绍能够得悉，这是因为在本地开发时，Vite 应用了 原生 ES 模块，所以期间没有波及模块编译过程，节约了不少工夫。

查看本地运行的模块

咱们关上控制台，先看看咱们的 html 文件。（如下图）

从上午能够看出，html 中引入了 main.ts，也就是咱们这个我的项目的入口文件。（如下图）

从下面这张图能够看出，代码还是原生的 import，没有通过任何转译。

然而，在这里我看到申请的资源，有 ts 还有 vue。

难道谷歌浏览器曾经反对间接加载 ts 和 vue 文件了吗？其实并不是，这里的奥秘之处来自于文件的响应头 —— Content-Type，这决定了浏览器以什么样的形式解决该文件。（如下图）

如果你点开其余 .vue 文件能够看出，.vue 文件还是通过编译，成为了可供浏览器辨认的 js 类型，但模块还是应用了谷歌浏览器反对的 原生 ES 模块。（如下图）

咱们来看看页面长啥样吧。（如下图）

emmmmm，经典的 Vue 启动页。

上图的两行话引起了我的留神：

  1. 举荐应用的 IDE 是 vscode + volar。
  2. 批改 components/HelloWorld.vue 来测试本地热更新性能。

vscode + volar

vscode 是我始终用于写 vue 的代码编辑器，可 volar 是啥呢？

查了一下，原来是 vscode 中用于反对 vue3 语法的一个插件，能够用于智能语法提醒和谬误查看。（如下图）

果决装置一波。—— 学霸一把梭，差生文具多

文档中提到了，该插件可能会和 vetur 插件有抵触，倡议两者只开启一个。（的确如此），所以在一个工作区内的话，只开一个插件吧，防止抵触。

本地热更新

接下来，我来批改 components/HelloWorld.vue 测试一下本地热更新性能。

其实感觉不必试，速度必定很快。

批改代码后，保留的一瞬间就热更新实现了，简直是感觉不到的。

这跟我的项目小也有关系，对于比拟大的我的项目，批改代码当前，热更新的速度如何，还须要再验证。

构建我的项目

本地开发曾经体验过了，当初来构建我的项目试试吧，看看产物长啥样。

应用 npm run build 命令能够构建我的项目。这里发现有个报错。（如下图）

我这是刚初始化的我的项目，怎么第一次构建就报错了呢？

这里看出报错是 可选链操作符 语法的报错，想了一下应该是 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 不反对）。

然而能够通过一个插件 —— @vitejs/plugin-legacy 来反对传统浏览器（比方 IE11）。不过，IE11 如同也就是它的极限了，更低的版本可能会呈现问题。

所以，如果你对于浏览器兼容要求比拟严格的话，请审慎应用 Vite。

小结

好了，到这里，这次 Vite 的初体验，到这里就完结了。

用 Vite 新建一个我的项目，而后批改代码，查看变更。最初，构建我的项目，本地预览。

这所有用 Vite 来做还是比较简单的，而且 很快！

我想，我会开始尝试用 Vite + Vue3 去写一些小我的项目练手，而后再看看有没有适宜它的生产我的项目。

下次我再来聊聊我应用 Vue3 的初体验，欢送大家继续关注。

最初一件事

如果您曾经看到这里了，心愿您还是点个赞再走吧~

您的点赞是对作者的最大激励，也能够让更多人看到本篇文章！

如果感觉本文对您有帮忙，请帮忙在 github 上点亮 star 激励一下吧！

退出移动版