Front‑End Performance Optimization for iQIYI Video Production Smart Cloud Platform

The iQIYI video production smart‑cloud platform underwent a major upgrade this year. The front‑end team replaced the three‑year‑old Arm.js + Java BFF + Velocity stack with a modern Vue.js + Node.js BFF architecture.

The new single‑page application now contains more than ten business modules, each lazy‑loaded via routing, and third‑party libraries are split into a separate vendor bundle. However, early users reported noticeable white‑screen delays of several seconds compared with the previous version.

Problem analysis

Three main performance bottlenecks were identified:

Resource loading – redundant modules, lack of compression/merging, inefficient caching, and excessive number of generated chunks.

Page rendering – long main‑thread tasks, heavy algorithms, memory leaks, and missing skeleton screens.

API response speed – slow backend services, unnecessary serial calls, and heavy logging.

Resource loading optimization

Webpack 4.x was used to analyze bundle size with webpack-bundle-analyzer. The analysis revealed:

Cache busting on every change caused full re‑download of all assets.

Vendor bundle >1.5 MB (ElementUI ≈ 650 KB, moment.js ≈ 250 KB).

Duplicate packaging of third‑party libraries (d3, echarts) contributed ~70 % of bundle size.

Combinatorial chunks (a~b~c.js) increased request count.

Optimization steps:

Deploy core libraries (Vue, VueRouter, Vuex, ElementUI, Lodash) as a pre‑built library.dll.js on a CDN and prefetch it.

Deploy ElementUI themes as separate CSS files on a CDN and prefetch them.

Separate business code onto a different domain to increase parallel downloads.

Load non‑critical SDKs (player, diagram) with defer or dynamically import them.

Remove unused libraries (e.g., moment.js) and replace with lighter alternatives (Day.js).

Refine splitChunks to extract d3 and echarts into dedicated chunks and disable the default chunk splitting. Example configuration:

optimization: {
  splitChunks: {
    cacheGroups: {
      default: false,
      common: {
        name: 'chunk-common',
        test: /src[\\/]common/,
        chunks: 'all'
      },
      d3: {
        name: 'chunk-d3',
        test: /[\\/]node_modules[\\/](d3|dagre|graphlib)/,
        priority: 100,
        chunks: 'all'
      },
      echarts: {
        name: 'chunk-echarts',
        test: /[\\/]node_modules[\\/](echarts|zrender)/,
        priority: 110,
        chunks: 'all'
      }
    }
  }
}

Switch file naming from [hash] to [contenthash] so unchanged files stay cached.

Page rendering optimization

Skeleton screens were introduced for core layout, and heavy components were lazy‑loaded. Example of async component loading in Vue:

<template>
  <form-builder :config="'formConfig'"></form-builder>
</template>

export default {
  created() {
    this.getFormConfig().then(() => this.startWork());
  },
  methods: {
    startWork() {
      const work = () => {
        // task scheduler
        return scheduler.next(() => {
          this.formConfig = this.concatNextFormConfig();
          if (!scheduler.done()) work();
        });
      };
      work();
    }
  }
}

Additional measures:

Use skeleton screens to render the navigation layout early.

Split hidden components (sidebars, advanced search) into async chunks.

Memoize expensive functions such as AuthService.hasURIAuth and cache regular expressions.

API speed optimization (BFF)

The Node.js BFF was rewritten with NestJS (TypeScript). Improvements included:

Custom TimeMiddleware to log request latency.

Axios interceptor to measure third‑party call times.

Cache heavy services (e.g., channel list) with Redis.

Scale Elasticsearch nodes to reduce pagination query time from ~2.6 s to <1 s.

Parallelize multi‑service calls, reducing a critical path from 1.3 s to 700 ms.

Remove cross‑region servers to eliminate 600 ms latency spikes.

Replace synchronous process.stdout logging with asynchronous Winston logging.

Results

After the optimizations:

Vendor bundle reduced from 1.5 MB to ~500 KB (≈ 2/3 size reduction).

Overall script download size dropped from 3.5 MB (7 files) to 1.8 MB (4 files).

First‑page load time decreased from an average of 2.66 s to 790 ms.

Core API response times fell from 2.6 s to ~1 s.

Resource load time stabilized around 200 ms.

The case demonstrates that systematic analysis of resource loading, rendering, and backend interaction, combined with concrete Webpack, Vue, and NestJS techniques, can dramatically improve user experience for large‑scale enterprise front‑ends.