微前端需要注意哪些事项（实战分享）

红太狼 2024-04-01 06:22 512阅读 0赞

你有没有经常听到一个词？那就是微前端！ 感觉听上去非常的高大上！然而~

**微前端其实非常的简单，容易落地，而且也不高大上~**

![962dada27ce24d08864042f44633788d.jpeg][]

### 一.为什么需要微前端? ###

我们通过`3W`(what,why,how)的方式来讲解微前端

#### What?什么是微前端? ####

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。

微前端的核心在于**拆**, 拆完后在**合**!

#### Why?为什么去使用他? ####

*  不同团队间开发同一个应用技术栈不同怎么破？
 *  希望每个团队都可以独立开发，独立部署怎么破？
 *  项目中还需要老的应用代码怎么破？

我们是不是可以将一个应用划分成若干个子应用，将子应用打包成一个个的lib。当路径切换时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发问题

#### How?怎样落地微前端? ####

2018年 Single-SPA诞生了， `single-spa`是一个用于前端微服务化的`JavaScript`前端解决方案 (本身没有处理样式隔离，`js`执行隔离) 实现了路由劫持和应用加载

2019年 `qiankun`基于Single-SPA, 提供了更加开箱即用的 `API` （`single-spa` \+ `sandbox` \+ `import-html-entry`） 做到了，技术栈无关、并且接入简单（像`iframe`一样简单）

> 总结：子应用可以独立构建，运行时动态加载,主子应用完全解耦，技术栈无关，靠的是协议接入（子应用必须导出 bootstrap、mount、unmount方法）

这里先回答大家肯定会问的问题：

**这不是`iframe`吗？**

*  如果使用`iframe`，`iframe`中的子应用切换路由时用户刷新页面就尴尬了。

**应用通信**:

*  基于URL来进行数据传递，但是传递消息能力弱
 *  基于`CustomEvent`实现通信
 *  基于props主子应用间通信
 *  使用全局变量、`Redux`进行通信

**公共依赖**:

*  `CDN` \- externals
 *  `webpack`联邦模块

### 二 .`SingleSpa`实战 ###

#### 1.构建子应用 ####

vue create spa-vue
    npm install single-spa-vue
    复制代码

import singleSpaVue from 'single-spa-vue';
    const appOptions = {
       el: '#vue',
       router,
       render: h => h(App)
    }
    // 在非子应用中正常挂载应用
    if(!window.singleSpaNavigate){
     delete appOptions.el;
     new Vue(appOptions).$mount('#app');
    }
    const vueLifeCycle = singleSpaVue({
       Vue,
       appOptions
    });
    // 子应用必须导出 以下生命周期 bootstrap、mount、unmount
    export const bootstrap = vueLifeCycle.bootstrap;
    export const mount = vueLifeCycle.mount;
    export const unmount = vueLifeCycle.unmount;
    export default vueLifeCycle

[962dada27ce24d08864042f44633788d.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1525c47cfd224e7588c0bd2074fdc124.jpeg