当前位置：首页 > article >正文

微前端之 Garfish.js 的基础使用教程和进阶配置

article 2026/3/17 7:25:17

前言

在现代前端开发中，微前端架构逐渐成为一种流行的解决方案。它允许将大型应用拆分成多个小型独立的子应用，从而提高开发效率和可维护性。Garfish.js 是一个强大的微前端框架，可以帮助我们轻松实现这一架构。在本文中，通过一个简单易懂的教程，一步步了解如何使用 Garfish.js。

使用步骤

一、安装 Garfish

在开始使用 Garfish.js 之前，我们需要先安装它。在项目根目录下运行以下命令：

npm install @garfish/core

二、初始化 Garfish

安装完毕后，我们需要在项目中初始化 Garfish。首先，在你的主应用中创建一个 Garfish 配置文件 garfish.config.js：

import Garfish from '@garfish/core';const config = {// 指定你的微前端应用的入口apps: [{name: 'myApp',entry: 'http://localhost:3001',activeWhen: '/myApp',},],
};Garfish.run(config);

在这个配置文件中，我们通过 apps 属性定义了微前端应用的名称、入口 URL 和激活条件。

三、创建子应用

接下来，我们需要创建一个子应用。在这里，我们假设子应用是一个简单的 React 应用。首先，在子应用目录下初始化一个新的 React 项目：

npx create-react-app myApp

然后在 myApp 项目中安装 Garfish.js：

npm install @garfish/core

四、配置子应用

在子应用中，我们需要配置 Garfish，使它能够与主应用进行通信。在 myApp/src/index.js 文件中添加以下代码：

import Garfish from '@garfish/core';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';const config = {// 子应用的名称必须与主应用中的配置保持一致name: 'myApp',// 子应用挂载的节点domGetter: () => document.getElementById('root'),
};Garfish.registerApp(config);ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

五、启动应用

现在，我们已经配置好了主应用和子应用。我们可以通过以下命令分别启动主应用和子应用：

# 启动主应用
npm start# 启动子应用
cd myApp
npm start

六、访问应用

启动应用后，我们可以通过浏览器访问主应用。输入主应用的 URL，例如 http://localhost:3000，然后访问子应用的路径，例如 http://localhost:3000/myApp。你将看到子应用成功嵌入到主应用中。

高级配置

在完成基础配置的基础上，Garfish.js 还提供了一些高级功能，以满足更加复杂的需求。下面我们来看看几个常见的高级配置选项。

1. 生命周期钩子

Garfish.js 提供了丰富的生命周期钩子，可以让你在微前端应用加载、挂载、卸载等过程中执行自定义逻辑。这些钩子包括 beforeLoad、afterLoad、beforeMount、afterMount、beforeUnmount 和 afterUnmount。

你可以在配置文件中添加这些钩子，例如：

const config = {apps: [{name: 'myApp',entry: 'http://localhost:3001',activeWhen: '/myApp',beforeLoad(appInfo) {console.log('Before loading', appInfo);},afterMount(appInfo) {console.log('After mounting', appInfo);},},],
};

2. 沙箱隔离

为了防止多个子应用之间的相互影响，Garfish.js 提供了沙箱隔离机制。默认情况下，每个子应用运行在独立的沙箱环境中。你可以通过配置沙箱选项来控制其行为：

const config = {apps: [{name: 'myApp',entry: 'http://localhost:3001',activeWhen: '/myApp',sandbox: {strictIsolation: true, // 开启严格隔离snapshot: true, // 启用快照},},],
};

3. 预加载

为了提高子应用的加载速度，Garfish.js 支持预加载功能。你可以在配置中启用预加载：

const config = {apps: [{name: 'myApp',entry: 'http://localhost:3001',activeWhen: '/myApp',// 预加载配置props: {prefetch: true,},},],
};

4. 自定义路由

Garfish.js 允许你自定义路由匹配规则，适应更加灵活的需求。你可以通过 activeWhen 配置项来实现：

const config = {apps: [{name: 'myApp',entry: 'http://localhost:3001',// 自定义路由匹配规则activeWhen: location => location.pathname.startsWith('/myApp'),},],
};

调试与优化

在开发过程中，调试和优化是不可或缺的环节。Garfish.js 提供了一些实用工具和建议，帮助开发者更好地调试和优化微前端应用。

1. 调试工具

Garfish.js 内置了日志功能，可以帮助你了解微前端应用的加载、挂载和卸载过程。你可以通过配置 logger 选项来启用日志：

const config = {apps: [{name: 'myApp',entry: 'http://localhost:3001',},],// 启用日志logger: {level: 'debug', // 可选值: 'info', 'warn', 'error', 'debug'},
};

2. 性能优化

为了优化微前端应用的性能，可以考虑以下几点：

资源压缩：通过压缩 JavaScript、CSS 和图像资源，减少网络传输的大小。
缓存：利用浏览器缓存机制，减少重复加载的资源。
代码分割：将应用拆分成多个小模块，按需加载，减少初始加载时间。

总结

微前端架构的出现，为前端开发带来了全新的思路和解决方案。Garfish.js 提供了强大的微前端支持，使我们能够轻松实现大型应用的拆分和管理。

Garfish.js 是一个功能强大且灵活的微前端框架，无论是简单的项目还是复杂的企业级应用，它都能满足你的需求。通过本文的介绍，你应该已经掌握了 Garfish.js 的基础使用方法以及一些高级配置和优化技巧。

前言