微前端实践

微前端

微前端是2019年很火的一个话题，但是这个概念其实是2016年提出的。
主要解决前端巨石项目的问题。

  1. 技术栈升级
  2. 独立开发/维护/测试（沙盒）
  3. 增量打包/发布

主要问题

  1. 路由处理
  2. 状态处理
  3. 打包/部署
  4. CSS污染

框架

single-spa

qiankun

技术实践

步骤

采用不同子项目在同一个git仓库的方式

  1. react基础应用

React16 + ReactRouter5

  1. 切割应用
    待做：通过脚本实现分离

独立成单独项目，拥有自己的package.json，webpack

  • 创建3个子项目：npx create-react-app home/work/main
  • 去除项目中的无关项，public目录是共有的，也去除。
  • 为每个项目设置单独的webpack（你也可以使用不同的devserver方式和构建方式，推荐使用webpack）
  • webpack及其插件，可以安装在最外层
  1. 各个框架适配

single-spa

抛弃single-spa

挂载应用到不同的dom上

延伸

每一个独立组件或者说JS的模块就是一个应用，用调用service的方法使用组件

赏

万水千山总是情 就给一毛行不行

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

爱前端、爱小说、爱音乐、爱产品、爱游泳、爱动漫、爱家务、爱安静、爱萧萧。人生这么短，且行且努力。