Ice.js — Progressive React Application Framework by Alibaba

Introduction

Ice.js is a React-based progressive application framework developed and maintained by Alibaba. It provides an opinionated project structure with file-system routing, data loading conventions, and a rich plugin ecosystem to accelerate enterprise frontend development.

What Ice.js Does

• Provides file-system-based routing with nested layouts and data loaders
• Supports SSR, SSG, and CSR rendering modes from a single codebase
• Ships built-in state management via a lightweight store solution
• Offers a plugin system for extending build, runtime, and development features
• Generates optimized production bundles with code splitting and tree shaking

Architecture Overview

Ice.js is built on top of Webpack and Vite as selectable build backends. The framework follows a convention-over-configuration model where page files in the src/pages directory automatically become routes. Data loading functions co-locate with page components. Plugins hook into both the build pipeline and the runtime lifecycle, enabling features like authentication guards, micro-frontend integration, and custom middleware.

Self-Hosting & Configuration

• Scaffold a new project with npm init ice and choose a template
• Configure build options, plugins, and proxy settings in ice.config.mts
• Select between Webpack and Vite as the bundler via configuration
• Deploy SSR output to any Node.js server or use the built-in adapter for serverless platforms
• Enable micro-frontend mode with the @ice/plugin-icestark plugin for gradual migration

Key Features

• Convention-based routing with automatic code splitting per route
• First-class SSR and SSG support with streaming rendering
• Integrated data loading with caching and preloading strategies
• Extensible plugin system with official plugins for auth, store, request, and more
• Proven at scale across hundreds of internal Alibaba applications

Comparison with Similar Tools

• Next.js — the dominant React framework with Vercel hosting integration; Ice.js offers similar conventions with deeper plugin extensibility and Chinese ecosystem integration
• Remix — focuses on web standards and progressive enhancement; Ice.js provides more opinionated defaults for enterprise workflows
• UmiJS — another Alibaba-backed framework with a similar plugin model; Ice.js is lighter weight with a React-specific focus
• Vite + React — unopinionated and fast; Ice.js adds routing, SSR, and data conventions on top

FAQ

Q: Is Ice.js only for Chinese companies? A: No. The framework is open source with English documentation and works for any React project, though it is especially popular in Chinese enterprise environments.

Q: Can I use Ice.js with TypeScript? A: Yes. TypeScript is a first-class citizen with full type safety for routes, data loaders, and configuration.

Q: Does Ice.js support micro-frontends? A: Yes. The @ice/plugin-icestark plugin enables micro-frontend architecture for incremental adoption.

Q: How does Ice.js compare in bundle size to Next.js? A: Both produce comparable output sizes. Ice.js uses aggressive tree shaking and its runtime is lightweight.

Sources

• https://github.com/alibaba/ice
• https://v3.ice.work/