ice.js 3 Framework Overview and New Features

ice.js 3 is a multi‑terminal application framework from Alibaba’s Taobao technology team, evolving the earlier ice.js versions that focused on PC/back‑office projects to now support PC, wireless, and mini‑programs.

The framework stresses both developer experience and user experience, delivering a range of technical solutions:

Multi‑terminal development : supports PC, wireless, and mini‑programs with a unified development model.

New runtime : built on React 18 and react‑router 6, offering a smaller bundle size and easier runtime customization.

Performance optimization : includes a new SSR design, data request capabilities, resource pre‑loading, and parallel loading of page assets.

Improved developer experience : integrates native front‑end toolchains such as SWC and esbuild, provides rich ecosystem plugins, and switches default configuration from build.json to ice.config.mts .

Key technical highlights include:

• Consistent cross‑project setup via built‑in plugins (code snippet shown below).

• Out‑of‑the‑box capabilities for SPA, micro‑frontend, data fetching, state management, permission handling, and KeepAlive.

• Compatibility layer for Rax modules, allowing seamless migration of existing assets.

Example configuration for mini‑app development:

import { defineConfig } from '@ice/app';
import miniapp from '@ice/plugin-miniapp';

export default defineConfig({
  plugins: [
    miniapp(),
  ],
});

Mini‑app manifest example:

// src/app.ts
export const miniappManifest = {
  window: {
    defaultTitle: 'miniapp test',
  },
};

Data loading API (SSR/SSG support):

import { defineDataLoader, useData } from 'ice';

export default function Home() {
  const data = useData();
  return
{data.title}
;
}

export const dataLoader = defineDataLoader(
  () => fetch('https://api.github.com/repos/alibaba/ice')
);

Client‑only rendering example:

import { ClientOnly } from 'ice';

export function Home() {
  return (
loading...
}>
      {() =>
page url is {window.location.href}
}
);
};

Custom configuration with type hints:

import { defineConfig } from 'ice';

export default defineConfig(() => {
  plugins: [
    minify: false,
    {
      name: 'custom-plugins',
      setup({ onGetConfig }) {
        onGetConfig(() => {});
      },
    },
  ],
});

The framework also integrates with Midway FaaS for low‑cost SSR deployment and plans to support cloud platforms such as Alibaba Cloud and Vercel.

Future directions include exploring React Streaming and Server Components, further unifying pre‑request patterns across terminals, and continuously optimizing the developer experience with native toolchains.