书山有路勤为径,学海无涯苦作舟

Vue+webpack热插拔架构探索

123浏览

曾经我一度认为,在网站开发领域,纯粹的前端已经不没有存在的必要和市场了,大多后台开发人员前端也了解颇深,不管是商业抑或开源的CMS或开发框架,高度模块化,甚至不需要前端代码就可以形成统一的UI界面,而通过后台模块的启用禁用,前端界面也会相应发生变化,在传统的前端开发中,这很简单,只是对链接的访问和可见性控制而已。

而在现在国内流行的PHP+VUE+webpack技术栈下,已经越来越少有公司做前后端耦合热插拔架构了。一般的VUE项目,跟随项目项目越来越复杂,一些弊端已然显现:

  1. 项目越来越大,打包速度越来越慢。
  2. 更新代码时,打包、上传,比后台还麻烦了。
  3. 使用老项目代码开始新项目,无用代码、组件往往很难清理清楚,过程也很痛苦。

基于以上原因,我曾问我的前端同事,有办法实现类似之前那样,模块前后端耦合,模块间又低耦合,模块间热插拔,项目开发像玩积木一样。同事答复:不能。于是我就开始了自己VUE+webpack前端栈探索道路。

目前社区有流行前端微服务架构,其基本概念为:每个模块为独立又可以放在一起运营,即:每个服务可以独立运行,相互间没有依赖关系,又可以组合成一个产品运行,这和本文探索的不同。

功能分析

以开发一个后台管理为例,通过简化分析,我想实现以下目的:

  • core模块定义UI风格、定义菜单、权限等api标准
  • core模块从后台加载已启用模块,根据预定义规则加载模块前端文件,动态新增路由、注册组件、store、事件等
  • 其他模块依赖core模块的入口文件
  • 包括core模块,所有模块独立编译,独立更新
  • 所有模块仅仅打包自身所需代码,例如,所有模块依赖core模块,但这些模块在打包时并不打包core模块代码

架构流程为:

  • core模块运行,注册全局组件、因为全局依赖、注册登录页面。
  • app.vue文件created事件中,根据模块列表,通过loadjs加载模块文件\
  • 模块文件返回模块信息,例如:路由、store…
  • 通过addRoutes等方法动态注册路由、store

精力问题,文章视情况更新,其实思路和实现很简单,看看代码大概就明白了。仓库地址:码云<gitee>

本文章由 https://itdashu.com 原创发布,欢迎转载,转载请注明出处。
投稿或联系站长请发送邮件至 leno@itdashu.com。

4 条评论

共同学习,写下你的评论
姓名
电子邮件
个人主页
  • I just started my blog a few months ago and discovered this site just two weeks now, and wow…So grateful for you. Thanks for the post. awesome.. Raye Tabby Jennette

    回复 2020年8月23日 下午9:16
  • I’m really impressed together with your writing talents and also with
    the layout on your weblog. Is that this a paid topic or did you customize it yourself?
    Anyway keep up the excellent quality writing, it
    is rare to see a great blog like this one nowadays..

    回复 2020年8月27日 上午1:00
  • 有人相信这个人在说什么吗?

    回复 2020年9月5日 下午11:13
    • 官蠡渊

      一般来说这种英文评论应该是垃圾评论,但是我翻译了下。。竟然是夸我的,我就通过了,哈哈哈

      回复 2020年9月8日 下午10:45