Improving Front-End Development Efficiency with Monorepo, Automated Publishing, and Build Optimization

The Tencent Basic Development Center maintains over 90 npm packages, 170 CDN components, and multiple application services spread across seven repositories. As business and team size grew, the fragmented architecture caused slow development cycles, manual publishing, large bundle sizes, and fragile dependencies.

Key problems identified:

Manual, unsafe publishing of dozens of npm packages.

Outdated build infrastructure leading to slow builds and large bundle sizes.

Monolithic dependency tree causing "ghost" dependencies and version conflicts.

Cross‑repository changes requiring multiple manual steps.

Solution 1 – Automated Publishing System

Adopted pnpm + Nx + changeset + oci to fully automate the release pipeline.

• pnpm provides fast, deterministic installations and workspace isolation.

• Nx analyses the dependency graph and runs nx affected publish only for affected packages, ensuring correct build order (A → B → C).

• changeset records version bumps and changelogs locally, making versioning transparent.

Example Nx target configuration:

{
  "targetDefaults": {
    "build": {"dependsOn": ["^build"]},
    "publish": {"dependsOn": ["build"]}
  }
}

Publishing commands:

Test package: pnpm i && pnpm nx affected publish:beta

Official release: pnpm i && pnpm changeset version && pnpm nx affected publish:latest

Solution 2 – Optimizing Component Library Build Size and Speed

Moved from a single large webpack build to per‑package builds, externalized dependencies, and enabled parallel execution with Nx. Build time for 170+ components dropped from 7 min to 2 min, and incremental builds often finish within 1 min.

Package.json snippet for source‑to‑dist mapping:

{
  "name": "foo",
  "version": "1.0.0",
  "main": "src/index.ts",
  "publishConfig": {
    "main": "dist/index.js",
    "typings": "dist/index.d.ts"
  }
}

Solution 3 – Dependency Management with pnpm

Used pnpm workspace to isolate each package’s node_modules , preventing ghost dependencies. Leveraged Docker volume caching of pnpm-store and pnpm fetch to keep install times under 20 seconds.

Root-level overrides for shared libraries:

{
  "dependencies": {"foo": "^1.0.0"},
  "pnpm": {"overrides": {"foo": "$foo"}}
}

Sub‑package placeholder:

{
  "dependencies": {"foo": "*"}
}

Solution 4 – Migrating to a Monorepo

Combined seven repositories into a single monorepo using git-filter-repo and pnpm workspace . Added an Nx executor that triggers OCI‑based CI pipelines per affected sub‑project, preserving existing CI templates while supporting on‑demand deployment.

Typical CI command:

pnpm nx affected oci-feature publish:beta

Solution 5 – Preventing Code Degradation (Bundle Size Monitoring)

Integrated bundle-status to compare each commit’s bundle against a baseline stored in COS. The MR pipeline fetches the baseline of the common ancestor, runs the comparison, uploads an HTML diff report, and can block the merge if unexpected growth is detected.

Baseline generation after each merge:

bundle-status --baseline

MR check:

git merge-base HEAD origin/main # get common ancestor hash
bundle-status --compare $COMMON_ANCESTOR_HASH

All of these practices dramatically reduced the number of manual steps developers need to perform (from 16 nodes to 2) and cut CI build times by over 80% while keeping the codebase healthy.