Efficient Front-End Componentization Practices at iQIYI Knowledge Web Team

Componentization is widely recognized as a development mode that improves code reuse and development efficiency. It is applicable to various client types such as mobile, web front‑end, PC, and TV.

The iQIYI Knowledge Web front‑end team combined its business characteristics to explore and practice an efficient front‑end componentization solution.

In the front‑end business development process, code size and logical complexity increase continuously. Componentization aims to improve efficiency, delivering usable, intuitive, and composable business forms.

Industry‑wide front‑end componentization can be divided into three user‑oriented categories:

For operations staff: Low‑code style components that can be assembled like Lego blocks, with custom implementations for special components.

For designers: Direct conversion of design drafts into front‑end code, optionally handing over complex logic to developers.

For developers: Traditional mode focusing on dynamic pages that require back‑end APIs, extracting common components for reuse.

iQIYI Knowledge adopts the third category—developer‑oriented componentization. Reusing components reduces redundant code, decouples functionality and business logic, and enhances extensibility and maintainability.

The business scenario involves many independent projects that must maintain product consistency. Although each project is independent, they share common UI entities (courses, teachers, shops) and generic UI elements (dialogs, loading spinners). To keep UI styles consistent and improve development efficiency, a component extraction strategy is required.

Unlike the mobile side, which groups UI and business logic together (module‑level componentization), the Web side focuses on UI‑level componentization, where logic resides mainly in pages, making UI components highly reusable.

Based on the above background, the Web front‑end set the following goals:

Code reuse and development efficiency by horizontally and vertically splitting components.

Independent development and maintenance of components to decouple from projects.

Clear input/output parameters, validation, and intelligent routing (internal front‑end routing or external location.href).

Comprehensive documentation with online debugging to lower the usage threshold.

The overall design emphasizes managing shared component resources across projects, ensuring maintainability and extensibility. Components are layered and split into two main categories: basic components and business components.

Basic components include UI components (text, image, button, layout, loading, toast) and utility libraries (network requests, telemetry, error reporting, native calls). Business components consist of Item, Card, Block, Functional, and Page components.

Design principles for all components include a unified tech stack, single responsibility, side‑effect‑free behavior, configurability with explicit input/output validation, appropriate granularity, reasonable bundle size, and thorough documentation.

A data protocol was defined to transform back‑end Card data into front‑end Card structures, enabling reuse of Card and Item components across diverse APIs via converters.

UI implementation examples include Course List Item and Course Grid Item, which are composed of the basic Image and Text components.

Technical implementation details:

Basic utility libraries are built with Rollup to produce lightweight ES and UMD bundles.

UI component library uses Vue and Webpack, supporting multiple entry points and on‑demand loading.

Example code for on‑demand import:

import { 
  item40000,
  item40001,
  item40010,
  item40011
} from '@iqiyi-kpp/ui-biz-vue'

To reduce bundle size, the team uses @babel/runtime, disables core‑js in plugin‑transform‑runtime, employs Babel for JS bundling, and leverages Webpack externals to share third‑party dependencies.

Documentation is built with Storybook, providing a dynamic UI component site with online debugging and versioned component display.

In summary, the iQIYI Knowledge Web front‑end component library has achieved its componentization goals: independent development, testing, and publishing; high reuse across projects; and improved maintainability. Ongoing challenges include managing the growing number of business components, supporting on‑demand loading, controlling bundle size, and ensuring automated testing and CI/CD (e.g., Jenkins) for reliable releases.