>[success] # 为什么出现微前端
~~~
1.随着业务的越来越大打包速度通过打包工具提供的各种优化打包速度的方案已经不能满足,技术栈的升级
又不想对老代码进行重构但新的代码业务想开始尝试新的技术栈,多个业务之间相同模块的复用等一系列问题
开始寻求一种新的解决方案,将应用拆解成多个更小、更易管理小应用
2.将'一种由多个独立可交付的前端应用组合而成更庞大整体的架构方式'成为微前端
3.'微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。' 各个子应用可以是
相同的技术栈,也可以是不同,我们可以按照模块划分、技术栈划分、为了是将原本的巨石般代码拆开,在合
~~~
注:第二条对微前端的定义来自[# Micro Frontends](https://martinfowler.com/articles/micro-frontends.html)参考他的一问来自[# 【译】微前端](https://juejin.cn/post/6964219246528167966#heading-2)
>[danger] ##### 更多的解决思路
~~~
1.npm包:将子应用封装成npm包,通过组件的方式引入,在性能和兼容性上是最优的方案,但却有一个致命的问题
就是版本更新,每次版本发布需要通知接入方同步更新,管理非常困难。
2.iframe:有一些无法解决的问题,例如性能低、通信复杂、双滚动条、弹窗无法全局覆盖,它的成长性不高,
只适合简单的页面渲染
注:个人觉得无论采用那种形式去解决,需要针对业务和整体团队技术项目未来规划来说,并不是说某种解决
方式不好,更多的解决形式依旧是要针对实际选择合适的
~~~
[参看这里也给了更多的解决方向,'服务端模板构成'、'构建态集成'、'通过 iframe 在执行态集成'、'通过 JavaScript 在执行态集成'、'通过 Web 组件在执行态集成'](https://juejin.cn/post/6964219246528167966#heading-8)
[实现微前端有哪些方案
](https://juejin.cn/post/6844904162509979662#heading-8)
[对比多种微前端方案](https://github.com/efoxTeam/emp/wiki/%E3%80%8A%E5%AF%B9%E6%AF%94%E5%A4%9A%E7%A7%8D%E5%BE%AE%E5%89%8D%E7%AB%AF%E6%96%B9%E6%A1%88%E3%80%8B)
>[danger] ##### 本质
~~~
1.无论使用那种技术形式去实现本质想解决的例如下面几个问题
不同团队间开发同一个应用技术栈不同怎么破?
希望每个团队都可以独立开发,独立部署怎么破?
项目中还需要老的应用代码怎么破?
相对的这些解决方案整体相同的解决大体方向都是拆分,或者通过路由去对应加载对应拆分内容
~~~
>[danger] ##### 微前端通俗易懂好文
[微前端究竟是什么,可以带来什么收益](https://juejin.cn/post/6893307922902679560)
[# 微前端-最容易看懂的微前端知识](https://juejin.cn/post/6844904162509979662#heading-0)
>[info] ##### 微前端 好文探讨
[# qiankun 技术圆桌](https://www.yuque.com/kuitos/gky7yw/gesexv)
>[danger] ##### 整体总结
[微前端学习系列(一):微前端介绍
](https://juejin.cn/post/6955341801381167112/)
[每日优鲜供应链前端团队微前端改造
](https://juejin.cn/post/6844903943873675271)
- 工程化 -- Node
- vscode -- 插件
- vscode -- 代码片段
- 前端学会调试
- 谷歌浏览器调试技巧
- 权限验证
- 包管理工具 -- npm
- 常见的 npm ci 指令
- npm -- npm install安装包
- npm -- package.json
- npm -- 查看包版本信息
- npm - package-lock.json
- npm -- node_modules 层级
- npm -- 依赖包规则
- npm -- install 安装流程
- npx
- npm -- 发布自己的包
- 包管理工具 -- pnpm
- 模拟数据 -- Mock
- 页面渲染
- 渲染分析
- core.js && babel
- core.js -- 到底是什么
- 编译器那些术语
- 词法解析 -- tokenize
- 语法解析 -- ast
- 遍历节点 -- traverser
- 转换阶段、生成阶段略
- babel
- babel -- 初步上手之了解
- babel -- 初步上手之各种配置(preset-env)
- babel -- 初步上手之各种配置@babel/helpers
- babel -- 初步上手之各种配置@babel/runtime
- babel -- 初步上手之各种配置@babel/plugin-transform-runtime
- babel -- 初步上手之各种配置(babel-polyfills )(未来)
- babel -- 初步上手之各种配置 polyfill-service
- babel -- 初步上手之各种配置(@babel/polyfill )(过去式)
- babel -- 总结
- 各种工具
- 前端 -- 工程化
- 了解 -- Yeoman
- 使用 -- Yeoman
- 了解 -- Plop
- node cli -- 开发自己的脚手架工具
- 自动化构建工具
- Gulp
- 模块化打包工具为什么出现
- 模块化打包工具(新) -- webpack
- 简单使用 -- webpack
- 了解配置 -- webpack.config.js
- webpack -- loader 浅解
- loader -- 配置css模块解析
- loader -- 图片和字体(4.x)
- loader -- 图片和字体(5.x)
- loader -- 图片优化loader
- loader -- 配置解析js/ts
- webpack -- plugins 浅解
- eslit
- plugins -- CleanWebpackPlugin(4.x)
- plugins -- CleanWebpackPlugin(5.x)
- plugin -- HtmlWebpackPlugin
- plugin -- DefinePlugin 注入全局成员
- webapck -- 模块解析配置
- webpack -- 文件指纹了解
- webpack -- 开发环境运行构建
- webpack -- 项目环境划分
- 模块化打包工具 -- webpack
- webpack -- 打包文件是个啥
- webpack -- 基础配置项用法
- webpack4.x系列学习
- webpack -- 常见loader加载器
- webpack -- 移动端px转rem处理
- 开发一个自己loader
- webpack -- plugin插件
- webpack -- 文件指纹
- webpack -- 压缩css和html构建
- webpack -- 清里构建包
- webpack -- 复制静态文件
- webpack -- 自定义插件
- wepack -- 关于静态资源内联
- webpack -- source map 对照包
- webpack -- 环境划分构建
- webpack -- 项目构建控制台输出
- webpack -- 项目分析
- webpack -- 编译提速优护体积
- 提速 -- 编译阶段
- webpack -- 项目优化
- webpack -- DefinePlugin 注入全局成员
- webpack -- 代码分割
- webpack -- 页面资源提取
- webpack -- import按需引入
- webpack -- 摇树
- webpack -- 多页面打包
- webpack -- eslint
- webpack -- srr打包后续看
- webpack -- 构建一个自己的配置后续看
- webpack -- 打包组件和基础库
- webpack -- 源码
- webpack -- 启动都做了什么
- webpack -- cli做了什么
- webpack - 5
- 模块化打包工具 -- Rollup
- 工程化搭建代码规范
- 规范化标准--Eslint
- eslint -- 扩展配置
- eslint -- 指令
- eslint -- vscode
- eslint -- 原理
- Prettier -- 格式化代码工具
- EditorConfig -- 编辑器编码风格
- 检查提交代码是否符合检查配置
- 整体流程总结
- 微前端
- single-spa
- 简单上手 -- single-spa
- 快速理解systemjs
- single-sap 不使用systemjs
- monorepo -- 工程
- Vue -- 响应式了解
- Vue2.x -- 源码分析
- 发布订阅和观察者模式
- 简单 -- 了解响应式模型(一)
- 简单 -- 了解响应式模型(二)
- 简单 --了解虚拟DOM(一)
- 简单 --了解虚拟DOM(二)
- 简单 --了解diff算法
- 简单 --了解nextick
- Snabbdom -- 理解虚拟dom和diff算法
- Snabbdom -- h函数
- Snabbdom - Vnode 函数
- Snabbdom -- init 函数
- Snabbdom -- patch 函数
- 手写 -- 虚拟dom渲染
- Vue -- minVue
- vue3.x -- 源码分析
- 分析 -- reactivity
- 好文
- grpc -- 浏览器使用gRPC
- grcp-web -- 案例
- 待续