资助申请：swap.cow.fi 性能优化 - 代码包优化（副本） | 声呐信息

资助标题

资助申请：swap.cow.fi 性能优化 - 代码包优化

作者

高级 Web 开发者 - Konstantin Barabanov: 点击查看
主要联系人 - 点击查看

经验与资质

请参见此处：点击查看

资助描述

目前，swap 应用的构建命令生成以下 JS 代码包：

总大小：19.02 mB (4.52 mB brotli)
初始 JS 加载大小：7.8 mB (2.16 mB brotli)

我的测试表明，我们可以将这些大小减少到：

总大小：16.63 mB (4.12 mB brotli)
初始 JS 加载大小：4.41 mB (1.32 mB brotli)

因此，初始加载性能提升超过 1.5 倍。

这可以通过一些代码包优化技术实现：无需对代码库进行重大更改，也无需大量工作。

以下是应用的优化列表：

更新 @1inch/permit-signed-approvals-utils 版本并通过 async 导入使用
- 该库已归档，因此我们可以复制一些实现以摆脱最常用的部分
- 此更新导致 @cowprotocol/permit-utils 发生破坏性变更（getPermitUtilsInstance 现在是异步的），因此我们必须发布新的主版本
更新 @safe-global 版本并通过 async 导入使用 @safe-global/api-kit
- 新版本的 @safe-global 不需要使用 protocol-kit 和 safe-ethers-lib
- 不再需要 web3
- 更新稍微改变了返回类型，因此必须修复
去重 bn.js
更新 @walletconnect
通过 async 导入使用 framer-motion
通过 async 导入使用 lottie-react
通过 async 导入使用 lottie/progressbar-step-*.json
更好地使用 vite 的 manualChunks

此外：许多依赖项的新版本支持 esm，因此我们通过 tree shaking 赢得了巨大的体积优势。

预期影响：

更快的首次绘制和感知性能（> 1.5 倍）。请参见第一条评论中的页面速度指标比较。

我希望通过此功能提供的其他更改/功能：

更好的代码块/入口点/资源命名
使用点击查看来比较未来的代码包大小差异

资助类型

基于里程碑

里程碑

里程碑	标题	持续时间	资金请求
里程碑 0	概念验证（PoC），准备 PageSpeed Insights 报告	已完成	400 xDAI + 500 COW
里程碑 1	为整洁的 PR 准备更改	1天	0
里程碑 3	更好的命名，bundle-stats 使用	0.5天	0
里程碑 4	测试	1天	0
里程碑 5	更新贡献文档，设置 eslint 规则	0.5天	0
里程碑 6	提供 PR	0天	400 xDAI + 500 COW
里程碑 7	修复发现的相关问题	未知	0

时长

我准备在资助批准后立即开始。我不会全职工作，但相信可以在批准后约 1 周内完成。

资金请求

整个功能请求 800 xDAI + 1000 COW。

Gnosis Chain 地址

0xd26ecc4457eb51cde9a5d44d316b3e83d60f2efb

其他信息

我已经完成了一个原型，并将在第一条评论中提供 PageSpeed Insights 报告。

如您所见，首次内容绘制、速度指数、最大内容绘制等指标在这些优化下更低。

未来（超出当前范围）的步骤可能包括：

摆脱 web3-react 依赖
通过 React 的 lazy 加载每个页面（swap 除外）
将 @ethersproject 迁移到 viem
通过 async 导入使用 @uniswap
通过 async 导入使用一些 common 和 modules 模块（它们真的很大！）
在 cow sdk 库中：通过 async 导入使用 @safe-global
在 cow sdk 库中：通过 async 导入使用 @defuse-protocol/one-click-sdk-typescript

条款与条件

通过提交此资助申请，我承认并同意受 CoW DAO 参与协议和 CoW DAO 资助协议条款的约束。

资助申请：swap.cow.fi 性能优化 - 代码包优化（副本）

摘要

提案内容