Why IceJS 2.0 Is Revolutionizing Frontend Development with Vite and Webpack

What Is IceJS?

IceJS is a progressive React‑based development framework released by Alibaba’s ICE team in February 2020. It powers thousands of internal projects and community users, with over 400 repositories built daily inside Alibaba.

Why Use IceJS?

Consistency across projects : Built‑in features and plugin architecture ensure uniform development practices for large teams.

Out‑of‑the‑box capabilities : Provides ready‑to‑use configurations for TypeScript, CSS Modules, MPA/SPA/micro‑frontend modes, and more.

Low‑cost business integration : Complex features like SSR, SSG, and PWA are simplified, reducing implementation effort.

While frameworks add abstraction, they also introduce constraints, making developer experience a key challenge.

IceJS 2.0 Highlights

After more than 70 releases, IceJS 2.0 embraces two major industry trends: ES‑module‑based bundle‑less development and Rust/Go‑powered toolchains.

Vite mode : Supports ES modules via Vite while keeping configuration parity with Webpack.

Webpack 5 : Upgraded to Module Federation, Cache, and other modern features.

SWC & esbuild : Experimental replacement for Babel and Terser, boosting compilation speed.

Enhanced solutions : State management, request library, environment config, micro‑frontend, SSR, new SSG, PWA, keep‑alive, etc.

New documentation : Built with Docusaurus for better SEO, dark mode, search, and mobile experience.

Quick project creation supports multiple templates via CLI:

<code>$ npm init ice icejs-example</code><code># also works with yarn</code><code>$ yarn init ice icejs-example</code>

Use cnpm or a domestic npm registry for faster dependency installation.

AppWorks, a visual project creator, is available as a VS Code extension.

Vite Mode Details

Vite mode leverages ES‑module support and default enables it in the official scaffolding. Configuration remains unified through

build.json

, supporting

publicPath

,

alias

, etc., while abstracting differences via

webpack-service

and

vite-service

. The

wp2vite

tool converts Webpack config to Vite automatically.

Performance tests on a complex project show Vite reduces first‑start time by ~50% compared to Webpack, while hot‑module replacement is over ten times faster, staying under 100 ms regardless of project size.

Webpack Mode Enhancements

IceJS 2.0 continues to support existing Webpack projects, upgrading the core to Webpack 5. Cache improves hot‑start speed by ~5×, and React Fast Refresh reduces hot‑update time by ~30%.

Module Federation enables pre‑building dependencies as a remote, cutting bundle time and improving hot‑restart by ~60%.

SWC Integration (Experimental)

SWC, written in Rust, replaces Babel for faster compilation and also serves as the minifier, yielding ~50% faster compilation and ~35% faster compression. However, custom Babel plugins are not fully supported yet.

Additional New Features

Micro‑frontend + ESM : The related icestark framework now supports ESM‑based micro‑apps via

loadScriptMode: import

.

SSG aligned with SSR : Simple

build.json

flag

{ "ssr": "static" }

generates static HTML for each route while preserving SSR data fetching.

Stable dependency management : Over 70 community NPM packages are pre‑bundled to avoid breakage from upstream updates.

Future Directions

Full SSR/SSG support in Vite mode.

Better alignment of Vite and Webpack capabilities, especially static asset handling.

Unified AST transformation in Vite, potentially replacing Babel with SWC.

IceJS aims to provide a lightweight, full‑stack JavaScript development experience, integrating server‑less back‑ends and supporting Node.js deployment for smaller teams.

About the ICE Team

The ICE team belongs to Alibaba’s front‑end architecture group, maintaining IceJS, AppWorks, and related projects. More information and community links are available on their GitHub and official sites.