从零到一：全面解析qiankun的hash模式

2023-10-10 03:17:12

微前端和qiankun

微前端的缘起

在当今互联网时代，前端应用日益复杂，单体应用的弊端日益显现。单体应用难以维护和扩展，尤其是当应用规模不断增长时，开发人员往往需要花费大量时间和精力来管理代码库。此外，单体应用的稳定性也难以保证，一旦某个模块出现问题，整个应用都可能受到影响。

微前端技术应运而生，它将前端应用拆分成多个独立的子应用，这些子应用可以独立开发、独立部署和独立运行。微前端技术具有诸多优势，包括：

模块化：微前端应用由多个独立的子应用组成，这些子应用可以根据需要灵活组合和复用，提高了代码的可维护性和可扩展性。
独立开发：子应用可以独立开发，不同的团队可以同时开发不同的子应用，提高了开发效率。
独立部署：子应用可以独立部署，无需等待整个应用重新部署，提高了部署的灵活性。
独立运行：子应用可以独立运行，即使某个子应用出现问题，其他子应用仍能正常运行，提高了应用的稳定性。

qiankun简介

qiankun是一个功能强大且广受欢迎的微前端框架，它由饿了么前端团队开源，目前已在饿了么、网易、京东等大型互联网公司广泛使用。qiankun的主要特性包括：

支持多种框架：qiankun支持多种主流前端框架，包括Vue.js、React.js、Angular等，可以轻松集成到现有的项目中。
开箱即用：qiankun开箱即用，无需复杂的前期配置，开发者可以快速上手，快速构建微前端应用。
功能完善：qiankun提供了丰富的功能，包括子应用注册、子应用加载、子应用通信、子应用沙箱等，可以满足各种微前端场景的需求。
活跃的社区：qiankun拥有活跃的社区，开发者可以轻松获取帮助和支持，也可以参与到qiankun的开发和维护中。

qiankun的hash模式

qiankun支持多种运行模式，其中hash模式是最简单也是最常见的模式。在hash模式下，子应用的路由与主应用的路由紧密相关，子应用的路由与hash值相关。例如，如果子应用的路由是/app1，那么当主应用的hash值发生变化时，子应用的路由也会发生变化。

hash模式的实现原理非常简单，它通过监听浏览器的hashchange事件，当hash值发生变化时，qiankun会自动加载或卸载相应的子应用。hash模式的优点是简单易用，缺点是URL不友好，且刷新页面时会重新加载所有子应用。

qiankun的hash模式配置

在qiankun的hash模式下，主应用和子应用的配置非常简单。主应用只需要在入口文件中引入qiankun，并配置子应用的路由和生命周期钩子。子应用只需要在入口文件中引入qiankun，并配置自己的路由和生命周期钩子。

// 主应用入口文件
import { createApp } from 'vue'
import { createWebHashHistory, createRouter } from 'vue-router'
import { registerMicroApps, start } from 'qiankun'

const app = createApp({})

const routes = [
  {
    path: '/',
    component: () => import('./App.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8081',
    container: '#app1',
    activeRule: '/app1'
  },
  {
    name: 'app2',
    entry: '//localhost:8082',
    container: '#app2',
    activeRule: '/app2'
  }
])

app.use(router)
app.mount('#app')

start()

// 子应用入口文件
import { createApp } from 'vue'
import { createWebHashHistory, createRouter } from 'vue-router'
import { registerMicroApps, start } from 'qiankun'

const app = createApp({})

const routes = [
  {
    path: '/',
    component: () => import('./App.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

registerMicroApps([
  {
    name: 'main',
    entry: '//localhost:8080',
    container: '#app',
    activeRule: '/'
  }
])

app.use(router)
app.mount('#app')

start()

qiankun的hash模式实践

在实际开发中，我们通常会使用qiankun的hash模式来构建微前端应用。以下是一些需要注意的事项：

在主应用中，我们需要使用vue-router来管理子应用的路由。qiankun提供了与vue-router无缝集成的支持，我们可以轻松地将子应用的路由与主应用的路由进行映射。
在子应用中，我们需要使用qiankun提供的API来注册子应用。qiankun提供了丰富的API，我们可以轻松地注册子应用的路由、生命周期钩子等信息。
在子应用中，我们需要使用qiankun提供的沙箱机制来隔离子应用的代码和数据。qiankun提供了完善的沙箱机制，我们可以轻松地将子应用的代码和数据与主应用的代码和数据隔离，防止子应用对主应用造成影响。