基于 React 的应用研发框架，开箱即用，同时支持移动端和桌面端

开箱即用的研发框架，内置工程配置、状态管理、数据请求、权限管理等最佳实践，让开发者可以更加专注于业务逻辑。

特性

开箱即用：TypeScript/Webpack5/CSS Modules/Mock/SSR，各种方案 All in One
贴合业务的最佳实践：目录规范、代码规范、路由方案、状态管理、数据请求等
多种应用模式：支持服务端渲染 SSR 以及静态构建 SSG
强大的插件能力：官方所有能力都通过插件实现，业务可以通过插件扩展各种能力
丰富的领域方案：微前端 ICESTARK、一体化方案等

数据加载

「设计理念」：在传统的编码模式下，数据请求一般在组件内部发起，依赖于业务 Bundle 的加载解析执行，整个过程是串行、阻塞的。而在 ice.js 中，页面的数据请求会由框架（或容器）统一发起，和业务 Bundle 的加载解析是并行、不阻塞的。常规的 React 应用，一般都会在组件首次 useEffect 时发起数据请求。这种组织方式，数据请求会在页面完成首次渲染后才发起，请求的时机是非常滞后的。

src/pages/index.tsx
import { useState, useEffect } from 'react';

export default function Home() {
  const [data, setData] = useState();

  useEffect(async () => {
    const data = await fetch('https://example.com/api/xxx');

    setData(data);
  }, [])

  return (
    <>
      <div>Hello ICE</div>
      <div>{JSON.stringify(data)}</div>
    </>
  );
};

在 ice.js 中，我们推荐将页面的的数据请求和 UI 实现解耦，通过 dataLoader 来定义页面的数据请求。示例：

src/pages/index.tsx
import { useData, defineDataLoader } from 'ice';

// 页面组件的 UI 实现
export default function Home() {
  const data = useData();

  return (
    <>
      <div>Hello ICE</div>
      <div>{JSON.stringify(data)}</div>
    </>
  );
};

// 页面的数据请求
export const dataLoader = defineDataLoader(async () => {
  const data = await fetch('https://example.com/api/xxx');
  return data;
});

通过 dataLoader 导出的数据请求，会由框架在进入页面时发起，和业务 Bundle 的加载解析是并行的。在支持预请求的容器下（例如 PHA），数据请求还可以被进一步的提升为预请求。

同一个项目，两种不同写法，数据请求发起时机的差异对比如下（测试环境 chrome slow 3G)：

服务端渲染 SSR

服务器渲染，简称 SSR (Server Side Rendering)，是一种在服务端运行 Node.js 程序动态生成 HTML 的渲染方式。SSR 相比传统在浏览器端渲染的模式(CSR)，受设备性能和网络情况的影响更小，可以达到更好的性能体验和 SEO 能力。

开启 SSR

在 ice.config.mts 中，增加如下配置：

ice.config.mts
import { defineConfig } from '@ice/app';

export default defineConfig(() => ({
  // ...
  ssr: true,
}));

数据请求

开启 SSR 后，路由组件中导出的 dataLoader 方法将优先在 Server 端执行，如果 SSR 渲染成功，在 Client 端将不会再次调用 dataLoader，而会复用 SSR 的结果。当页面在浏览器侧通过路由跳转，或页面降级时，才会在 Client 端调用 dataLoader。

src/pages/foo.tsx
import { useData, defineDataLoader, defineServerDataLoader } from 'ice';

// 同构的数据请求
export const dataLoader = defineDataLoader(async () => {
  if (isClient) {
    return await fetch('https://example.com/api/xxx');
  } else if (isServer) {
    return await fetchDataAtServer();
  }
});

如果确实需要为 Server 端指定不一样的数据请求方式，可以通过定义 serverDataLoader 来实现。

开发环境

Node.js

开发前端应用前需要安装 Node.js，并确保 node 版本是 14.x 或以上。推荐使用 nvm（Windows 下使用 nvm-windows）或者 fnm 来管理 node 版本。下面以在 mac 下安装 nvm 为例：

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# 安装 node 14 版本
$ nvm install 14
# 使用 node 14
$ nvm use 14
# 验证 node 是否安装成功
$ node -v
v14.19.3

包管理工具

安装 Node.js 后，默认会包含 npm。除此以外，还有其他的包管理工具，示例安装 pnpm 示例如下：

$ npm i pnpm -g --register=https://registry.npmmirror.com/
# 验证 pnpm 是否安装成功
$ pnpm -v
7.1.7

如果经常需要切换 npm 镜像源，推荐使用 nrm 进行管理：

$ npm install -g nrm
# 验证 nrm 是否安装成功
$ nrm --version
# 查看所有镜像源
$ nrm ls
# 推荐使用淘宝镜像源
nrm use taobao

传送门

开源协议：MIT

开源地址：https://github.com/alibaba/ice

项目合集：https://github.com/RepositorySheet

-END-

原文始发于微信公众号（开源技术专栏）：基于 React 的应用研发框架，开箱即用，同时支持移动端和桌面端

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/166819.html