Meituan's Hermes Project: Front‑End Architecture, Modularization, Automation, and Performance Optimization

Preface

As front‑end projects grow in size and team composition, ensuring a high developer experience, maintainable codebase, and excellent user experience becomes a major challenge.

Since June 2016, Meituan’s overseas vacation front‑end team launched the "Hermes" project for C‑end users, focusing on four key areas: front‑back separation, modular and component‑based development, workflow automation, and page‑load performance optimization.

Front‑Back Separation

Previously, pages were assembled on the Java back‑end using FTL templates, while the front‑end team maintained separate CSS/JS assets. This coupling required constant coordination, duplicated environments, and hindered front‑end optimizations.

Hermes moved the entire page assembly to the front‑end; the back‑end only provides AJAX APIs. Static pages are built and deployed directly to CDN via CI, giving the front‑end full control over development, testing, and deployment.

Modularization

With the adoption of ES6 modules, the front‑end gained a standardized way to organize code, manage dependencies, and enable optimizations such as bundling, code‑splitting, tree‑shaking, and scope hoisting.

Componentization

Componentization addresses UI reuse. After evaluating React, Vue, and Angular, the team chose Vue.js for its declarative templates, reactive state tracking, clear lifecycle hooks, and rich tooling (webpack loader, vue‑cli, vue‑test‑utils).

Using Vue’s single‑file components, the team built a mobile‑focused component library dora‑ui containing 20 Vue 2.0 compatible components, documentation, examples, and a usage‑tracking plugin that records component‑to‑page relationships.

Automation

Standard project templates based on “convention over configuration” simplify new project creation, component development, and debugging. Each component includes a demo directory; webpack’s require.context automatically discovers demos and generates routes for isolated testing.

var demoRequire = require.context('@component', true, /demo\/.*\.vue$/); // load all demo components
const demos = demoRequire.keys().map(demoKey => {
  var [componentName, demoName] = demoKey.split('/demo/');
  componentName = componentName.substring(2);
  demoName = demoName.substring(0, demoName.lastIndexOf('.'));
  return { componentName, demoName };
});
const demosByComponent = _.groupBy(demos, d => d.componentName);
const routesByComponent = Object.keys(demosByComponent).map(name => ({
  path: '/' + name,
  component: require('./component.vue'),
  meta: { componentName: name, demoComponents: demosByComponent[name] }
}));
const routesByDemo = demos.map(d => ({
  path: '/' + d.componentName + '/' + d.demoName,
  component: d.component,
  meta: { componentName: d.componentName }
}));

A local mock service built on webpack‑dev‑server simulates any API response, enabling parallel front‑back development and automatic refresh on mock file changes.

Page‑Load Performance Optimization

The team established a monitoring system to collect real‑user data, then optimized resource loading, employed offline strategies, and refined network routing.

Monitoring System

Three layers were introduced: technical monitoring for developers (performance & error data), user‑behavior monitoring for product/operations (clicks, exposures), and a visualization dashboard for reporting.

Network Link Optimization

Static assets are served via multiple overseas CDN nodes with geo‑routing, and a Hong Kong intermediate source reduces back‑haul latency. AJAX traffic is routed through a Hong Kong SLB connected to back‑end via dedicated lines.

Domain Convergence & Request Reduction

Third‑party scripts are bundled into the main codebase, and all static resources share a single domain to cut DNS lookups and connection overhead.

Offline Support

Because overseas networks can be unstable, the team implemented an HTML Application Cache solution that generates a manifest file automatically based on page dependencies. When the manifest changes, the browser downloads updated resources and fires an updateready event, allowing the app to prompt users to refresh.

Future Plans

Further improvements include adopting Vue SSR with code‑splitting for faster first‑paint, and migrating from AppCache to Service Workers for more flexible offline handling.

Conclusion

The Hermes project’s front‑back separation, modular/component architecture, automated workflows, monitoring, and optimization dramatically improved development efficiency, code maintainability, and user experience across multiple projects.

Author Bio

Yu Jie, front‑end technology expert at Meituan Dianping, full‑stack engineer, joined in 2016, advocates open, interoperable platforms and strives for ultimate user experience and development efficiency.