ssr v7版本介绍

在 ssr@v7 版本中，我们带来了以下新的features

• 同时支持 Rspack , Rolldown-Vite, Webpack , 三种构建工具来极大的加快构建性能。
• 支持任意前端框架与任意构建工具结合使用
• 全新的依赖设计，精简初始化安装需要的依赖项
• 渐进式升级，几乎没有 breaking change, v6项目可平滑过渡到v7

v7 版本实测构建速度可提升5-10倍。依赖体积缩小2/3(使用 Rspack|Rolldown-Vite 的场景)。

使用最新的 create-ssr-app 来根据提示初始化v7(推荐)或v6的项目模版。

$ npm init ssr-app@latest my-ssr-project

> npx
> create-ssr-app my-ssr-project

? Select ssr framework version (v6 or v7): › - Use arrow-keys. Return to submit.
❯   v7(Recommend, Support Rspack, Rolldown-Vite, Webpack@4)
    v6(Support Webpack@4, Vite@2)

详细介绍

在 v7 中，我们把不同的构建工具的构建逻辑以及相关依赖拆成独立的分包

• ssr-vite
• ssr-rspack
• ssr-webpack

开发者在创建模版的时候，选择对应的构建工具，生成的模块只会包含对应的构建工具的依赖。当然，开发者后续可以根据自己的需要，随时添加新的构建工具。只需要安装对应的依赖即可。

同时在启动命令上，需要指定对应的构建工具。如果不指定，默认是 webpack 。命令格式如下

$ npx ssr start --tool rspack
$ npx ssr build --tool vite

从 v6 升级

根据个人的经验，从 v6 默认模版升级几乎不需要任何改动。如果当前项目自定义配置跟 v6 使用的构建工具强绑定则可能需要修改一些配置。

依赖版本升级

首先需要将所有 ssr 框架相关的依赖升级到 v7 的版本。

"dependencies": {
  "ssr-common-utils": "^7.0.0",
  "ssr-core": "^7.0.0",
},
"devDependencies": {
  "ssr": "^7.0.0",
  "ssr-plugin-midway": "^7.0.0",
  "ssr-plugin-react": "^7.0.0",
  "ssr-types": "^7.0.0"
}

然后根据需要，选择合适的构建工具依赖添加进来

"ssr-webpack": "^7.0.0",
"ssr-rspack": "^7.0.0",
"ssr-vite": "^7.0.0",

接着替换启动命令

$ npx ssr start --tool rspack
$ npx ssr build --tool vite #v6版本启动命令是 ssr start --vite.v7已废弃

在 config.ts 文件配置上， vite 场景的配置 v6与v7完全一致。只需要考虑当前项目使用的 vite 插件能否正常在 Rolldown-Vite 中使用即可。

webpack 场景与 rspack 场景使用的配置也几乎是共享的。例如都是使用 chainBaseConfig , chainClientConfig 和 chainServerConfig 来修改构建配置。开发者可以通过泛型来手动声明 chain 具体要使用的类型是 webpack-chain 还是 rspack-chain. 默认是两者的联合类型

例如下面这样指定泛型是 rspack 后 .type('css') 这种语法就不会类型报错

import type { UserConfig } from 'ssr-types'

const userConfig: UserConfig<'rspack'> = {
	chainBaseConfig: (config) => {
		config.module
			.rule('js')
			.test(/\.css$/)
			.type('css')
	}
}

export { userConfig }

大的区别是在 rspack 场景按照官方的最佳实践移除了 css-loader , postcss-loader 以及 file-loader 等相关的构建逻辑，默认场景 ssr 框架在 rspack 模式下只会注册 less-loader的处理逻辑。其余场景使用 rspack 内置的 asset 逻辑来处理。如果开发者有其他需求需要集成 postcss-loader 的逻辑，例如需要使用 tailwindcss 。需要自行通过 chain 来添加这些构建逻辑。可以参考该教程使用tailwind.css

目前文档关于 v7 的介绍还比较少，如果你遇到任何问题，欢迎提交 issue 或 pr 来帮我们一起完善它。

我们的目标是做地球上最优秀，最简单好用的 ssr 框架。如果你觉得此项目对你有帮助。欢迎捐赠为 ssr 框架做出一份贡献。