Boost Mobile App Performance: A Hands‑On Journey with Weex

Background

When opening an H5 page, users often experience delays and abrupt navigation. To achieve native‑like loading speed and smoothness, the team spent two months researching the Weex framework, integrating it into their project, and documenting the process.

What is Weex?

Weex is an open‑source cross‑platform solution released by Alibaba in 2016. By writing a single set of web code (Vue.js or Rax syntax), developers can generate applications that run on Android, iOS, and the web. The code is compiled into a JavaScript bundle (jsbundle) that the Weex SDK renders natively.

Weex provides built‑in rendering components such as <div> (container) and <list> (scrollable list), as well as modules for networking, routing, and storage. The framework abstracts platform differences so that the same component works as a native view on mobile and as a DOM element in a browser.

Compilation Output

Weex uses the familiar Webpack toolchain. The official weex-loader converts source files into two bundles:

jsbundle for Android/iOS, loaded by the app SDK. Web code for H5, running in a WebView or browser.

Project Scaffold

The generated project structure resembles a typical web project: a web folder for HTML, a configs directory for Webpack configs, and a platforms directory that holds native Android or iOS code after running weex platform add. The package.json defines scripts such as dev, serve, build, and pack. The dev / serve commands start a local server at http://local_ip:8081 serving the jsbundle ( /dist/entryname.js) and the web bundle ( /dist/entryname.web.js). build produces production bundles, while pack copies the latest jsbundle into the native app package.

During development, the server automatically opens preview.html (see image 2) and can be inspected with the official Weex Playground app.

Demo Implementation

A demo replicating the home page of a real‑estate platform was built to test network requests, carousel, list, swipe, navigation, and tab switching. Compatibility issues were recorded (see Table 2 in the original). The resulting pages rendered smoothly, confirming the feasibility of Weex for B‑side projects.

Environment Configuration & Caching

Because Weex resolves resources relative to the jsbundle, absolute URLs must be used for API calls. The team added a custom “test” environment in addition to the default “dev” and “prod”. HTTP caching was employed using ETag/If‑None‑Match headers: the app stores the ETag of a jsbundle, sends it on subsequent requests, and receives a 304 Not Modified response when the bundle is unchanged, reducing bandwidth and startup time.

The overall loading flow, including jsbundle fetching, fallback to H5, and cache validation, is illustrated in the diagram (image 5).

Bridging Native Differences

To unify native interactions across H5, Android, and iOS, a weexBridge was created. It wraps native modules and the JSBridge, exposing a consistent API that checks weex.config.env.platform to call the appropriate underlying implementation.

Comparison with RN and Flutter

A brief comparison shows that Weex has a lower learning curve, comparable performance, and easier maintenance than React Native or Flutter for simple pages, making it a suitable choice for teams already familiar with web technologies.

Conclusion

The team successfully launched a B‑side Weex project, documented the development, build, and release workflow, and built a bridge to hide platform differences. Caching mechanisms achieved near‑instant subsequent loads. Future work includes integrating the template into the company’s build tools, performance measurement, component library creation, and experimenting with Rax syntax.

References

Weex official documentation: http://Weex.apache.org/cn/guide/

Weex UI library: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-page/

StackOverflow Weex tag: https://stackoverflow.com/questions/tagged/weex

Weex vs RN article: https://blog.csdn.net/aptentity/article/details/68488585

Weex/RN/Flutter comparison: https://www.jianshu.com/p/e747f64b8d38

Browser cache reference: https://www.cnblogs.com/wonyun/p/5524617.html

Caching scheme reference: https://www.jianshu.com/p/c8f1fbf1db5e