18、Elm 开发：从单页应用构建到性能优化

Elm 开发：从单页应用构建到性能优化

单页应用构建回顾

在之前的开发中，我们借助 Url.Parser 模块解析了静态和动态 URL 路径。接着，利用 Browser.application 函数和 Elm 架构，获取了浏览器当前的 URL，并将其转换为路由和页面。通过 Elm 架构，我们构建了组件并更新其状态，最后依据当前页面状态展示不同的页面。

不过，在 setNewPage 和 update 中存在代码重复的问题。连接每个组件会产生极为相似的代码。为解决这一问题，我们可以创建一个辅助函数，该函数使用合适的 Page 构造函数和页面组件模型设置模型的 page 字段，并使用合适的包装消息映射命令。

辅助函数应接受 Page 构造函数、 Msg 包装器、主模型以及每个组件的 init 和 update 函数产生的模型 - 命令元组。这样就能在 setNewPage 和 Main.update 中复用该辅助函数。需要注意的是， UserFeed Page 构造函数还接受一个 String username 参数，因此在调用辅助函数时可能需要使用部分应用。

另外，当 Feed 为空时，我们可以渲染不同的消息。在