ssr框架6.0正式发布，更丝滑的vite ssr体验
最新回答
灼热感
2021-06-01 14:41:27
快速开始：在React或Vue3环境中接入Vite，若在Vue2环境中受限于vite-plugin-vue2，可手动在config.ts中添加isVite选项以固定启动模式。完成此步骤后，即可利用Vite实现极快的开发速度。
框架背景：了解ssr框架详情请参阅相应文章。在5.x版本中，采用服务端bundle走Webpack编译，客户端文件走Vite SSR架构，旨在最小化代码改动。现今，Vite在5.x版本中解决了不少不成熟之处，作者也深入研差坦究了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启动时间包括初始化模块加载、编译服务端/客户端bundle以及Midway启动；Vite启动时间更短，仅包含更少的初始化模块加载以及Midway启动。
应用结构：应用结构示意图简洁明了。Vite SSR结构示意图展示了服务端与客户端的vite配置分离，不直接暴露配置，而是通过框架统一配置项提供。
开发建议：Vite/Rollup缺乏Webpack-Chain这样的模块来生斗磨成配置，导致用户配置容易覆盖框架默认配置。目前框架开放少量配置供自定义，未来将不断完善。开发者可选择多种开发构建组合方式，只需避免使用特定平台运行的代码。Vite底层的Rollup在构建应用时有局限性，但生产环境构建支持成功。后续版本将优化构建差异。
踩坑记录：在开发Vite SSR时遇到问题，包括CommonJS的干掉、第三方模块必须显示添加到dependencies或手动external、分成两个vite配置以区分服务端与客户端配置、manifest-plugin及MagicComment的缺失。这些问题影响了代码执行，需要在配置中特别注意。
升级步骤：对于使用5.x版本的开发者，升级至SSRv6.0无需破坏性变更，仅需移除5.0版本的vite.config文件，保持与之前相同的开发习惯。
热门标签
