Building a High‑Performance BCRM Front‑End with Vue 3, Vite, and NutUI3

The BCRM sales‑assistant project needed a complete front‑end solution within ten working days, prompting the team to rethink the traditional serial development flow and adopt a parallel collaboration model that allowed development, integration and testing to happen simultaneously.

To maximise speed, the team chose a brand‑new tech stack: Vue 3, Vite and TypeScript for the framework, and NutUI3 as the UI component library. Vue 3’s static‑hoisting and PatchFlag mechanisms reduce unnecessary DOM diffing, while Vite’s native ESM and esbuild pre‑bundling provide instant server start‑up and ultra‑fast hot module replacement.

Key code examples illustrate the differences:

<div>
    <p>BCRM 销售助手</p>
    <p>{{ msg }}</p>
</div>

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue";
export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("p", null, "BCRM 销售助手"),
    _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  ]))
}

In Vue 3 the static p element is hoisted, eliminating repeated creation during re‑renders.

Vite’s configuration is simplified with a style‑import plugin for on‑demand NutUI3 components:

npm install vite-plugin-style-import --save-dev

import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
export default {
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: '@nutui/nutui',
        libraryNameChangeCase: 'pascalCase',
        resolveStyle: name => `@nutui/nutui/dist/packages/${name}/index.scss`
      }]
    })
  ]
};

Performance‑focused techniques include using Promise.all to fire 23 independent API calls in parallel, reducing page load time, and refactoring sequential await loops into concurrent requests.

const asksMap = new Map();
asksMap.set('projectInfo', query.getProjectByCoSn({ coSn: str }));
// ... other requests
Promise.all([...asksMap.values()])
  .then(results => {
    results.forEach((result, i) => {
      state[[...asksMap.keys()][i]] = result;
    });
  });

State management is streamlined by converting backend dictionaries into Map objects stored in Vuex, enabling O(1) look‑ups instead of repeated array scans.

let result = await service.getDict({ kind: `${type}` });
if (result) {
  const target = new Map();
  result.forEach(item => target.set(item.k, item));
  store.commit(key[type], target);
}

Finally, the article notes that the combination of Vue 3, Vite and NutUI3 not only met the tight deadline but also delivered a maintainable, high‑performance product, with multiple internal projects already adopting the same stack.