Why vue-mini Claims 10× Faster Performance Than Taro for Mini Programs

At VueConf 2024 in Shenzhen a talk titled “Vue‑Mini: An Uncompromising Mini‑Program Framework” introduced a new mini‑program solution, providing a repository with performance comparison data that claims vue‑mini is up to ten times faster than Taro, though a uniapp comparison is still pending.

To start a project the author runs pnpm create vue-mini@latest (version 1.0.4) and can also clone the vue-mini-analysis repository, then installs dependencies and executes pnpm run dev or pnpm run build as defined in package.json where cross‑env sets NODE_ENV for development or production.

The prod function removes the dist folder, watches the src directory with chokidar, processes added files via a cb handler, aggregates promises, and logs the total build time after Promise.all resolves.

The dev function performs similar steps but also reacts to file changes, clears the waiting list after the initial build, and logs a “watching files” message.

The cb function dispatches files based on extension: TypeScript files are sent to processScript, HTML files to processTemplate, CSS files to processStyle, and other files are copied directly to the dist directory. processScript uses babel.transformFileAsync to obtain an AST and transformed code, injects a Promise polyfill for iOS, bundles required modules with bundleModule, and in production minifies the code with terser before writing the output. bundleModule checks a Set to avoid duplicate work, then runs rollup with plugins such as @rollup/plugin-commonjs, @rollup/plugin-replace, @rollup/plugin-node-resolve and optionally terser, outputting a CommonJS file under dist/miniprogram_npm. processTemplate simply copies .html files from src to dist while renaming the extension to .wxml, preserving native WeChat mini‑program markup. processStyle reads the CSS source, loads postcss.config.js via postcss-load-config, processes the CSS with postcss (including a postcss-pxtorpx-pro plugin that converts px to rpx), and writes the result as .wxss to dist.

The Babel configuration sets @babel/preset-env to output CommonJS modules and includes the runtime plugin, while the Rollup configuration bundles each imported module into the mini‑program package.

In conclusion, vue‑mini compiles mini‑program code by converting TypeScript to JavaScript with Babel, bundling via Rollup, and handling templates and styles with simple copy or PostCSS transformations. Its template layer remains native WeChat wxml, while the logic layer benefits from Vue‑Mini’s lightweight runtime, offering performance close to native and a smoother development experience. However, the ecosystem is still early, lacking support for preprocessors like Less or Sass, and multi‑platform targets are not yet planned.