devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue单页(spa)前端git工程拆分实践

作者：IT小白 | 2024-03-21 09:54:04

赞

踩

vue 工程 拆分

背景

随着项目的成长，单页spa逐渐包含了许多业务线

  • 商城系统
  • 售后系统
  • 会员系统
  • ...

当项目页面超过一定数量（150+）之后，会产生一系列的问题

  • 可扩展性
项目编译的时间（启动server，修改代码）越来越长，而每次调试关注的可能只是其中1、2个页面
  • 需求冲突
所有的需求都定位到当前git，需求过多导致测试环境经常排队

基于以上问题有了对git进行拆分的技术需求。具体如下

目标

  • 依然是spa
由于改善的是开发环境，当然不希望拆分项目影响用户体验。如果完全将业务线拆分成2个独立页面，那么用户在业务线之间跳转时将不再流畅，因为所有框架以及静态资源都会在页面切换的时候重载。因此要求跳转业务线的时候依然停留在spa内部， 不刷新页面，共用同一个页面入口；
  • 业务线页面不再重复加载资源
因为大部分业务线需要用到的框架( vue, vuex...), 公共组件( dialog， toast)都已经在spa入口加载过了，不希望业务线重复加载这些资源。业务线项目中应该只包含自己独有的资源，并能使用公共资源；
  • 业务线之间资源完全共享
业务线之间应该能用router互相跳转，能访问其他业务线包括全局的store

需求如上，下面介绍的实现方式

技术框架

  • vue: 2.4.2
  • vue-router: 2.7.0
  • vuex: 2.5.0
  • webpack: 4.7.0

实现

假设要从主项目拆分一个业务线 hello 出来

  • 主项目：包含系统核心页面 + 各种必须框架（vue, vuex...）
  • hello项目：包含hello自己内部的业务代码

跳转hello页面流程

  1. 用户访问业务线页面 路由 #/hello/index；
  2. 主项目router未匹配，走公共*处理；
  3. 公共router判定当前路由为业务线hello路由，请求hello的入口bundle js；
  4. hello入口js执行过程中，将自身的router与store注册到主项目；
  5. 注册完毕，标记当前业务线hello为已注册；
  6. 之后路由调用next。会自动继续请求 #/hello/index对应的页面chunk（js,css）页面跳转成功；
  7. 此时hello已经与主项目完成融合，hello可以自由使用全部的store，使用router可以自由跳转任何页面。done

需要的功能就是这些，下面分步骤看看具体实现

请求业务线路由（步骤1）

第一次请求#/hello/index时，此时router中所有路由无法匹配，会走公共*处理

  1. /** 主项目 **/
  2. const router = new VueRouter({
  3.   routes: [
  4.     ...
  5.     // 不同路由默认跳转链接不同
  6.     {
  7.       path: '*',
  8.       async beforeEnter(to, from, next) {
  9.         // 业务线拦截
  10.         let isService = await service.handle(to, from, next);
  11.  
  12.         // 非业务线页面，走默认处理
  13.         if(!isService) {
  14.           next('/error');
  15.         }
  16.  
  17.       }
  18.     }
  19.   ]
  20. });

业务线初始化（步骤2、步骤3）

首先需要一个全局的业务线配置，存放各个业务线的入口js文件

  1. const config = {
  2.     "hello": {
  3.         "src": [
  4.           "http://local.aaa.com:7000/dist/dev/js/hellobundle.js"
  5.         ]
  6.     },
  7.     "其他业务线": {...}
  8. }

此时需要利用业务线配置，判断当前路由是否属于业务线，是的话就请求业务线，不是返回false

  1. /** 主项目 **/
  2. // 业务线接入处理
  3. export const handle = async (to, from, next) => {
  4.   let path = to.path || "";
  5.   let paths = path.split('/');
  6.   let serviceName = paths[1];
  7.  
  8.   let cfg = config[serviceName];
  9.  
  10.   // 非业务线路由
  11.   if(!cfg) {
  12.     return false;
  13.   }
  14.  
  15.   // 该业务线已经加载
  16.   if(cfg.loaded) {
  17.     next();
  18.     return true;
  19.   }
  20.  
  21.   for(var i=0; i<cfg.src.length; i++) {
  22.     await loadScript(cfg.src[i]);
  23.   }
  24.   cfg.loaded = true;
  25.   next(to);  // 继续请求页面
  26.   return true;
  27. }

有几点需要注意

  • 一般业务线配置存放在后端，此处为了说明直接列出
  • 业务线只加载1次，loaded为判定条件。加载过的话直接进行next
  • 当第1次业务线加载成功，此时主项目已经包含了 #/hello/index 的路由，此时next可以正常跳转。原因见下一节

hello的入口entry.js做的工作（步骤4）

为了节省资源，hello业务线不再重复打包vue，vuex等主项目已经加载的框架。

那么为了hello能正常工作，需要主项目将以上框架传递给hello，方法为直接将相关变量挂在到window：

  1. /** 主项目 **/
  2. import Vue from 'vue';
  3. import { default as globalRouter } from 'app/router.js'; 2个需要动态赋值
  4. import { default as globalStore } from 'app/vuex/index.js';
  5. import Vuex from 'vuex'
  6.  
  7. // 挂载业务线数据
  8. function registerApp(appName, {
  9.   store,
  10.   router
  11. }) {
  12.   if(router) {
  13.     globalRouter.addRoutes(router);
  14.   }
  15.   if(store) {
  16.     globalStore.registerModule(appName, Object.assign(store, {
  17.       namespaced: true
  18.     }));
  19.   }
  20. }
  21.  
  22. window.bapp = Object.assign(window.bapp || {}, {
  23.   Vue,
  24.   Vuex,
  25.   router: globalRouter,
  26.   store: globalStore,
  27.   util: {
  28.     registerApp
  29.   }
  30. });

注意registerApp这个方法，此方法为hello与主项目融合的挂载方法，由业务线调用。

上一步已经正常运行了hello的entry.js，那我们看看hello在entry中干了什么：

  1. /** hello **/
  2. import App from 'app/pages/Hello.vue'; // 路由器根实例
  3. import {APP_NAME} from 'app/utils/global';
  4. import store from 'app/vuex/index';
  5.  
  6. let router = [{
  7.   path: `/${APP_NAME}`,
  8.   name: 'hello',
  9.   meta: {
  10.     title: '页面测试',
  11.     needLogin: true
  12.   },
  13.   component: App,
  14.   children: [
  15.     {
  16.       path: 'index',
  17.       name: 'hello-index',
  18.       meta: {
  19.         title: '商品列表'
  20.       },
  21.       component: resolve => require.ensure([], () => resolve(require('app/pages/goods/Goods.vue').default), 'hello-goods')
  22.     },
  23.     {
  24.       path: 'newreq',
  25.       name: 'hello-newreq',
  26.       meta: {
  27.         title: '新品页面'
  28.       },
  29.       component: resolve => require.ensure([], () => resolve(require('app/pages/newreq/List.vue').default), 'hello-newreq')
  30.     },
  31.   ]
  32. }]
  33.  
  34. window.bapp && bapp.util.registerApp(APP_NAME, {router, store});

注意几点

  • APP_NAME是业务线的唯一标识，也就是hello
  • 业务线有自己内部的router和store
  • 业务线主动调用registerApp，将自己的router和store与主项目融合
  • store融合的时候需要添加namespace: true，因为此时整个hello业务线store成为了globalStore的一个module
  • addRoutes和registerModule是router与store的动态注册方法
  • 路由的name需要和主项目保持唯一

业务线配置更新

业务线配置需要在hello每次编译完成后更新，更新分为本地调试更新和线上更新。

  • 本地调试更新只需要更新一个本地配置文件service-line-config.json，然后在请求业务线config时由主项目读取该文件返回给js。
  • 线上更新更为简单，每次发布编译后，将当前入口js+md5的完整url更新到后端

以上，看到使用webpack-plugin比较适合当前场景，实现如下

  1. class ServiceUpdatePlugin {
  2.   constructor(options) {
  3.     this.options = options;
  4.     this.runCount = 0;
  5.   }
  6.  
  7.   // 更新本地配置文件
  8.   updateLocalConfig({srcs}) {
  9.     ....
  10.   }
  11.  
  12.   // 更新线上配置文件
  13.   uploadOnlineConfig({files}) {
  14.     ....
  15.   }
  16.  
  17.   apply(compiler) {
  18.     // 调试环境：编译完毕，修改本地文件
  19.     if(process.env.NODE_ENV === 'dev') {
  20.       // 本地调试没有md5值，不需要每次刷新
  21.       compiler.hooks.done.tap('ServiceUpdatePlugin', (stats) => {
  22.         if(this.runCount > 0) {
  23.           return;
  24.         }
  25.         let assets = stats.compilation.assets;
  26.         let publicPath = stats.compilation.options.output.publicPath;
  27.         let js = Object.keys(assets).filter(item => {
  28.           // 过滤入口文件
  29.           return item.startsWith('js/');
  30.         }).map(path => `${publicPath}${path}`);
  31.  
  32.         this.updateLocalConfig({srcs: js});
  33.         this.runCount++;
  34.       });
  35.     }
  36.     // 发布环境：上传完毕，请求后端修改
  37.     else {
  38.       compiler.hooks.uploaded.tap('ServiceUpdatePlugin', (upFiles) => {
  39.         let entries = upFiles.filter(file => {
  40.           return file &&
  41.             file.endsWith('js') &&
  42.             file.includes('js/');
  43.         });
  44.  
  45.         this.uploadOnlineConfig({files: entries});
  46.         return;
  47.       })
  48.  
  49.     }
  50.   }
  51. }

注意，uploaded事件由我们项目组的静态资源上传plugin发出，会传递当前所有上传文件完整路径。需要等文件上传cdn完毕才可更新业务线

之后在webpack中使用即可

  1. /** hello **/
  2. {
  3.   ...
  4.   plugins: [
  5.     // 业务线js md5更新
  6.     new McServiceUpdatePlugin({
  7.       app_name,
  8.       configFile: path.resolve(process.cwd(), '../mainProject/app/service-line-config.json')
  9.     })
  10.   ],
  11.   ...
  12. }

注意本地调试时业务线config是主项目才会用到的，因此直接更新主项目目录下的配置文件

调试发布

基于上面的plugin，有以下效果

调试过程如下：
  1. 启动主项目server（端口7777）;
  2. 启动hello业务线server（端口7000），此时启动成功会同时更新本地文件service-line-config.json;
  3. 访问hello页面，加载本地配置后，加载7000端口提供的静态资源(如http://local.aaa.com:7000/dist/dev/js/hellobundle.js)
发布test过程如下：
  1. 执行 npm run test
  2. 执行过程中会上传文件并更新test环境业务线配置
  3. 此时访问test环境页面已经更新

可以看到hello发布是比主项目更加轻量的，这是因为业务线只更新接口，但是主项目要发布还需要更新html的web服务

小结

至此已经完成了一开始的主体需求，访问业务线页面后，业务线页面会和主项目页面合并成为1个新的spa，spa内部store和router完全共享。

可以看到主要利用了vue家族的动态注册方法。下面是一些过程中遇到的问题和解决思路

遇到的问题与解决

hello业务线的wepback打包

  • 业务线需要独立的打包命名空间
  • 为了能与主项目区分，会给hello业务线的bundle重命名，增加了业务线名称前缀

  • 入口文件越少越好，因此删除了一些打包配置

    • 删除了vendor: 主要第三方库由主项目加载
    • 删除了dll: dll资源由主项目加载
    • 删除了runtime(manifest)配置: 各业务线将各自处理依赖加载
  1. /** hello **/
  2. {
  3.   ...
  4.   entry: {
  5.     [app_name + 'bundle']: path.resolve(SRC, `entry.js`)
  6.   },
  7.   output: {
  8.     publicPath: `http://local.aaa.com:${PORT}${devDefine.publicPath}`,
  9.     library: app_name // 业务线命名空间
  10.   },
  11.   ...
  12.   optimization: {
  13.     runtimeChunk: false, // 依赖处理与bundle合并
  14.     splitChunks: {
  15.       cacheGroups: false // 业务线不分包
  16.     }
  17.   },
  18.   ...
  19. }

注意library的设置隔离了各个业务线
入口文件
image

依赖
imageimage

router拆分问题

最开始使用/:name来做公共处理。

但是发现router的优先级按照数组的插入顺序，那么后插入的hello路由优先级将一直低于/:name路由。

之后使用*做公共处理，将一直处于兜底，问题解决。

store拆分

hello的store做为globalStore的一个module注册，需要标注 namespaced: true，否则拿不到数据；

store使用基本和主项目一致：

  1. /** hello **/
  2.  
  3. let { Vuex } = bapp;
  4. // 全局store获取
  5. let { mapState: gmapState, mapActions: gmapActions, createNamespacedHelpers } = Vuex;
  6. // 本业务线store获取
  7. const { mapState, mapActions } = createNamespacedHelpers(`${APP_NAME}/feedback`)
  8.  
  9. export default {
  10.   ...
  11.   computed: {
  12.     ...gmapState('userInfo', {
  13.       userName: state => state.userName
  14.     }),
  15.     ...gmapState('hello/feedback', {
  16.       helloName2: state => state.helloName
  17.     }),
  18.     ...mapState({
  19.       helloName: state => state.helloName
  20.     })
  21.   },
  22. }

接口拆分

虽然前端工程拆分了，但是后端接口依然是走相同的域名，因此可以给hello暴露一个生成接口参数的公共方法，然后由hello自己组织。

公共利用

可以直接使用全局组件，mixins，directives，可以直接使用font。
局部的相关内容需要拷贝到hello或者暴露给hello才可用。
图片完全无法复用

本地server工具

主项目由于需要对request有比较精细的操作，因此是我们自己实现的express来本地调试。

但是hello工程的唯一作用是提供本地当前的js与css，因此使用官方devServer就够了。

以上

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/280195
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号