背景

问题

目标

方案

菜单整理

框架优化

export default {
get(url, params = {}, options = { showLoading: true, showError: true }) {
return instance.get(url, { params, ...options })

  },
post(url, params = {}, options = { showLoading: true, showError: true }) {
return instance.post(url, params, options)

  },
download(url, data, fileName = 'fileName.xlsx') {
instance({

      url,

      data,

      method: 'post',

      responseType: 'blob'

    }).then(response => {
const blob = new Blob([response.data], {
type: response.data.type

      })
const name = (response.headers['file-name'] as string) || fileName
const link = document.createElement('a')

      link.download = decodeURIComponent(name)

      link.href = URL.createObjectURL(blob)
document.body.append(link)

      link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(link.href)

    })

  }

}

封装指令

import { getPageButtons } from '@hll/css-oms-utils'
// 权限指令
Vue.directive('has', {

  inserted: (el, binding) => {
let pageButtons = getPageButtons().map;
if (!pageButtons[binding.value]) {

      el.parentNode && el.parentNode.removeChild(el)

    }

  }

})

权限判断

// 1. 通过v-if判断
<el-button type="primary" v-if="pageButtons.create">创建el-button>

// 2. 通过v-has指令判断
<el-button type="primary" v-has="'create'">创建el-button>

getPageButtons 其实是为了兼容历史代码而封装的函数。

整个系统权限极其混乱，代码替换，耗时近 2 周，覆盖近 500 个文件才完成。

6. 状态码适配

这个我觉得有必要提一下，我相信很多前端可能都遇到这个问题，一个系统对应n个后台服务，不同的后台服务有不同的格式，比如：A系统返回code=0，B系统返回result=0，C系统返回res=0，那前端就要做不同的适配，其实也有不同的方法可以做：

• 让后端接入网关，统一在网关做适配。
• 前端在拦截器中开发adapter函数，针对响应码做适配。
• 针对分页、返回码、错误信息等都可以在适配函数里面做几种适配，或者提供单一函数在不同的页面单独调用，类似于request的to模块。

业务组件库建设

这一部分工作非常重要，不管你在哪个公司，做任何行业，我都建议封装业务组件库，当然封装有三种形式：

MF文档参考：http://www.webpackjs.com/concepts/mo… 我觉得在某些场景下，这个能力非常好用，它不需要像npm一样，发布以后还需要给项目做升级，只要你改了组件源码，发布以后，其他引用的项目就会立即生效。想要快速了解这个能力，我建议大家先看一下插件文档，然后了解两个概念exposes和remotes，如果还是看不懂，就去找个掘进入门文章再结合本地实践一次基本就算入门了。

我是基于上面三种方式来搭建系统的业务组件库，对于通用部分全部提取封装，基于rollup和vite搭建一套npm包，最终发布到公司私有npm平台。对于一些频繁改动，链路较长部分通过module federation进行封装和暴露。

梳理业务后，其实封装了很多业务组件，上面只是给大家提供了思路，没有一一列举具体组件，下面给大家简单列一个大纲图：

业务组件库建设对于这种大体量的超级系统收益非常大，而且是长期可持续的。

微服务搭建

前面第一部分梳理完菜单以后，其实已经将250+的菜单进行了归类，归类的目的其实就是为了服务拆分。拆分的好处非常明显：

• 服务解耦，便于维护。
• 局部需求可单独上线，不需要整包上传，减小线上风险。
• 缩小每个服务模块的构建时间，提升开发体验。

本次基于pnpm + microApp + module federation来实现的微服务拆分，为什么？

• 微服务拆分以后，创建了 7 个仓库，非常不利于代码维护。pnpm天然具备monorepo能力，可以把多个仓库合并为一个仓库，而且可以继续按7个项目的开发构建方式去工作。
• 微服务使用的是京东的microApp框架，集成非常简单，上手成本很低，文档友好，我觉得比阿里的乾坤简单太多了（个人主观看法）。
• 对于难于抽取的组件，直接通过module federation对外暴露组件服务。

上面在搭建业务组件库的时候，其实遇到了一个非常棘手的问题，有些组件跨了很多项目，链路很长，在抽取的过程中难度非常大，大家看一个图：

服务之间耦合太严重，从而导致组件抽取难度很大，那如何解决？ 答案就是module federation，抽取不了，就不抽取了，直接通过exposes对外暴露组件服务，在其它子服务中调用即可。

下面给大家举一个接入microApp的例子：

基座服务（主应用）

import microApp from '@micro-zoe/micro-app';


microApp.start()

添加组件容器（主应用）

<template>
<micro-app name="vms" :url="url" baseroute="/" @datachange='handleDataChange'>micro-app>
template>

<script>
export default {

  name: 'ChildApp',
data() {
return {

      activeMenu: '',

      url: 'http://xxxx',

    };

  },

  methods:{
handleDataChange({ detail: { data } }) {
// todo

    },

  }

};
script>

分配菜单（主应用）

{
path: '/child',

    name: 'child',

    component: () => import('./../layout/microLayout.vue'),

    meta: {

      appName: 'vms',

      title: '子服务A'

    }

}

就这样，一个主服务就搭建好了，等子服务上线以后，点击/child菜单，就能打开对应的子服务了。 当然因为我们是一个超级应用，所以我们在做的过程中其实遇到了很多问题，比如：跨域问题、变量问题、包共享问题、本地开发调试问题、远程加载问题等等，不过大家可以参考官方文档，都是可以解决的。

Rocket-render接入

这是我个人开源的一套基于Vue2的渲染引擎，通过json定义就可以快速搭建各种简单或复杂的表单、表格场景，跟formly这一类非常相似。

• 插件文档：rocket-render
• 开发文档：rocket-doc

给大家举一个简单的例子：

yarn add rocket-render -S

2. 组件注册

// 导入包
import RocketRender from 'rocket-render';
// 导入样式
import 'rocket-render/lib/rocket-render.css';
// 默认安装
Vue.use(RocketRender);
// 或者使用自定义属性，以下的值都是系统默认值，如果你的业务不同，可以配置下面的全局变量进行修改。
Vue.use(RocketRender, {

  size: 'small',

  empty: '-',

  inline: 'flex',

  toolbar: true,

  align: 'center',

  stripe: true,

  border: true,

  pager: true,

  pageSize: 20,

  emptyText: '暂无数据',
});

插件支持自定义属性，建议默认即可，我们已经给大家调好，如果确实想改，就通过自定义属性的方式进行修改。

3. 页面应用

search-form 自带背景色和内填充，如果你有特殊需要，可以添加 class 进行覆盖，另外建议给 model 添加 sync 修饰符。

<template>
<search-form

    :json="form"

    :model.sync="queryForm"

    @handleQuery="getTableList"

  />
template>
<script>
export default {
data() {
return {

        queryForm: {},

        form: [

          {

            type: 'text',

            model: 'user_name',

            label: '用户',

            placeholder: '请输入用户名称',

          },

        ],

      };

    },

  };
script>

我们针对需要自定义部分提供了slot插槽，所以不用担心用了以后，对于复杂需求支持不了，导致返工的现象，完全不存在，除了json以外，我们还内置了非常多的开发技巧，保证你爱不释手，继续看几个例子：

{
type: 'daterange',
model: 'login_time',
label: '日期范围',
// 对于日期范围控件来说，一般接口需要拆分为两个字段，通过export可以很方便的实现字段拆分
export: ['startTime', 'endTime'],
// 日期转换为时间戳单位
valueFormat: 'timestamp', // 支持：yyyy-MM-dd HH:mm:ss
defaultTime: ['00:00:00', '23:59:59'], //可以设置默认时间，有时候非常有用。后端查询的时候，必须从0点开始才能查到数据。

}

前端是一个组件对应一个字段，但是接口往往需要让你传开始和结束日期，通过export可以直接拆分，太好用了。

2. 下拉组件支持一步请求

{

    type: 'select',

    model: 'userStatus',

    label: '用户状态',

    multiple: true, // 支持多选

    filterable: true, //支持输入过滤

    clearable: true,
// 如果下拉框的值是动态的，可以使用fetchOptions获取，必须返回promise

    fetchOptions: async () => {
return [
{ name: '全部', id: 0 },
{ name: '已注销', id: 1 },
{ name: '老用户', id: 2 },
{ name: '新用户', id: 3 },
];
},
// 字段映射，用来处理接口返回字段，避免前端去循环处理一次。

    field: {

      label: 'name',

      value: 'id',
},

    options: [],
// 如果想要修改其它表单值，可以通过change事件来处理

    change: this.getSelectList,
}

通过fetchOptions可以直接在里面调用接口来返回下拉的值。如果是静态的，直接定义options即可。 如果接口返回的类别字段不是label和value结构，可以通过field来做映射。我觉得用的太爽了。

还有很多，我就不举例子了，大家去看文档就好了，文档写的非常清楚。

性能优化

前面几部分做完以后，我们的代码总量基本已经降到了 30 万行左右了，而且整个构建时长从9min降到了 30s ，有了业务组件库的加持，简直不要太爽，不过你看到的这些，看起来容易，其实我们花费了近1年的时间才完成。 剩下就是提升系统性能了：

• 这个大家一定要做，因为可以有效降低vender体积，你通过LightHouse做性能分析，就能知道原因，对于体积较大的js会给你提示的。
• 通过external，我们可以直接让vue、vue-router、vuex、element-ui等等全部通过defer加载。

4. 建议在根html
   中加一个Loading标签

<div id="app">
<div class="loading">加载中...div>
div>

这样做的好处是，如果vue.js还没有加载完成之前，可以让页面先loading，等new Vue({ el: '#app' })执行以后，才会覆盖#app里面的 内容，这样可以提升FCP指标。 5. 对于比较大的插件，建议按需

export const loadScript = (src: string) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');

    script.type = 'text/javascript';

    script.defer = true;

    script.onload = resolve;

    script.onerror = reject;

    script.src = src;
document.head.append(script);

  });

};

某一个页面如果使用较大的插件，比如：xlsx、html2Canvas等，可以单独在某一个页面内做按需加载。

6. 有些页面也可以针对vue组件或者大图片做按需加载。
7. 其它性能优化，我觉得可做可不做，针对LightHouse分析报告针对性下手即可，可能很多文章将性能优化会非常细致，比如chunk分包等等，我倒觉得不是很重要。 只要把上面的做完，理论上前端的性能已经会有巨大的提升了。

结果指标

以上就是我面对一个 46 万行代码的超级系统，耗时大概一年的时间所做的一些成果，很多技术细节也只是泛泛而谈，但是我希望给大家提供的是工作方法、解决思路等偏软实力方面，技术功底和技术视野还是要靠自己一步一个脚印。

这一年我过的很充实，面对突如其来的问题，我心情很复杂，这一年，我感觉也老了很多。最后，感谢你耐心的倾听，我是河畔一角，一个普通的前端工程师。