君子以泽,完美世界前传下载,完美世界有声小说全集

新聞中心

這里有您想知道的互聯網營銷解決方案

微前端架構的幾種技術選型

背景

隨著SPA大規(guī)模的應用，緊接著就帶來一個新問題：一個規(guī)?；瘧眯枰鸱?。

網站建設哪家好，找成都創(chuàng)新互聯！專注于網頁設計、網站建設、微信開發(fā)、小程序設計、集團企業(yè)網站建設等服務項目。為回饋新老客戶創(chuàng)新互聯還提供了管城免費建站歡迎大家使用！

一方面功能快速增加導致打包時間成比例上升，而緊急發(fā)布時要求是越短越好，這是矛盾的。另一方面當一個代碼庫集成了所有功能時，日常協作絕對是非常困難的。而且最近十多年，前端技術的發(fā)展是非?？斓?，每隔兩年就是一個時代，導致同志們必須升級項目甚至于換一個框架。但如果大家想在一個規(guī)模化應用中一個版本做好這件事，基本上是不可能的。

最早的解決方案是采用iframe的方法，根據功能主要模塊拆分規(guī)?；瘧?，子應用之間使用跳轉。但這個方案最大問題是導致頁面重新加載和白屏。

那有什么好的解決方案呢？微前端這樣具有跨應用的解決方案在此背景下應運而生了！

微前端的概念

微前端是什么：微前端是一種類似于微服務的架構，是一種由獨立交付的多個前端應用組成整體的架構風格，將前端應用分解成一些更小、更簡單的能夠獨立開發(fā)、測試、部署的應用，而在用戶看來仍然是內聚的單個產品。有一個基座應用（主應用），來管理各個子應用的加載和卸載。

f135ab0912746bd6.png

所以微前端不是指具體的庫，不是指具體的框架，不是指具體的工具，而是一種理想與架構模式。

微前端的核心三大原則就是：獨立運行、獨立部署、獨立開發(fā)

微前端的優(yōu)勢

采用微前端架構的好處就是，將這些小型應用融合為一個完整的應用，或者將原本運行已久、沒有關聯的幾個應用融合為一個應用可以將多個項目融合為一，又可以減少項目之間的耦合，提升項目擴展性。

實現微前端的幾種方式

從single-spa到qiankun
基于WebComponent的micro-app
webpack5實現的Module Federation

微前端框架的分類

Single-spa

single-spa是一個很好的微前端基礎框架，而qiankun框架就是基于single-spa來實現的，在single-spa的基礎上做了一層封裝，也解決了single-spa的一些缺陷。

首先我們先來了解該如何使用single-spa來完成微前端的搭建。

single-spa.jpg

Single-spa實現原理

首先在基座應用中注冊所有App的路由，single-spa保存各子應用的路由映射關系，充當微前端控制器Controler，。URL響應時，匹配子應用路由并加載渲染子應用。上圖便是對single-spa完整的描述。

有了理論基礎，接下來，我們來看看代碼層面時如何使用的。

以下以Vue工程為例基座構建single-spa,在Vue工程入口文件main.js完成基座的配置。

基座配置

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerApplication, start } from 'single-spa'
Vue.config.productionTip = false
const mountApp = (url) => {
 return new Promise((resolve, reject) => {
   const script = document.createElement('script')
   script.src = url
   script.onload = resolve
   script.onerror = reject
   // 通過插入script標簽的方式掛載子應用
   const firstScript = document.getElementsByTagName('script')[0]
   // 掛載子應用
   firstScript.parentNode.insertBefore(script, firstScript)
 })
}
const loadApp = (appRouter, appName) => {
 // 遠程加載子應用
 return async () => {
   //手動掛載子應用
   await mountApp(appRouter + '/js/chunk-vendors.js')
   await mountApp(appRouter + '/js/app.js')
   // 獲取子應用生命周期函數
   return window[appName]
 }
}
// 子應用列表
const appList = [
 {
   // 子應用名稱
   name: 'app1',
   // 掛載子應用
   app: loadApp('http://localhost:8083', 'app1'),
   // 匹配該子路由的條件
   activeWhen: location => location.pathname.startsWith('/app1'),
   // 傳遞給子應用的對象
   customProps: {}
 },
 {
   name: 'app2',
   app: loadApp('http://localhost:8082', 'app2'),
   activeWhen: location => location.pathname.startsWith('/app2'),
   customProps: {}
 }
]
// 注冊子應用
appList.map(item => {
 registerApplication(item)
})

// 注冊路由并啟動基座
new Vue({
 router,
 mounted() {
   start()
 },
 render: h => h(App)
}).$mount('#app')
復制代碼

構建基座的核心是：配置子應用信息，通過registerApplication注冊子應用，在基座工程掛載階段start啟動基座。

子應用配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import singleSpaVue from 'single-spa-vue'
Vue.config.productionTip = false
const appOptions = {
 el: '#microApp',
 router,
 render: h => h(App)
}
// 支持應用獨立運行、部署，不依賴于基座應用
// 如果不是微應用環(huán)境，即啟動自身掛載的方式
if (!process.env.isMicro) {
 delete appOptions.el
 new Vue(appOptions).$mount('#app')
}
// 基于基座應用，導出生命周期函數
const appLifecycle = singleSpaVue({
 Vue,
 appOptions
})
// 拋出子應用生命周期
// 啟動生命周期函數
export const bootstrap = (props)  => {
 console.log('app2 bootstrap')
 return appLifecycle.bootstrap(() => { })
}
// 掛載生命周期函數
export const mount = (props) => {
 console.log('app2 mount')
 return appLifecycle.mount(() => { })
}
// 卸載生命周期函數
export const unmount = (props) => {
 console.log('app2 unmount')
 return appLifecycle.unmount(() => { })
}
復制代碼

配置子應用為umd打包方式

//vue.config.js
const package = require('./package.json')
module.exports = {
 // 告訴子應用在這個地址加載靜態(tài)資源，否則會去基座應用的域名下加載
 publicPath: '//localhost:8082',
 // 開發(fā)服務器
 devServer: {
   port: 8082
 },
 configureWebpack: {
   // 導出umd格式的包，在全局對象上掛載屬性package.name，基座應用需要通過這個
   // 全局對象獲取一些信息，比如子應用導出的生命周期函數
   output: {
     // library的值在所有子應用中需要唯一
     library: package.name,
     libraryTarget: 'umd'
   }
 }
復制代碼

配置子應用環(huán)境變量

// .env.micro  
NODE_ENV=development
VUE_APP_BASE_URL=/app2
isMicro=true
復制代碼

子應用配置的核心是用singleSpaVue生成子路由配置后，必須要拋出其生命周期函數。

用以上方式便可輕松實現一個簡單的微前端應用了。

那么我們有single-spa這種微前端解決方案，為什么還需要qiankun呢？

相比于single-spa，qiankun他解決了JS沙盒環(huán)境，不需要我們自己去進行處理。在single-spa的開發(fā)過程中，我們需要自己手動的去寫調用子應用JS的方法（如上面的 createScript方法），而qiankun不需要，乾坤只需要你傳入響應的apps的配置即可，會幫助我們去加載。

Qiankun

Qiankun的優(yōu)勢

基于 single-spa[1] 封裝，提供了更加開箱即用的 API。
技術棧無關，任意技術棧的應用均可使用/接入，不論是 React/Vue/Angular/JQuery 還是其他等框架。
HTML Entry 接入方式，讓你接入微應用像使用 iframe 一樣簡單。
樣式隔離，確保微應用之間樣式互相不干擾。
JS 沙箱，確保微應用之間全局變量/事件不沖突。
資源預加載，在瀏覽器空閑時間預加載未打開的微應用資源，加速微應用打開速度。

基座配置

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
 {
   name: 'reactApp',
   entry: '//localhost:3000',
   container: '#container',
   activeRule: '/app-react',
 },
 {
   name: 'vueApp',
   entry: '//localhost:8080',
   container: '#container',
   activeRule: '/app-vue',
 },
 {
   name: 'angularApp',
   entry: '//localhost:4200',
   container: '#container',
   activeRule: '/app-angular',
 },
]);
// 啟動 qiankun
start();
復制代碼

子應用配置

以 create react app 生成的 react 16 項目為例，搭配 react-router-dom 5.x。

1.在 src 目錄新增 public-path.js，解決子應用掛載時，訪問靜態(tài)資源沖突

if (window.__POWERED_BY_QIANKUN__) {
   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
 }
復制代碼

2.設置 history 模式路由的 base：


復制代碼

3.入口文件 index.js 修改，為了避免根 id #root 與其他的 DOM 沖突，需要限制查找范圍。

import './public-path';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 function render(props) {
   const { container } = props;
    ReactDOM.render(, container ? container.querySelector('#root') :  
   document.querySelector('#root'));
 }
 if (!window.__POWERED_BY_QIANKUN__) {
   render({});
 }
 export async function bootstrap() {
   console.log('[react16] react app bootstraped');
 }
 export async function mount(props) {
   console.log('[react16] props from main framework', props);
   render(props);
 }
 export async function unmount(props) {
   const { container } = props;
   ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') :  
   document.querySelector('#root'));
 }
復制代碼

4.修改 webpack 配置

安裝插件 @rescripts/cli，當然也可以選擇其他的插件，例如 react-app-rewired。

npm i -D @rescripts/cli
復制代碼

根目錄新增 .rescriptsrc.js：

const { name } = require('./package');
module.exports = {
 webpack: (config) => {
   config.output.library = `${name}-[name]`;
   config.output.libraryTarget = 'umd';
   config.output.jsonpFunction = `webpackJsonp_${name}`;
   config.output.globalObject = 'window';
   return config;
 },
 devServer: (_) => {
   const config = _;
   config.headers = {
     'Access-Control-Allow-Origin': '*',
   };
   config.historyApiFallback = true;
   config.hot = false;
   config.watchContentBase = false;
   config.liveReload = false;
   return config;
 },
};
復制代碼

以上對Qiankun的使用可以看出，與single-spa使用過程很相似。不同的是，Qiankun的使用過程更簡便了。一些內置的操作交由給Qiankun內部實現。這是一種IOC思想的實現，我們只管面向容器化開發(fā)，其他操作交給Qiankun框架管理。

Micro-app

micro-app并沒有沿襲single-spa的思路，而是借鑒了WebComponent的思想，通過CustomElement結合自定義的ShadowDom，將微前端封裝成一個類WebComponent組件，從而實現微前端的組件化渲染。并且由于自定義ShadowDom的隔離特性，micro-app不需要像single-spa和qiankun一樣要求子應用修改渲染邏輯并暴露出方法，也不需要修改webpack配置，是目前市面上接入微前端成本最低的方案。

WebComponent的概念

**WebComponent**[2]是HTML5提供的一套自定義元素的接口，**WebComponent**[3]是一套不同的技術，允許您創(chuàng)建可重用的定制元素（它們的功能封裝在您的代碼之外）并且在您的 web 應用中使用它們。以上是MDN社區(qū)對WebComponent的解釋。