【前端】新趋势2025

七灵微

已于 2025-05-31 23:19:50 修改

阅读量958

点赞数 10

分类专栏：前端🌟 文章标签：前端 wasm

于 2025-04-28 16:17:49 首次发布

本文链接：https://blog.csdn.net/qq_41775119/article/details/147589989

版权

前端🌟 专栏收录该内容

56 篇文章

订阅专栏

不定期更新及补充实战。建议关注收藏点赞。

微前端

“微前端”（Micro-Frontend）是一种架构思想，借鉴了“微服务”理念，将一个前端应用拆分成多个更小、自治的子应用，每个子应用可由独立的团队使用不同的技术栈开发和部署，最终在一个壳（主应用）中集成运行。

核心思想
技术异构性：各子应用可以用不同的框架（如 Vue、React、Angular）。
独立部署：每个子应用可以独立构建、上线，不影响其他模块。
自治团队：每个子应用由独立团队开发，职责清晰，协作成本低。
主从架构：主应用负责路由分发和公共依赖，子应用专注于业务实现。
优缺点
优点
技术栈可多样化，易于团队协作。
解耦性强，便于维护和演进。
独立部署，加快开发效率。
缺点
架构复杂度高，上手成本大。
各子应用间通信和状态管理较麻烦。
公共依赖管理和性能优化较困难。

实现

iframe 嵌套
最原始的方法，每个子应用运行在自己的 iframe 中。
缺点：性能差、通信复杂、体验割裂。
路由分发 + 动态加载
主应用负责路由控制，根据路由加载子应用的 JS、CSS 并挂载到指定容器。
常用框架：single-spa、qiankun（阿里开源）、Module Federation。
Webpack Module Federation（模块联邦）
Webpack 5 的新特性，允许多个应用在运行时互相加载模块。
更现代、更灵活，适合构建微前端应用。

qiankun（主流方案）

基于 single-spa 的微前端框架。
支持主子应用生命周期、样式隔离、JS 沙箱、预加载等。
兼容 Vue、React、Angular，甚至 jQuery。

安装：npm install qiankun
主应用配置

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vueApp',
    entry: '//localhost:7100',
    container: '#subapp-viewport',
    activeRule: '/vue',
  },
  {
    name: 'reactApp',
    entry: '//localhost:7200',
    container: '#subapp-viewport',
    activeRule: '/react',
  },
]);

start();

全栈一体化

前端 + 后端一体化：Next.js / Nuxt / Remix 成标配
React：Next.js 14（App Router + Server Components）
Vue：Nuxt 3（服务端渲染 + API 路由）

前端调用后端不再写“接口地址”，而是 co-locate API

// Next.js 14 App Router 中
export async function GET(req) {
  return Response.json({ msg: "hello" });
}

状态管理

Zustand、Jotai 替代 Redux Toolkit（在部分场景）
对于不复杂的项目，Zustand 和 Jotai 成为更轻量优雅的选择。
React Server State 管理演化（TanStack Query、SWR）
与后端状态管理紧密融合（如自动缓存、分页、预取、并发请求处理）

构建工具

Vite 成默认前端构建器
极快冷启动
默认支持 ESModules
完美配合 React/Vue/Svelte
Bun / Rspack / Turbopack 崛起
Bun: Node.js 替代者，运行/构建/测试全能。
Rspack: Webpack 团队的新宠，速度远超 Webpack。
Turbopack: Vercel 推出，Next.js 官方未来方向。

WebAssembly（WASM）

WebAssembly 是一种新的二进制格式，旨在使 Web 浏览器能够执行高性能的低级语言代码（如 C、C++、Rust 等）。与 JavaScript 相比，WASM 提供了更高的执行速度，并允许开发者将计算密集型任务移至 Web 应用中进行高效处理。

主要特点：
- 高性能： WebAssembly 编译后能够直接执行机器码，相比于 JavaScript 的解释执行，能够获得更高的执行效率，适合计算密集型任务。
- 语言无关： WebAssembly 支持多种编程语言的编译，如 C、C++、Rust 等，使开发者可以将现有的非 Web 代码迁移到 Web 上运行。
- 跨平台：由于 WebAssembly 是标准化的二进制格式，它可以在任何支持 WebAssembly 的平台上运行，包括浏览器、Node.js 环境等。
- 安全性： WebAssembly 在沙盒环境中运行，不允许直接访问本地文件系统或其他潜在危险的操作，保证了运行时的安全性。
- 与 JavaScript 的互操作性： WebAssembly 可以与 JavaScript 配合使用，开发者可以利用 JavaScript 调用 WebAssembly 提供的功能，也可以将 WebAssembly 用作 JavaScript 的加速器。
使用场景：
游戏开发：高性能的游戏引擎可以通过 WebAssembly 运行在浏览器中，为用户提供接近原生应用的游戏体验。
图像处理和视频编解码：图像处理、音视频编解码等任务需要较高的计算能力，WebAssembly 可以显著提升这些计算密集型任务的执行速度。
科学计算和大数据处理： WebAssembly 可以用来运行大量数据分析、机器学习等复杂的算法。
跨平台应用：使用非 Web 技术（如 C、C++）开发的应用可以通过 WebAssembly 迁移到浏览器中运行，减少重新开发的成本。