Build and Release Process Optimization for the Tongtian Tower Visual CMS Using Webpack

Background: Tongtian Tower is the primary system for merchants to create marketing activity pages, and its visual CMS (a front‑end page builder) has grown to include nearly one hundred templates, each treated as an independent project that must be bundled with webpack, leading to long build times, reliance on webpack 3, and FTP‑based pre‑release uploads.

Optimization Overview and Results: In Q1 2020 the team streamlined the build and release pipeline with minimal changes, achieving significant reductions in each stage; the initial release time dropped from 358.1 seconds to 160.1 seconds, translating to an estimated weekly saving of 6.9 hours of developer time.

Preparation: Webpack is a modern JavaScript static module bundler that constructs a dependency graph and emits one or more bundles. Improving its performance is essential for faster builds.

Data Collection: The team introduced tools such as speed‑measure‑webpack‑plugin, profiling‑Plugin, webpack‑bundle‑analyzer, and stats‑webpack‑plugin to record and analyze loader/plugin performance, bundle size, and incremental build speed.

Build Optimization: By enabling multi‑threading/multi‑processing and minimizing the amount of code compiled per run, the build time was dramatically reduced. Parallel‑webpack was used to run multiple webpack instances concurrently, cutting template dependency build time by more than half.

Webpack Migration: Moving from webpack 3 to webpack 4 required updating plugins and loaders, replacing CommonChunkPlugin and UglifyJsPlugin with the new optimization configuration, and adjusting chunk splitting and code compression settings.

Dependency Optimization: Each template, previously built sequentially, is now packaged in parallel, reducing overall dependency build time.

Pre‑Release Optimization: The legacy FTP upload process was enhanced with hash‑based caching and concurrent uploads, lowering first‑time upload duration to under 10 seconds for small changes.

Summary and Outlook: After the optimizations, the Tongtian Tower project saw markedly faster build and release cycles, deeper understanding of webpack mechanics, and the practices have been applied to other projects such as the international site. Future plans include further front‑end engineering improvements using tools like Puppeteer, Jest, and Jenkins.