微前端之loader进程

164 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第26天,点击查看活动详情

前言

微前端是解决特定问题,个人理解:它并不是一个通用的解决方案,在一个项目中可能是接入各种框架或者是一个把一个老项目拆分成很多模块,最终目的是把所有的框架插件等聚合在一起,提高了开发效率。

但如果是整个团队整个项目用的是一个框架同样插件等,微前端其实就没有存在的意义了

iframe

它是最简单最传统的微前端解决方案,流程是:聚合几个页面,最终用iframe嵌套渲染即可完成。

为什么不用iframe

主要是它的体验不佳,跟最初的后端模板部署spa,最初开发页面时,是后端负责渲染页面和数据的更新、跳转、刷新页面等,这种操作每次都需要刷新页面,体验很差

微前端的加载应用过程

通过html,解析出页面加载的cssjs,和容器html

  1. 项目环境
npm i express npm-run-testAll -D
  1. 应用创建 创建后打开项目文件夹,在内创建server.js,它是整个微前端的入口应用
const express = require('express')
const app = express()
app.use(express.static('./'))

通过static,把当前设置成一个静态文件,因为它暂不需要它别的能力,只需要它启动一个静态服务即可,随后设置8088端口

app.listen(8088,()=>{})
  1. html入口 在内加上es6type,这样可以使用最新的语法,并在内引入解析文件
<script type='module'>
  import {parseHtml} from 'loader.js' 
</script>

4.解析htmlcss 创建 loader.js,在内解析html生成css js

export function parseHtml(e){}
  1. 调用 调用时,创建一个新应用,并启动项目,在调试控制台中可以看出,它们是聚合在一起并成功运行
parseHtml('localhost:8081')
console.log('这是新的app')

最后

微前端的诞生,它是iframespa版本,根据单页面路由监听,匹配上不同的APP,但如果切换的是整个组件,那它就是vs spa的版本