Vite
本章介绍如何在 ssr 框架中使用 Vite 作为开发工具
5 分钟了解 Vite
Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
- 一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。
从上述来自官方文档的描述中，我们可以很清晰的知道，Vite本质上就是一种构建工具，它在开发环境里主要充当一个基于原生 esm 的开发服务器的角色，在生产环境则使用一套基于 rollup 的构建指令负责生产环境的打包工作。因此，vite 的大部分优势主要都体现在开发环境。
既然是构建工具，为啥不继续用 Webpack 呢？
快！Vite能够在开发服务器启动时长和热更新响应速度上给你一个 surprise！一旦你体验到 Vite 有多快，我们十分怀疑你是否愿意再忍受像曾经那样使用打包器开发。
通过下面的命令，你可以快速的进行基于Vite的 vue 开发体验，想要更多了解有关 Vite 的内容，可以前往Vite 官方文档。
SSRv6.0 + Vite
本章介绍 ssr 框架 6.0 版本全新的 Vite SSR 体验
快速开始
在 React/Vue3 场景中我们都已经以最小化成本的方式接入 Vite。在 Vue2 场景中，由于 vite-plugin-vue2 的限制，我们暂时无法使用 vite ssr。
$ npm init ssr-app my-ssr-project # 如需要使用 Vite 这里可以选择创建 React/Vue3 类型的应用
$ cd my-ssr-project && yarn
$ npx ssr start --vite # 等价于 npm run start:vite
$ npx ssr build --vite # 等价于 npm run build:vite
$ npm run prod:vite # 生产环境启动
也可以在 config.ts 中显式的添加 isVite 选项来固定启动模式
// 添加后无需 ssr start/build 新增 --vite 参数
import type { UserConfig } from 'ssr-types'
const userConfig: UserConfig = {
isVite: true
}
export { userConfig }
完成上述步骤即可使用 Vite 作为构建工具体验极快的开发速度
框架背景
前言
在 5.x 版本的 ssr 框架中，当时出于开发时间限制以及改动成本的关系，我们采用的方案是服务端 bundle 走 Webpack 编译，客户端文件走 Vite 服务的 vite ssr 这样的架构模式，来保证最小化代码的改动。现在看来当时的决定是非常正确的，确实 vite ssr 在那个时候有不少不成熟的地方也在这段期间中被 Vite 官方团队逐一的解决，并且本人也在这段开发期间深度阅读了 vite ssrloadModule 这块的源码对它的运行机制有了更深刻的了解。也在这个过程中尝试对 Vite 做了一些微小的贡献。在这里感谢 Vite 团队的付出和及时的响应。
现状
那么，在 6.0 版本的 ssr 框架中，我们做到了 All in Vite，也就是提供了全套只使用 Vite 作为开发工具的开发链路来体验极快的启动速度。同时我们分离了 Webpack 与 Vite。也就是说开发者可以任意的选择喜欢的工具。
开发者可以选择 ssr/csr + 本地开发 Webpack/Vite + 生产环境构建 Webpack/Vite + Midway/Nest.js 这样的任意组合方式。同时我们在新增功能的保持对代码行数的克制，使得框架总代码量在没有刻意优化的情况下仍然保持在 6000行 左右单前端框架场景在 2500 行左右。
那么先让我们用动图看看分别用 Webpack/Vite 启动的速度差别吧。如果图片动不了，请使用 Chrome 浏览器打开网页
Webpack 启动
启动时间 = 初始化模块加载 + 编译服务端/客户端 bundle 时间 + Midway 启动时间
Vite 启动
启动时间 = 更少的初始化模块加载 + Midway 启动时间
开发建议
由于 Vite/Rollup 没有 Webpack-Chain 这样的模块来生成配置，目前只能用一些比较笨的方式来 Merge 用户自定义配置。所以容易造成用户配置覆盖框架默认配置的情况。所以目前框架只会开放少量配置让用户自定义配置。在之后我们会不断完善这一块。
正如上文所说的，开发者有多种开发构建组合方式。只要不使用只能够在特定平台运行的代码例如 import.meta.env/module.hot 这些代码，那么你的代码在 Vite/Webpack 模式下都能够本地运行，生产环境构建成功。所以不建议开发者使用只能在特定工具下运行成功的代码以及配置。框架将会在之后将不同的工具的配置进行打平，抛出一个共同使用的配置项供开发者使用。
