技术创新
首个基于 ESM 构建的 SSR 多服务模块链接。
diff --git a/404.html b/404.html new file mode 100644 index 000000000..76386da0e --- /dev/null +++ b/404.html @@ -0,0 +1,17 @@ + + + +
+ + + + +路径别名允许开发者为模块定义别名,以便于在代码中更方便的引用它们。当你想要使用一个简短、易于记忆的名称来代替冗长复杂的路径时,这将非常有用。
+在 Gez 中,默认使用服务名来作为别名,这样有两个好处。
+程序会读取这里的 name
配置,设置别名为 ssr-module-auth
。
同时还需要在 tsconfig.json
配置别名。
如果你想了解多服务类型如何工作的,可以了解一下 gez release 命令的说明。 +
业务模块,你应该总是使用默认的别名,但是一些第三方包有时需要设置别名,你可以这样做。
+业务模块对外导出时,程序会做一些打包的优化。如果你自定义了业务模块的别名,可能会导致打包出来的内容不正确。
静态资源构建出来的路径,总是以 /${name}/文件路径
。
有时,我们将一套代码部署在不同的国家或地区,允许独立域名访问和二级目录访问。
+你可以根据请求上下文,在给渲染函数传入不同的基本 URL。
+除此之外,业务程序处理静态资产时,还需要手动拼接上基本地址。
+在服务端渲染时,由于 Rspack 的公共路径被写入到一个单例的配置中,是无法实现动态地址的,需要你手动拼接上 base 地址。
一个典型的命令配置。
+你需要手动配置 tsconfig.json 文件,否则执行 build:dts
命令会报错。
+
本地开发时启动。
+如果链接的服务是一个本地的目录,你也可以把该服务跑起来快速的开发调试。
构建生产代码
+有三个产物,分别是 client、server、node。
当前服务如果有对外导出模块时使用。
+gez build
命令,构建生产产物。npm run build:dts
命令,将类型输出到 dist/server/src
目录,本地开发时,可以得到类型提示。gez release
命令,将 dist/client
和 dist/server
目录生成 zip 压缩文件,放到 dist/client/versions
目录中。dist
目录的代码,部署到生产环境中。npm install
命令,触发 postinstall
钩子,再执行 gez install
命令下载可以封装一个 build
命令,将多个命令封装到一起。
+
等同于执行 gez build && gez start
运行生产环境代码
+开发环境中,所依赖的外部服务代码变更,总是会获得热更新,但是在生产环境中是没有热更新的。
如果依赖的服务发布更新了,你需要手动重启一下服务,或者编写一个脚本,监听版本发布来重启服务。
安装远程依赖到本地
+在 postinstall
钩子中,执行 npm install --production
安装生产依赖无效。
+
生产环境如果不允许部署一个 Node 实例,可以在构建阶段就生成客户端渲染的 index.html
文件。
在服务渲染时,返回一个通用的模板即可。
+postCompileProdHook
钩子中,手动执行一次 SSR 渲染,将生成的 HTML 写入到 dist/client/index.html
文件中。dist/client/
目录复制到你的服务器上。postCompileProdHook
钩子会在构建完成后,以生产模式执行构建出来的代码。如果你要生成一个完全静态的网站,也可以在这里实现。
一个大型项目,总是会拆分成组件库、工具库、业务模块等。它们总是会写在不同的地方,以独立的仓库、monorepo 包等形式存在,但是最终都需要系统的主程序链接这些模块。Gez 的核心功能就是帮你把这些不同地方的模块,快速的链接到一起。实现一个服务发布,其它服务同时更新。
+Gez 默认是支持 SSR 的,你也可以把它当成 CSR 来使用。
由于第三方依赖,都被指向到了基础服务,不再需要重复打包,这会让 Rspack 的编译速度,再提升一个台阶。
传统的 SSR 程序在构建目标为 node
时,会将 node_modules
的模块设置为外部依赖,但是 Gez 会把全部代码都打包成 ESM 模块来进行链接。所以在使用一些第三方依赖的时候,尽可能的选择支持 ESM 的包,否则你可能会遇到一些问题。
+构建完成后,通常你可以看到这样的目录结构。
使用 [contenthash]
可以让我们生成基于内容哈希的文件名,这样我们的静态资产文件就可以放心的设置为强缓存了。
+
在服务渲染时注入所有服务的 /[服务名]/importmap.[contenthash].js
文件,将模块的哈希映射信息写入到 globalThis.__importmap__
对象中,最终将该变量值写入到 <script type="importmap"></script>
标签中。
package.json
中有一个 hash
字段,等同于 importmap.[contenthash].js
文件的哈希值。dist/client/package.json
来生成一个静态的 index.html
。可以参考一下 RenderContext 的实现。在开发阶段时,我们可以设置一个远程的依赖地址。
+程序会根据你配置的本地路径,计算出一个所有服务可以共同访问的 node_modules
路径,并自动创建软链接。
在生产环境中,你应该使用本地链接,而不是远程链接,这样能提高应用程序的启动速度。如果你使用 Docker,可以通过使用持久卷,将不同服务的产物组织到一个目录中。 +
配置 postinstall
钩子执行 gez install
命令。在安装开发依赖时,就会将远程依赖下载到你配置的 'root:../ssr-base/dist'
目录中。
这个需要在构建时,提供对应的版本才能下载。更多请查看 gez release 命令说明。 +
基础服务,提供了所有的第三方依赖和基础组件。
+如果一个依赖包,只在 SSR 中使用,那么你应该总是将它放到开发依赖中,这样能显著减少安装生产依赖的大小。
src/entry.node.ts
文件中的 modules.imports
配置添加 ssr-base
。root:
+src
目录的。import Layout from 'ssr-base/src/components/layout.vue'
import utils from 'ssr-base/utils/index'
npm:
+package.json
字段中 devDependencies
配置的依赖名。modules.externals
,将对应的依赖名,指向到 ssr-base/npm/包名
在 package.json
中配置别名。
在 src/entry.node.ts
文件中配置对外导出。
在对应的服务将 query-string
模块链接到你需要的版本。
将登录、注册、验证码、修改密码、找回密码等用户信息认证的业务单独在一个服务中实现,对外导出相关的页面路由地址。
+ssr-base
服务时,项目构建速度总是会非常快,基本上都能在瞬间完成。系统的主程序,负责将不同的业务服务,链接到一起。
+import Layout from 'ssr-base/src/components/layout.vue'
+ssr-base
服务的路由配置文件import routes from 'ssr-module-auth/src/routes
+ssr-module-auth
服务的路由配置文件import Vue from 'vue'
+import Vue from 'ssr-base/npm/vue'
Gez 是 Genesis 迭代的第三个大版本,v1.0 是通过 HTTP 请求来实现的远程组件,v2.0 是通过 Module Federation v1.0
+实现的远程组件。随着主流浏览器都已经支持 ESM,这使得设计一款基于 ESM 的模块链接变成了可能。随着 Rspack v1.0 的发布,提供了对 ESM 更加友好的支持,这使得我们可以将可能变成了现实。于是,我们将 v3.0 版本重命名为 Gez
。
目前社区类微服务的解决方案基本可以分为 iframe、micro-app、module federation 三种代表。其中 iframe 和 micro-app 这种模式只适合对已有的老项目进行缝合,是以降低程序运行效率所做的一种妥协,而 module federation 的接入成本较高,里面又是一个黑盒子,一旦出了问题,都十分难以排查。
+Gez 完全是基于 ESM 模块系统进行设计,默认支持 SSR,每个服务都可以对外导出模块,也可以使用外部模块,整个过程简单透明,能够精准的控制依赖管理。通过 importmap 将多服务的模块映射到具有强缓存,基于内容哈希的 URL 中
+import vue from 'vue'
替换成 ssr-npm/npm/vue.[contenthash].js
,这样静态文件就可以设置为强缓存了。对于不支持 importmap 的浏览器,es-module-shims 提供了降级的方案node --experimental-vm-modules --experimental-import-meta-resolve
来实现它。v3.0
版本。从最早的构思,到开始调研 Vite、Rspack,中间经历了一年多的时间,庆幸的是这条路最终走通了,并且达到了生产可用。
Gez 的定位并不是成为 Next.js 或 Nuxt.js 那样大而全的框架,而是成为一个具有 Typescript、ESM、SSR、模块链接等特性的基础设施,你可以在这个基础上来构建属于你自己的 Next.js
。如果你需要定制化实现,它会很适合你。
所有的主流浏览器都已经支持,针对一些低版本的浏览器,可以提供一个升级的页面来引导用户升级它的浏览器。
+从 v1.0
、v2.0
到现在的 v3.0
,已经走过了将近 5 年的时光,支持起了公司内部数十个业务的项目,并且不断地推动业务项目的升级。
这是一个与框架无关的例子,采用原生的 HTML 来开发项目
+Gez 默认支持 SSR,但是你可以当成 CSR 来使用。 +
在 package.json 文件添加
+总是应该将生产依赖和开发依赖区分,会使 node_modules
在生产环境中更小。
+
安装生产依赖
+安装开发依赖
+在 package.json 文件添加
+你需要手动配置 tsconfig.json 文件,否则执行 build:dts
命令会报错。
+
基本结构
+模拟水合,更新当前时间
+模拟框架的 SSR API,渲染出 HTML 内容返回
+创建一个 web 服务器,来处理客户请求
++浏览器打开:http://localhost:3000
+
Write something to build your own docs! 🎁
你好世界!
++ {"url":"\u002F"} ++ + + + + +
+ Time: 2024-11-05T01:52:25.879Z +