# qiankun_test

**Repository Path**: wei63w/qiankun_test

## Basic Information

- **Project Name**: qiankun_test
- **Description**: 微前端测试
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-09
- **Last Updated**: 2026-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# qiankun_test

#### 介绍
微前端测试

以路由为边界拆分应用：主应用作为 “基座”，根据 URL 路由匹配规则，加载 / 卸载不同的子应用（子应用独立构建、独立部署）。  
https://qiankun.umijs.org/zh/guide
qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。


技术分享: 

Vue3 响应式原理（Proxy 实现）
分享价值：理解 Vue3 比 Vue2 响应式更强大的原因，掌握前端响应式的核心逻辑；
分享框架：
① 理论：Vue2（Object.defineProperty）vs Vue3（Proxy）的区别、响应式的核心（依赖收集 + 触发更新）；
② 核心示例：
手动实现简易版 Proxy 响应式；
响应式的边界情况（数组、嵌套对象、新增属性）；
③ 实战场景：自定义响应式数据、理解 Vue3 ref/reactive 的区别；



. 前端防抖与节流（高频面试 / 实战考点）
分享价值：解决 “搜索框频繁请求”“滚动 /resize 频繁触发” 等性能问题，提升页面流畅度；
分享框架：
① 理论：防抖（触发后延迟执行，重复触发重置时间）vs 节流（固定频率执行，避免频繁触发）；
② 核心示例：
手动实现基础版 / 进阶版防抖节流；
对比 Lodash 防抖节流的用法；
实战场景（搜索框联想、滚动加载、按钮防重复点击）；
③ 坑点：this 指向、参数传递、立即执行版的实现；



浏览器缓存机制（强缓存 / 协商缓存）
分享价值：理解前端性能优化的核心手段，解决 “资源重复加载”“缓存更新不及时” 问题；
分享框架：
① 理论：缓存的分类（强缓存：Cache-Control/Expires；协商缓存：ETag/Last-Modified）、缓存流程；
② 核心示例：
HTTP 响应头配置缓存（Nginx / 前端打包配置）；
实战：静态资源（JS/CSS/ 图片）的缓存策略；
坑点：缓存穿透、缓存更新（如文件加哈希后缀）；
③ 工具：Chrome Network 面板分析缓存状态；



Vite 核心原理与实践（替代 Webpack 的新一代构建工具）
分享价值：理解 Vite 比 Webpack 更快的原因，落地前端工程化构建优化；
分享框架：
① 理论：Vite 核心（开发环境 ESBuild 编译、生产环境 Rollup 打包、按需编译）vs Webpack（全量打包）；
② 核心示例：
Vite 基础配置（别名、代理、环境变量）；
性能对比（Vite vs Webpack 启动速度、热更新速度）；
实战：Vue/React 项目迁移到 Vite；
③ 坑点：兼容性问题、插件适配；


微前端（Module Federation + qiankun 实战）
分享价值
解决中大型前端项目 “巨石应用” 问题，实现多团队独立开发、独立部署、按需加载，适合中大型团队 / 进阶开发者，是前端工程化的高阶方向。
分享框架
理论：
微前端核心思想（隔离、独立、整合）；
Module Federation（Webpack5 内置）vs qiankun（阿里开源）的区别（前者轻量、后者成熟）。
核心示例：
Module Federation：主应用加载子应用组件、共享 React/Vue 依赖；
qiankun：主应用注册子应用、应用间通信、样式隔离。
实战场景：大型后台管理系统拆分为多个微应用、共享登录状态、子应用独立部署不影响主应用。