关于vue.js:Vite-20版本发布都有哪些新特性

1次阅读

共计 1692 个字符，预计需要花费 5 分钟才能阅读完成。

新年还没过完，Vite 就公布了 2.0 版本，不得不拜服尤大大。

Vite（法语意思是“快”，发音为 /vit/，相似 veet）是一种全新的前端构建工具，你能够把它了解为一个开箱即用的开发服务器 + 打包工具的组合，然而更轻更快。Vite 利用浏览器原生的 ES 模块反对和用编译到原生的语言开发的工具（如 esbuild）来提供一个疾速且古代的开发体验。
Vite 由两个次要局部组成：

一个通过本机 ES 模块提供源文件的开发服务器，具备丰盛的内置个性和快得惊人的热模块替换 (HMR)。
一个构建命令，它将代码与 Rollup 捆绑在一起，后者事后配置为输入用于生产的高度优化的动态资产。

除此之外，Vite 通过其插件 API 和 JavaScript API 具备高度的扩展性，并提供全面的类型反对。

Vite 有多快呢？在 Repl.it 上从零启动一个基于 Vite 的 React 利用，浏览器页面加载结束的时候，CRA（create-react-app）甚至还没有装完依赖。如果你还没听说过 Vite 到底是什么，能够理解一下我的项目的设计初衷。

相比去年公布的 1.0 版本，Vite 2.0 算得上上第一个稳固版本，此版本带来了多处大的改良。

Vite 一开始次要重视于 Vue 的单文件组件反对，但 2.0 基于之前的教训提供了一个更稳固灵便的外部架构，从而能够齐全通过插件机制来反对任意框架。当初 Vite 提供官网的 Vue, React, Preact, Lit Element 我的项目模版，而 Svelte 社区也在开发 Vite 整合计划。

Vite 2.0 受 WMR 的启发采纳了基于 Rollup 插件 API 的设计。很多 Rollup 插件能够跟 Vite 间接兼容。插件能够在应用 Rollup 插件钩子之外应用一些额定的 Vite 特有的 API 来解决一些打包中不存在的需要，比方辨别开发 vs 打包，或是自定义的热更新解决。

除此之外，Vite 的 JS API 也失去了大幅改良 – 曾经有不少用户在开发基于 Vite 的下层框架，Nuxt 团队也曾经在 Nuxt 3 中验证了初步整合的可行性。

因为 Vite 是一个基于原生 ESM 的开发服务器，在启动时咱们须要通过依赖预打包来达成两个目标：1. 缩小模块 / 申请数量；2. 反对 CommonJS 依赖。预打包只有在依赖变动时才须要执行，但在有大量依赖的我的项目中，每次执行还是可能会须要很长时间。

Vite 之前是应用 Rollup 来执行这个过程，在 2.0 中咱们切换到了 esbuild，使这个过程放慢了几十倍。冷启动一个之前须要将近 30 秒预打包的我的项目当初只须要不到两秒！从 webpack 或其它打包工具迁徙到 Vite 应该也会有相似的速度改善。作为参考，咱们能够应用 React Meterial 我的项目进行验证。

Vite 将 CSS 视为 module 的 First-class，并反对以下开箱即用的性能：

强化门路解析：CSS 中的 @import 和 url() 门路都通过 Vite 的门路解析器来解析，从而反对 alias 和 npm 依赖。
主动 URL 改写：所有 url() 门路都会被主动改写从而确保在开发和构建中都指向正确的文件门路。
CSS 代码宰割：构建时每一个被宰割的 JS 文件都会主动生成一个对应的 CSS 文件，并且两个文件会被主动并行按需加载。

Vite 提供一个灵便的 API 来在 Node.js 中高效率地间接加载 ESM 源码（并且同样有精准的更新而不须要打包），并主动内部化 commonjs 兼容的依赖关系，以进步开发和 SSR 构建速度。生产环境下，服务器能够和 Vite 齐全解耦，基于 Vite SSR 的架构也能够很不便的做动态预渲染（SSG)。

Vite 默认只反对原生反对 ESM 的古代浏览器，但能够通过官网的 @vitejs/plugin-legacy 来反对旧浏览器。legacy 插件会主动额定生成一个针对旧浏览器的包，并且在 html 中插入依据浏览器 ESM 反对来选择性加载对应包的代码（相似 vue-cli 的 modern mode）。

参考：
Vite 1.0 迁徙至 Vite 2.0 的阐明

正文完