《Codex 守护者》一集——拥抱 PWA 和微前端

第 12 集：Codex 守护者 – 拥抱 PWA 和微前端

Arin 站在 Codex 广阔边界的边缘，发光数据场的光芒与深邃的太空相遇。相互连接的节点在她脚下嗡嗡作响，与生命和潜力产生共鸣。今天不同了。这不仅仅是行星防御军团（PDC）的又一天。该使命不仅仅是防御对手，还在于增强 Codex 的弹性，确保它能够抵御干扰，同时为依赖它的用户提供无缝体验。

生命周期船长的声音划破了寂静，平静但严厉。 “学员阿林，请记住：韧性不仅仅是力量；更是力量。这是关于适应性的。用户是 Codex 的本质，必须不惜一切代价保护他们的体验。”

阿林深吸了一口气，眼睛扫视着闪闪发光的地平线。任务很明确：使用工具和技术强化 Codex，增强其防御能力并维持用户信任。

---

1.渐进式 Web 应用程序 (PWA) 的力量

Arin 查阅了 Codex 的档案，那里存储着渐进式 Web 应用程序 (PWA) 的古老蓝图。她知道 PWA 不仅仅是应用程序，它们还是 Codex 和断开连接带来的混乱之间的守护者。这些强大的结构支持离线功能，确保即使数据路径出现问题，用户也能继续访问重要资源。

什么是 PWA？
渐进式 Web 应用程序 (PWA) 利用服务工作者和清单来提供行为类似于本机应用程序的 Web 应用程序，支持离线使用、更快的加载时间和可安装性。

代码示例：Service Worker 设置
Arin 开始打造 Service Worker，即缓存资产并提供无缝离线支持的无声守护者：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch(error => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

当 Arin 将服务工作者的代码嵌入到 Codex 的防御中时，它的光芒闪闪发光，确保用户即使在没有网络连接的情况下也永远不会面临空白。

优点：

• 离线功能即使网络访问中断也能保持应用程序的可用性。
• 由于缓存资源，加载时间更快。
• 通过类似原生的体验增强用户参与度。

缺点：

• 管理复杂性：让服务人员保持最新状态可能具有挑战性。
• 缓存的调试问题可能很难解决。

何时使用：

• 构建必须在连接较差的区域保持功能的应用程序时。
• 对于优先考虑用户参与度的高流量应用。

何时避免：

• 对于不需要离线功能的简单网络应用程序。
• 如果管理服务人员所增加的复杂性超过了好处。

---

2.微前端的模块化强度

阿林的眼睛扫视着法典巨大而庞大的界面，每个区域都充满了其独特的能量特征。随着时间的推移，这个星球变得越来越复杂，每一次增加都让维护变得更加困难。她回忆起可扩展性建设者的教诲：“分而治之。每个部分都必须能够独立又和谐地发挥作用。”

什么是微前端？
微前端将微服务架构的原理扩展到前端，使团队能够将单一应用程序分解为更小的、可独立部署的单元，这些单元充当一个内聚的应用程序。

这种方法对于多个团队在应用程序的不同部分工作的大型应用程序特别有益。微前端允许每个团队保持自主权、更新和部署他们的部分，而不影响整个应用程序。

微前端的主要优点：

• 团队自治和并行开发。
• 独立部署确保快速更新，无需停机。
• 可扩展架构可以随着应用的需求而增长。

潜在挑战：

• 微前端之间的通信复杂性。
• 管理共享状态可能会导致代码复杂性增加。
• 如果不仔细管理，就会出现依赖重复。

测试用例：神奇宝贝应用程序：
Arin 设想了一个神奇宝贝应用程序，其中不同的部分，例如Poke Battle和Pokedex，被开发为单独的微前端。这个部门将确保 Pokedex 的更新不会影响 Poke Battle，反之亦然。

设置容器应用:
容器应用程序充当将微前端绑定在一起的协调器。下面是使用 Webpack Module Federation 用于集成微前端的示例设置。

container-app/package.json:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch(error => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

container-app/webpack.config.js:

{
  "name": "container-app",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0"
  },
  "scripts": {
    "start": "webpack serve --config webpack.config.js"
  }
}

container-app/src/index.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    port: 8080,
  },
  output: {
    publicPath: 'http://localhost:8080/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      remotes: {
        pokebattle: 'pokebattle@http://localhost:8081/remoteEntry.js',
        pokedex: 'pokedex@http://localhost:8082/remoteEntry.js',
      },
      shared: ['react', 'react-dom']
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

创建 Poke Battle 微前端:
Poke Battle 微前端有自己的代码库和 Webpack 配置。

pokebattle/package.json:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch(error => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

pokebattle/webpack.config.js:

{
  "name": "container-app",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0"
  },
  "scripts": {
    "start": "webpack serve --config webpack.config.js"
  }
}

pokebattle/src/App.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    port: 8080,
  },
  output: {
    publicPath: 'http://localhost:8080/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      remotes: {
        pokebattle: 'pokebattle@http://localhost:8081/remoteEntry.js',
        pokedex: 'pokedex@http://localhost:8082/remoteEntry.js',
      },
      shared: ['react', 'react-dom']
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

设置 Pokedex 微前端:
pokedex/package.json:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const PokeBattle = React.lazy(() => import('pokebattle/App'));
const Pokedex = React.lazy(() => import('pokedex/App'));

function App() {
  return (
    <Router>
      <React.Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/pokebattle" component={PokeBattle} />
          <Route path="/pokedex" component={Pokedex} />
        </Switch>
      </React.Suspense>
    </Router>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

pokedex/webpack.config.js:

{
  "name": "pokebattle",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "scripts": {
    "start": "webpack serve --config webpack.config.js"
  }
}

pokedex/src/App.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    port: 8081,
  },
  output: {
    publicPath: 'http://localhost:8081/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'pokebattle',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App',
      },
      shared: ['react', 'react-dom']
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

阿林的启示：
Arin 退后一步，看着 Codex 的新微前端架构焕发活力。每个部分都是一个更大整体的独立而又和谐的部分。 “法典现在更强大了，”她想。 “每个部分都可以自行战斗、适应和进化。”

优点：

• 团队自治允许多个团队独立开发。
• 独立部署意味着快速、独立的更新。
• 模块化架构支持可扩展、可维护的代码库。

缺点：

• 微前端之间的通信可能很复杂。
• 管理共享依赖项如果处理不当可能会导致重复。
• 初始设置比传统的单页应用程序更复杂。

何时使用：

• 大型应用程序需要单独的团队处理不同的功能。
• 当模块化和独立的部署周期有益时。

何时避免：

• 小型应用程序的复杂性不合理。
• 如果您的团队没有能力处理微前端通信的细微差别。

---

3.通过代码分割和延迟加载提升用户体验

阿林转向生命周期队长，后者赞同地点点头。 “用户必须感觉到 Codex 始终响应迅速，始终做好准备，”他说。 代码分割和延迟加载是确保这一点的关键。通过仅加载必要的内容，Codex 可以保持其敏捷性并让用户沉浸在他们的体验中。

代码分割示例:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Poke Battle Arena</h1>
      <p>Choose your Pokémon and battle your friends!</p>
    </div>
  );
}

export default App;

优点：

• 缩短了初始加载时间，因为仅加载必要的代码。
• 增强用户体验减少加载和渲染时间。

缺点：

• 管理加载状态变得必要。
• 调试延迟加载的组件可能会更复杂。

何时使用：

• 对于具有大型组件且最初不需要加载的应用程序。
• 优化性能和更快的交互至关重要。

何时避免：

• 对于简单的应用程序，拆分不会带来显着的性能改进。
• 在处理最小的应用程序复杂性时，延迟加载会增加不必要的开销。

---

要点

Concept	Definition	Pros	Cons	When to Use	When to Avoid
Progressive Web Apps (PWAs)	Web apps with offline capabilities and native-like features.	Offline access, improved performance, user engagement.	Complex service worker management, debugging challenges.	For apps needing offline capabilities and quick load.	Apps that don’t benefit from offline or native features.
Micro-Frontends	Independent, deployable micro-apps forming one application.	Team autonomy, independent deployments, modular architecture.	Communication complexity, potential dependency duplication.	Large apps needing scalable, modular development.	Simple apps where the complexity isn’t justified.
Code Splitting	Splitting code into smaller chunks that load on demand.	Reduces initial load time, improves UX.	Requires managing loading states, can complicate debugging.	Apps with large, seldom-used components.	Lightweight apps with minimal performance concerns.

概念

---

定义

优点 缺点 何时使用 何时避免 标题> 渐进式网络应用 (PWA) 具有离线功能和类似本机功能的网络应用程序。 离线访问、提高性能、用户参与度。 复杂的 Service Worker 管理、调试挑战。 适用于需要离线功能和快速加载的应用。 无法从离线或本机功能中受益的应用。 微前端 独立的、可部署的微应用形成一个应用程序。 团队自治、独立部署、模块化架构。 通信复杂性、潜在的依赖重复。 需要可扩展、模块化开发的大型应用。 简单的应用程序，其复杂性不合理。 代码分割 将代码分割成按需加载的较小块。 减少初始加载时间，改善用户体验。 需要管理加载状态，可能会使调试复杂化。 具有大型且很少使用的组件的应用。 具有最小性能问题的轻量级应用。 表> Arin 退后一步，看着 Codex 焕发出新的能量。它不再是一个整体，而是一系列强大的、相互关联的节点——有弹性、适应性强，并准备好迎接即将到来的挑战。随着每一次的增强，她意识到真正的防御不仅仅是蛮力；而是。这是关于明智的战略适应。 “用户永远是安全的，”她低声说道，感觉法典的脉搏与她的决心一致。

以上是《Codex 守护者》一集——拥抱 PWA 和微前端的详细内容。更多信息请关注PHP中文网其他相关文章！